Caveats

Like every solution, also Fela is not the ultimate solution and should not be blindly used without evaluating its benefits and disadvantages. The strict design decisions also have some caveats.

Computed Selectors

The unique computed selectors are quite handy as they prevent namespacing conflicts. But they are not designed to be human-readable nor to be mutated at all. However, if you need to mutate the styles from outside, consider providing an API to pass the props.

Shorthand & Longhand Properties

Probably the biggest downside of using atomic CSS design, is the fact that shorthand and longhand properties can't safely be mixed in a single rule.

const rule = (props) => ({
  border: '1px solid black',
  borderColor: 'red',
})

The above example will not unconditionally render a red border as we can't tell which rule might be rendered before and therefore appears first in the stylesheet. There might have been another rule that renders

borderColor: red

which is rendered before this rule. Now rendering this rule, would cause

border: 1px solid black

to always be preferred based on how CSS specificity works.

There are different solutions to this problem. We highly recommend reading The Shorthand-Longhand Problem in Atomic CSS(new tab) for an in-depth explanation including all possible solutions.

There are three options to solve this with Fela. We recommend using fela-enforce-longhands(new tab) as it is the simplest and fastest solution.

Do not use shorthand and longhand properties together in a single rule. Perhaps the best is to avoid them at all. It might be more code to type, but its also more self-explanatory and descriptive.

Use fela-plugin-expand-shorthand(new tab) to resolve shorthand properties into their longhand equivalents.

Utilize the propertyPriority configuration option or use the fela-enforce-longhands(new tab) enhancer directly which implements an opinionated
```
propertyPriority
```
configuration. This will prioritize longhand over shorthand properties so that they always overwrite their shorthand equivalent.

CSS properties that contain double quotes

For CSS properties that need double quotes, make sure you are using nested quotes in your code. e.g.:

const rule = (props) => ({
  '::before': {
    content: '" "',
  },
})