oliviertassinari-jss-plugin-syntax-rule-value-function v10.0.2-0

JSS plugin that allows to use functions for dynamic styles

If you want dynamic behavior for your Style Sheet, you can use functions as a value which return the actual value or a rule. If function returns null|undefined|false - property will be removed. Use sheet.update(data) in order to pass the data object.

Sheet option link: true is required for this to function.

Plugins are applied by default to function rules or values.

Make sure you read how to use plugins in general.

Function values

import jss from 'oliviertassinari-jss'

const styles = {
  button: {
    color: data => data.color
  }
}

const sheet = jss.createStyleSheet(styles, {link: true}).attach()

sheet.update({color: 'red'})

.button-1-2-3 {
  color: red;
}

Function rules

Similar to function values, you can use a function to return a dynamic style object. Use sheet.update(data) in order to pass the data object. Sheet option link: true is required for this to function.

const styles = {
  button: data => ({
    display: 'flex',
    color: data.color
  })
}

Support of "!important"

To use the !important modifier with function values, you must use array syntax:

const styles = {
  button: {
    color: data => [[data.color], '!important']
  }
}

Demo

Simple

Issues

File a bug against cssinjs/jss prefixed with [jss-plugin-syntax-rule-value-function].

Run tests

yarn
yarn test

License

MIT