Nest style rules inside each other
Clone or download
Latest commit 87c6d34 Sep 18, 2018
Permalink
Failed to load latest commit information.
lib 6.0.0 Jun 9, 2018
test 6.0.0 Jun 9, 2018
.editorconfig Use spaces in Markdown files Aug 19, 2017
.gitignore 7.0.0 Sep 18, 2018
.rollup.js 7.0.0 Sep 18, 2018
.tape.js Use mutation-safe walk method (#45) Aug 19, 2017
.travis.yml 6.0.0 Jun 9, 2018
CHANGELOG.md 7.0.0 Sep 18, 2018
CONTRIBUTING.md 6.0.0 Jun 9, 2018
INSTALL.md 7.0.0 Sep 18, 2018
LICENSE.md 5.0.0 Apr 23, 2018
README.md 7.0.0 Sep 18, 2018
index.js 6.0.0 Jun 9, 2018
package.json 7.0.0 Sep 18, 2018

README.md

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