Style
/ API Reference
Style
/ API Reference

createRenderer

Creates the CSS function required to make it work.

The Gist

import {
  createRenderer,
  prefixerPlugin,
  fallbackValuePlugin,
  prefixerFallbacks,
} from '@weser/style'

const css = createRenderer({
  plugins: [fallbackValuePlugin(prefixerFallbacks), prefixerPlugin()],
})

// vendor prefixed and browser-compatible position: sticky
const style = css({
  display: 'flex',
  flexDirection: 'column',
  color: 'blue',
  position: 'sticky',
  appearance: 'none',
  ':hover': {
    color: 'red',
  },
  '@media (min-width: 800px)': {
    flexDirection: 'row',
  },
})

Parameters

ParameterTypeDescription
pluginsArray<Plugin>An array of plugins to apply to the style.
mergeStyleassignStyle (new tab)A function that merges the style object.

mergeStyle

An opinionated style merging function similar to Object.assign that handles style objects with special logic for nested styles and CSS properties. It's used internally to merge multiple style objects passed to the CSS function and is also available to plugins via the context.

Returns

(CSSFunction) A function that takes one or more style objects or nested arrays of style objects and returns a single resolved style object.

On this page