README
fela-enforce-longhands
This enhancers implements are specific propertyPriority
configuration that enforces longhand over shorthand properties. This enforces a certain order, but makes it deterministic which helps to prevent issues.
For example, paddingLeft
will always overwrite the padding-left
value from a padding
property, no matter in which order they are rendered.
How it works
It uses a clever CSS specificity trick where repeated selectors increase the specificity and thus a prioritized over others.
For example, if we render the following style:
const style = {
paddingLeft: 10,
padding: 5,
}
the following CSS will be rendered respectively:
.a.a {
padding-left: 10px;
}
.b {
padding: 5px;
}
Check Selectors Level 3 for more information.
Installation
yarn add fela-enforce-longhands
You may alternatively use npm i --save fela-enforce-longhands
.
Usage
import { createRenderer } from 'fela'
import enforceLonghands from 'fela-enforce-longhands'
const renderer = createRenderer({
enhancers: [enforceLonghands()],
})
License
Fela is licensed under the MIT License.
Documentation is licensed under Creative Commons License.
Created with ♥ by @robinweser and all the great contributors.