Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

postcss-nesting

7.0.1 • Public • Published

PostCSS Nesting PostCSS

NPM Version CSS Standard Status Build Status Support Chat

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

Install

npm i postcss-nesting

DownloadsWeekly Downloads

3,352,970

Version

7.0.1

License

CC0-1.0

Unpacked Size

18.8 kB

Total Files

5

Last publish

Collaborators

  • avatar