jss-extend

JSS plugin that enables inheritance

This plugin implements a custom extend style property.

Demo - JSS


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 obejcts is expected.

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

Usage examples

import jss from 'jss'
import extend from 'jss-extend'

// Setup jss plugins.
jss.use(extend())

const sheet = jss.createStyleSheet({
  redContainer: {
    background: 'red'
  },
  container: {
    extend: 'redContainer',
    'font-size': '20px'
  }
})

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

// Without `extend`, using ES7.
const sheet = jss.createStyleSheet({
  container: {
    ...redContainer,
    'font-size': '20px'
  }
})

console.log(sheet.toString())

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

console.log(sheet.classes)

{container: 'jss-0-0'}

Issues

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

Run tests

npm i
npm run test

License

MIT