PostCSS Nesting ![PostCSS](https://camo.githubusercontent.com/eefaf3856d60dff5cecdaa97c2447067c2d705e9b87951f9b5f21185a445774f/68747470733a2f2f706f73746373732e6769746875622e696f2f706f73746373732f6c6f676f2e737667)
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.
Usage
Add PostCSS Nesting to your project:
npm install postcss-nesting --save-dev
Use 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 |
---|