Style
/ API Reference / PluginsStyle
/ API Reference / PluginsenforceLonghand
This plugin sorts styles in a way that always enforces longhand over shorthand properties.
It uses sortProperty under the hood to sort the properties.
Read The Shorthand-Longhand Problem in Atomic CSS for an in-depth explanation of why this is neccessary.
The Gist
import { enforceLonghandPlugin } from '@weser/style'
const plugin = enforceLonghandPlugin('directional')
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
| borderMode | none | directional | longhand | 'none' | The border mode to use.none: Directional and longhand properties fight each other.directional: Directional properties take precedence over longhand properties.longhand: Longhand properties take precedence over directional properties. |
Properties
| Type | Properties |
|---|---|
| Directional | borderTop, borderRight, borderBottom, borderLeft |
| Longhand | borderWidth, borderStyle, borderColor |
| Directional Longhand | borderTopWidth, borderTopStyle, borderTopColor, borderRightWidth, borderRightStyle, borderRightColor, borderBottomWidth, borderBottomStyle, borderBottomColor, borderLeftWidth, borderLeftStyle, borderLeftColor |
Returns
(Plugin) A plugin function that can be passed to the createRenderer function.
© 2024-present Robin Weser. All Rights Reserved.