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.

You can also reference a local rule within the style sheet by using $ruleName.

Make sure you read how to use plugins in general.

Demo - JSS


Usage example

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

jss.use(nested())

const sheet = jss.createStyleSheet({
  container: {
    padding: '20px',
    '&:hover': {
      background: 'blue'
    },
    // Add a global .clear class to the container.
    '&.clear': {
      clear: 'both'
    },
    // Reference a global .button scoped to the container.
    '& .button': {
      background: 'red'
    },
    // Use multiple container refs in one selector
    '&.selected, &.active': {
      border: '1px solid red'
    },
    // Reference the local rule "button".
    '& $button': {
      padding: '10px'
    }
  },
  button: {
    color: 'red'
  }
})

console.log(sheet.toString())

.container-12345 {
  padding: 20px;
}
.container-12345:hover {
  background: blue;
}
.container-12345.clear {
  clear: both;
}
.container-12345 .button {
  background: red;
}
.container-12345.selected, .container-12345.active {
  border: 1px solid red;
}
.button-12341 {
  color: red;
}
.container-12345 .button-12341 {
  padding: 10px;
}

console.log(sheet.classes)

{ container: "jss-0-0" }

Issues

File a bug against cssinjs/jss prefixed with [jss-nested].

Run tests

npm i
npm run test

License

MIT