JSS plugin that enables mixing in styles
This plugin implements a custom property extend
which allows you to mix in styles in various ways.
Style object own properties always take precedence over extended objects, so you can always override the extended definition. Exception is function values.
Use style object reference
const buttonColor = color: 'green'const buttonTheme = extend: buttonColor background: 'red'const styles = button: extend: buttonTheme fontSize: '20px'
Use rule name from the current styles object
const styles = buttonColor: background: 'red' button: extend: 'buttonColor' fontSize: '20px'
Use array of style objects
const styles = button: extend: background: 'red' color: 'green' fontSize: '20px'
const background = background: 'red'const color = color: 'green' const styles = button: extend: background color fontSize: '20px'
Use function which returns a style object
Nested extend
inside of the function is not supported. Will override other properties defined in the same rule.
const styles = button: color: datathemecolor fontSize: '20px'
Demo
Issues
File a bug against cssinjs/jss prefixed with [jss-extend].
Run tests
npm inpm run test
License
MIT