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()],
})
Configuration
Options
Property | Type | Default | Description |
---|
borderMode | none | directional | longhand | none | Defines which border properties take priority.
none will treat both second level properties (e.g. border-width or border-top ) the same.
directional will prioritize e.g. border-top over border-width
longhand will prioritize e.g. border-width over border-top |
Example
import { createRenderer } from 'fela'
import enforceLonghands from 'fela-enforce-longhands'
const renderer = createRenderer({
enhancers: [
enforceLonghands({
borderMode: 'directional',
}),
],
})
License
Fela is licensed under the MIT License.
Documentation is licensed under Creative Commons License.
Created with ♥ by @robinweser and all the great contributors.