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:

``js
const style = {
paddingLeft: 10,
padding: 5,
}
`

the following CSS will be rendered respectively:

`css
.a.a {
padding-left: 10px;
}

.b {
padding: 5px;
}
`

> Check Selectors Level 3 for more information.

Installation

`sh
yarn add fela-enforce-longhands
`

You may alternatively use npm i --save fela-enforce-longhands.

Usage

`javascript
import { createRenderer } from 'fela'
import enforceLonghands from 'fela-enforce-longhands'

const renderer = createRenderer({
enhancers: [enforceLonghands()],
})
`

$3

#### 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

`javascript
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.