fela-plugin-simulate

This plugin can be used to quickly simulate nested style objects such as pseudo classes, media queries or attribute selectors.

Installation

yarn add fela-plugin-simulate

You may alternatively use npm i --save fela-plugin-simulate.

Usage

Make sure to read the documentation on how to use plugins.

import { createRenderer } from 'fela'
import simulate from 'fela-plugin-simulate'

const renderer = createRenderer({
  plugins: [simulate()],
})

Example

Input

{
  color: 'red',

  '@media (min-height: 320px)': {
    color: 'green',
    backgroundColor: 'red'
  },
  ':hover': {
    color: 'blue'
  },
  ':active': {
    color: 'yellow'
  }
}

rendered with the following props

{
  simulate: {
    ':hover': true,
    ':active': false,
    '@media (min-height: 320px)': true
  }
}

Output

{
  backgroundColor: 'red',
  color: 'blue'
}

License

Fela is licensed under the MIT License. Documentation is licensed under Creative Commons License. Created with ♥ by @robinweser and all the great contributors.