JSS plugin to resolve local classNames in selectors

Sometimes you want to craft rules that refer to more than one local class name, so using jss-nested is not an option.

For example if you want to restyle an element when it's parent is hovered like in the following use case.

Usage example

import jss from 'jss'
import localRefs from 'jss-local-refs'

jss.use(localRefs())

const sheet = jss.createStyleSheet({
  container: {
    padding: '20px'
  },
  button: {
    background: 'red'
  },
  '.container:hover > .button': {
    background: 'blue'    
  }
})

console.log(sheet.toString())

.container--jss-0-0 {
  padding: 20px;
}
.button-jss-0-1 {
  background: red;
}
.container--jss-0-0:hover > .button-jss-0-1 {
  background: blue;
}

console.log(sheet.classes)

{
  container: "container--jss-0-0",
  button: "button-jss-0-1"
}

Run tests

npm install
npm test

License

MIT