JSS plugin that enables support for nested selectors

Put an & before a selector within a rule and it will be replaced by the parent selector and extracted to a separate rule.

Demo - JSS


Usage example

import jss from 'jss'
import nested from 'jss-nested'

jss.use(nested)

const styleSheet = jss.createStyleSheet({
  container: {
    padding: '20px',
    '&:hover': {
      background: 'blue'
    },
    '&.clear': {
      clear: 'both'
    },
    '& .button': {
      background: 'red'
    },
    '&.selected, &.active': {
      border: '1px solid red'
    }
  }
})

console.log(styleSheet.toString())

.jss-0-0 {
  padding: 20px;
}
.jss-0-0:hover {
  background: blue;
}
.jss-0-0.clear {
  clear: both;
}
.jss-0-0 .button {
  background: red;
}
.jss-0-0.selected, .jss-0-0.active {
  border: 1px solid red;
}

console.log(styleSheet.classes)

{ container: "jss-0-0" }

Run tests

npm i
npm run test

License

MIT