Style
/ API Reference / Plugins
Style
/ API Reference / Plugins

sortCondition

This plugin sorts CSS conditions (media queries, pseudo-classes, etc.) in a style object according to a custom sort function.

The Gist

import { sortConditionPlugin, sortMobileFirst } from '@weser/style'

const plugin = sortConditionPlugin(sortMobileFirst)

Parameters

ParameterTypeDefaultDescription
sortFn(left: string, right: string) => numberA comparison function that returns a negative number if left should come before right, positive if after, or 0 if equal.

Exports

This plugin also exports a sortMobileFirst helper function that sorts conditions in mobile-first order:

  • Regular properties first
  • Pseudo-classes (:hover, :focus, etc.) in LVFHA order
  • Media queries sorted by breakpoint
  • @supports queries last

Returns

(Plugin) A plugin function that can be passed to the createRenderer function.

On this page