PostCSS Nesting

PostCSS Nesting lets you nest style rules inside each other, following the CSS Nesting specification.

```pcss 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:

bash npm install postcss-nesting --save-dev

Use PostCSS Nesting to process your CSS:

```js import postcssNesting from 'postcss-nesting';

postcssNesting.process(YOUR_CSS /, processOptions, pluginOptions /); ```

Or use it as a PostCSS plugin:

```js 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 | | --- | --- | --- | --- | --- |