Package Exports
- jss-nested
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (jss-nested) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
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.
Usage example
import jss from 'jss'
import nested from 'jss-nested'
jss.use(nested())
const sheet = jss.createStyleSheet({
container: {
padding: '20px',
'&:hover': {
background: 'blue'
},
'&.clear': {
clear: 'both'
},
'& .button': {
background: 'red'
},
'&.selected, &.active': {
border: '1px solid red'
}
}
})console.log(sheet.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(sheet.classes){ container: "jss-0-0" }Issues
File a bug against jsstyles/jss prefixed with [jss-nested].
Run tests
npm i
npm run testLicense
MIT