jss-extend

JSS plugin that enables inheritance

This plugin implements a custom extend style property.

Value of extend property can be a string, object and array. If string is used, it will look for a rule with such a name. If object - plain rule object is expected, if array - an array of plain rule objects is expected.

Rule's own properties always take precedence over extended rules, so you can always override the extended definition.

Examples

const styles = {
  redContainer: {
    background: 'red'
  },
  container: {
    extend: 'redContainer',
    'font-size': '20px'
  }
}

const redContainer = {
  background: 'red'
}
const styles = {
  container: {
    extend: redContainer, // Can be an array of styles
    'font-size': '20px'
  }
}

Compiles to:

.jss-23g44j5 {
  background: red;
  font-size: 20px;
}

Demo

Simple demo

Multi objects demo

Issues

File a bug against cssinjs/jss prefixed with [jss-extend].

Run tests

npm i
npm run test

License

MIT