JSPM

  • Created
  • Published
  • Downloads 6784803
  • Score
    100M100P100Q216044F
  • License CC0-1.0

Nest style rules inside each other

Package Exports

  • postcss-nesting

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (postcss-nesting) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

PostCSS Nesting PostCSS

CSS Standard Status NPM Version 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 v7.0.0 nesting at-rules like @media will no longer work, as they are not part of the nesting proposal.

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