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;
}Add PostCSS Nesting to your project:
npm install postcss-nesting --save-devUse PostCSS Nesting to process your CSS:
import postcssNesting from 'postcss-nesting';
postcssNesting.process(YOUR_CSS /*, processOptions, pluginOptions */);Or use it as a PostCSS plugin:
import postcss from 'postcss';
import postcssNesting from 'postcss-nesting';
postcss([
postcssNesting(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);PostCSS Nesting runs in all Node environments, with special instructions for:
| Node | Webpack | Create React App | Gulp | Grunt |
|---|
You can also use PostCSS Nesting on Deno:
import postcss from "https://deno.land/x/postcss/mod.js";
import postcssNesting from "https://deno.land/x/postcss_nesting/mod.js";
await postcss([postcssNesting]).process(YOUR_CSS /*, processOptions */);