❤
npm
Sign UpSign In

jss-extend

6.2.0 • Public • Published

JSS plugin that enables mixing in styles

Gitter

This plugin implements a custom property extend which allows you to mix in styles in various ways.

Style object own properties always take precedence over extended objects, so you can always override the extended definition. Exception is function values.

Use style object reference

 
const buttonColor = {
  color: 'green'
}
const buttonTheme = {
  extend: buttonColor
  background: 'red'
}
const styles = {
  button: {
    extend: buttonTheme,
    fontSize: '20px'
  }
}

Use rule name from the current styles object

const styles = {
  buttonColor: {
    background: 'red'
  },
  button: {
    extend: 'buttonColor',
    fontSize: '20px'
  }
}

Use array of style objects

const styles = {
  button: {
    extend: [{background: 'red'}, {color: 'green'}],
    fontSize: '20px'
  }
}
 
const background = {background: 'red'}
const color = {color: 'green'}
 
const styles = {
  button: {
    extend: [background, color],
    fontSize: '20px'
  }
}

Use function which returns a style object

Nested extend inside of the function is not supported. Will override other properties defined in the same rule.

const styles = {
  button: {
    extend: (data) => ({
      color: data.theme.color
    }),
    fontSize: '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

Readme

Keywords

Package Sidebar

Install

npm i jss-extend

Repository

github.com/cssinjs/jss-extend

Homepage

github.com/cssinjs/jss-extend#readme

Weekly Downloads

57,684

Version

6.2.0

License

MIT

Last publish

Collaborators

  • kof
Try on RunKit
Report malware