adan

Adan

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

Support Us

Support Robin Weser's work on adan 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 'adan'

import responsiveValue from 'adan-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(),
  ] as const,
})

// 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

Adan 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

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

Adan Plugins

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

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

Fela Plugins

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

Tip: In order to get proper types, make sure that you import adan 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 adan-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

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