jss-extend

JSS plugin that enables inheritance

This plugin implements a custom extend style property.

Demo - JSS


Usage example

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

jss.use(extend())

const redContainer = {
  background: 'red'
}

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

/**
 * For those who use an ES6 transpiler - you can achieve the same
 * by using the language itself.
 */

// ES7
let sheet = jss.createStyleSheet({
  container: {
    ...redContainer,
    'font-size': '20px'
  }
})

// ES6
let sheet = jss.createStyleSheet({
  container: Object.assign({}, redContainer, {
    'font-size': '20px'
  })
})

console.log(sheet.toString())

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

console.log(sheet.classes)

{ container: 'jss-0-0" }

Run tests

npm i
npm run test

License

MIT