fela-enforce-longhands v12.2.1
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.
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago