Plugins

Finally, this package adds plugin support for custom logic.
A plugin is just a pure function that takes a style object and returns a new style object.

By default, this package includes the following plugins:

• customProperty - Allows you to define custom style properties that resolve to a valid style object.
• debug - Adds debug styles to elements for simple layout debugging.
• embedded - Allows you to embed keyframes directly in style objects using the animationName property.
• enforceLonghand - Sorts styles in a way that always enforces longhand over shorthand properties.
• fallbackValue - Adds fallbacks to the style object.
• logger - Logs style objects to the console for debugging purposes.
• prefixer - Adds vendor prefixes to properties.
• pseudoElement - Allows you to style pseudo-elements (like ::before and ::after) using inline styles.
• responsiveValue - Adds responsive values to properties.
• rtl - Adds RTL support to properties.
• sortCondition - Sorts conditions according to a condition priority map.
• sortProperty - Sorts properties according to a property priority map.
• unit - Converts numeric values to the given unit.

Since a plugin is just a pure function that takes a style object and returns a new style object, we can create one by simply defining a function.
For example, if we want to implement a simple logging plugin, we can do the following:

import { T_Style } from '@weser/style'

function loggerPlugin(style: T_Style) {
  console.log(style)
  return style
}