@csstools/postcss-nesting-experimental

PostCSS Nesting Experimental

PostCSS Nesting Experimental lets you nest style rules inside each other, following the CSS Nesting specification. If you want nested rules the same way Sass works you might want to use PostCSS Nested instead.

[!WARNING] Experimental version of PostCSS Nesting

a, b {
	color: red;

	& c, & d {
		color: white;
	}

	:is(e) & {
		color: yellow;
	}
}

& {
	color: pink;
}


/* becomes */

a, b {
	color: red;
}

:is(a,b) c, :is(a,b) d {
		color: white;
	}

:is(e) :is(a,b) {
		color: yellow;
	}

:scope {
	color: pink;
}

Relative selectors :

.parent {
	color: red;

	.child {
		color: white;
	}

	> .other-child {
		color: yellow;
	}
}

/* becomes */

.parent {
	color: red;
}

:is(.parent) .child {
	color: white;
}

:is(.parent)> .other-child {
	color: yellow;
}

Usage

Add PostCSS Nesting Experimental to your project:

npm install @csstools/postcss-nesting-experimental --save-dev

Use PostCSS Nesting Experimental as a PostCSS plugin:

import postcss from 'postcss';
import postcssNestingExperimental from '@csstools/postcss-nesting-experimental';

postcss([
  postcssNestingExperimental(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

PostCSS Nesting Experimental runs in all Node environments, with special instructions for:

Node	Webpack	Gulp	Grunt

⚠️ Spec disclaimer

The CSS Nesting specification states on nesting that "Declarations occurring after a nested rule are invalid and ignored.". While we think it makes sense on browsers, enforcing this at the plugin level introduces several constraints that would interfere with PostCSS' plugin nature such as with @mixin