PostCSS Nesting lets you nest style rules inside each other, following the CSS Nesting specification.
a, b {
color: red;
& c, & d {
color: white;
}
}
/* becomes */
a, b {
color: red;
}
a c, a d, b c, b d {
color: white;
}
NOTICE: In a future version of this project, nesting at-rules like @media
may be deprecated, as they are not part of the nesting proposal. In a comment,
a CSSWG member expressed interest in handling nested @media
while handling
selector nesting. So deprecating nested at-rules has been temporarily delayed.
Use PostCSS Nesting as a PostCSS plugin:
import postcss from "https://deno.land/x/postcss/mod.js";
import postcssNesting from "https://cdn.jsdelivr.net/gh/lumeland/postcss-nesting/mod.js";
await postcss([postcssNesting]).process(YOUR_CSS /*, processOptions */);