2.2 KiB
2.2 KiB
PostCSS Nesting
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 |
---|