serjopepper / jss-extend

Extend rules and rules definitions when creating new rules.

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.

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