mpal9000 / jss-nested

Nested selectors plugin for jss

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

JSS logo

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

![Gitter](https://badges.gitter.im/Join Chat.svg)

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

About

Nested selectors plugin for jss

License:MIT License


Languages

Language:JavaScript 89.3%Language:HTML 10.7%