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.