Yora

Yora is styling tool belt on top of restyle and fela plugins.

Support Us

Support Robin Weser's work on yora and its ecosystem directly via GitHub Sponsors.

Benefits

• Similar API
• Theming
• RTL Conversion
• Vendor Prefixing
• Extendable Plugin System
• Fela Plugin Compatibility
• TypeScript Support

The Gist

import { createSystem } from 'yora'

import responsiveValue from 'yora-plugin-responsive-value'

// supports most fela plugins out-of-the-box
import prefixer from 'fela-plugin-prefixer'

const theme = {
  colors: { primary: 'red' },
}

const css = createSystem({
  theme,
  plugins: [
    responsiveValue([
      '@media (min-width: 480px)',
      '@media (min-width: 1024px)',
    ]),
    prefixer(),
  ],
})

// vendor prefixed appearance, red color, 20px on mobile and 16px on desktop
const style = css((theme) => ({
  color: theme.colors.primary,
  fontSize: [20, , 16],
  appearance: 'none',
}))

Why

tbd.

API

Yora only exports a single function.

createSystem

Takes a configuration object and returns a css function similar to the one from restyle.

Configuration

| Argument | Type | Description | | -------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | | plugins | Array<Plugin> | List of plugins that are used to process each style before transforming into a flat hooks style. See Plugins for a list of all available plugins. | | theme | Object | A theme object that can be accessed from within style functions. |

Plugin

type Plugin = style => style

Plugins are simple functions that take a style object and return a new one, similar to Fela plugins.

Note: See Plugins for a list of all available plugins.

Returns

A css function similar to the one from restyle. It receives styles and returns a tuple of className and nodes. It accepts both pure style objects as well as functions of theme. Additionally, it also supports multiple style objects and indefinitely nested arrays of style objects.

Example

See The Gist.

Plugins

Yora becomes really powerful when utilising the rich plugin echosystem. That way, we can extend the styling engine to support our personal needs.

Yora Plugins

Yora only ships 5 native plugins, everything else can be done with Fela Plugins.

| Name | Description | | -------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | | yora-plugin-logger | Logs style objects at the current processing position. | | yora-plugin-remove-undefined | Removes declarations that are either undefined or null. | | yora-plugin-responsive-value | Resolves responsive array values. | | yora-plugin-sort-property | Sorts properties according to a sort function. Helpful when trying to enforce a specific order. | | yora-plugin-sort-mobile-first | Sorts media queries in a mobile-first approach. |

Fela Plugins

Thanks to similar architecture and API design, Yora supports almost all Fela plugins out of the box.

Tip: In order to get proper types, make sure that you import yora in the same file where Fela plugins are imported as types for all Fela plugins are shipped with the core package.

| Name | Description | Compatibility | | ------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | | fela-plugin-bidi | Enables direction-independent styles by converting them to either rtl or ltr on the fly. | Does not support context-specific direction via theme. | | fela-plugin-custom-property | Resolves custom properties. | Full | | fela-plugin-expand-shorthand | Expands shorthand properties into their longhand forms. | Full | | fela-plugin-extend | Adds a convenient syntax for (conditionally) extending styles. | Full | | fela-plugin-friendly-pseudo-class | Replaces JavaScript-friendly on* pseudo classes with valid CSS pseudo classes. | Full | | fela-plugin-fullscreen-prefixer | Adds vendor prefixes to :fullscreen pseudo classes. | - | | fela-plugin-hover-media | Wraps :hover styles in @media (hover: hover) queries. | Full | | fela-plugin-kebab-case | Converts properties written in kebab-case to camelCase. | Full | | fela-plugin-logger | Logs processed style objects. | Works, but logs an additional undefined. Use yora-plugin-logger instead. | | fela-plugin-multiple-selectors | Resolves multiple comma-separated selectors to individual object keys. | Full | | fela-plugin-named-keys | Replaces named keys with their actual value. | Full | | fela-plugin-placeholder-prefixer | Adds vendor prefixes to ::placeholder pseudo elements. | - | | fela-plugin-pseudo-prefixer | Adds vendor prefixes to pseudo classes and elements. | - | | fela-plugin-prefixer | Adds vendor prefixes to style objects. | - | | fela-plugin-responsive-value | Resolves array values to pre-defined media queries. Useful for component APIs. | Does not support the props argument to receive the theme. Use a static theme instead. | | fela-plugin-rtl | Converts styles to their right-to-left counterpart | Does not support context-specific direction via theme. | | fela-plugin-unit | Automatically adds units to values if needed. | Full | | fela-plugin-validator | Validates, logs & optionally deletes invalid properties for keyframes and rules. | Full |

Incompatible Fela Plugins

| Plugin | Alternative | | ----------------------- | --------------------------------------------------------------- | | fela-plugin-embedded | No replacement yet due to missing font and keyframe primitives. | | fela-plugin-theme-value | No replacement yet due to incompatible plugin APIs. |

License

Yora is licensed under the MIT License. Documentation is licensed under Creative Commons License. Created with ♥ by @robinweser.