[] lets you use @layer following the [Cascade Layers Specification]. For more information on layers, checkout [A Complete Guide to CSS Cascade Layers] by Miriam Suzanne.

<example.css>

/* becomes */

<example.expect.css>

[PostCSS Cascade Layers] creates "layers" of specificity.

It applies extra specificity on all your styles based on :

• the most specific selector found
• the order in which layers are defined

@layer A, B;

@layer B {
	.a-less-specific-selector {
		/* styles */
	}
}

@layer A {
	#something #very-specific {
		/* styles */
	}
}

@layer C {
	.a-less-specific-selector {
		/* styles */
	}
}

most specific selector :

• #something #very-specific
• [2, 0, 0]
• 2 + 1 -> 3 to ensure there is no overlap

the order in which layers are defined :

• A
• B
• C

This approach lets more important (later) layers always override less important (earlier) layers.
And layers have enough room internally so that each selector works and overrides as expected.

More layers with more specificity will cause longer :not(...) selectors to be generated.

The onRevertLayerKeyword option enables warnings if revert-layer is used. Transforming revert-layer for older browsers is not possible in this plugin.

Defaults to warn

<exportName>({ onRevertLayerKeyword: 'warn' }) // 'warn' | false

/* [postcss-cascade-layers]: handling "revert-layer" is unsupported by this plugin and will cause style differences between browser versions. */
@layer {
	.foo {
		color: revert-layer;
	}
}

The onConditionalRulesChangingLayerOrder option enables warnings if layers are declared in multiple different orders in conditional rules. Transforming these layers correctly for older browsers is not possible in this plugin.

Defaults to warn

<exportName>({ onConditionalRulesChangingLayerOrder: 'warn' }) // 'warn' | false

/* [postcss-cascade-layers]: handling different layer orders in conditional rules is unsupported by this plugin and will cause style differences between browser versions. */
@media (min-width: 10px) {
	@layer B {
		.foo {
			color: red;
		}
	}
}

@layer A {
	.foo {
		color: pink;
	}
}

@layer B {
	.foo {
		color: red;
	}
}

The @import at-rule can also be used with cascade layers, specifically to create a new layer like so:

@import 'theme.css' layer(utilities);

If your CSS uses @import with layers, you will also need the [postcss-import] plugin. This plugin alone will not handle the @import at-rule.

This plugin will warn you when it detects that [postcss-import] did not transform@import at-rules.

<exportName>({ onImportLayerRule: 'warn' }) // 'warn' | false

The contributors to this plugin were [Olu Niyi-Awosusi] and [Sana Javed] from [Oddbird] and Romain Menke.