jss-nested

Nested selectors plugin for JSS

This plugin implements nested selectors for jss.

Take a look at examples directory.

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

{
    '.container': {
        padding: '20px',
        // Will result in .container.clear
        '&.clear': {
            clear: 'both'
        },
        // Will result in .container .button
        '& .button': {
            background: 'red'
        },
        '&.selected, &.active': {
            border: '1px solid red'
        }
    }
}

.container {
    padding: 20px;
}
.container.clear {
    clear: both;
}
.container .button {
    background: red;
}
.container.selected, .container.active {
    border: 1px solid red;
}

Register plugin

var jss = require('jss')
var nested = require('jss-nested')
jss.use(nested)

Run tests

Locally

npm i
open test/local.html

From github

Tests

License

MIT