mpal9000 / jss-extend

Inheritance plugin for jss

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'
}

const styleSheet = 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
const styleSheet = jss.createStyleSheet({
  container: {
    ...redContainer,
    'font-size': '20px'
  }
})

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

// Or with a helper
import xtend from 'xtend' // Does not mutate arguments

const styleSheet = jss.createStyleSheet({
  container: xtend(redContainer, {
    'font-size': '20px'
  })
})

console.log(styleSheet.toString())

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

console.log(styleSheet.classes)

{ container: "jss-0-0" }

Run tests

npm i
npm run test

License

MIT