postcss-preset-env : add cascade layers (#374)

* preset-env : add cascade layers

* cleanup

* fix

* add more tests and update docs

* gen docs

* wording

Author: romainmenke

package-lock.json

@@ -160,6 +160,21 @@ postcssTape(plugin)({
 			browsers: '> 0%'
 		},
 	},
+	'layers-basic': {
+		message: 'supports layers usage',
+		options: {
+			stage: 0,
+			browsers: '> 0%'
+		},
+	},
+	'layers-basic:preserve:true': {
+		message: 'supports layers usage with { preserve: true }',
+		options: {
+			preserve: true,
+			stage: 0,
+			browsers: '> 0%'
+		},
+	},
 	'client-side-polyfills:stage-1': {
 		message: 'stable client side polyfill behavior',
 		options: {

plugin-packs/postcss-preset-env/.tape.mjs

@@ -1,5 +1,9 @@
 # Changes to PostCSS Preset Env
 
+### Unreleased
+
+- Added `@csstools/postcss-cascade-layers` <br/> [Check the plugin README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-cascade-layers#readme) for usage details.
+
 ### 7.5.0 (May 2, 2022)
 
 - Added `@csstools/postcss-unset-value` <br/> [Check the plugin README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-unset-value#readme) for usage details.

plugin-packs/postcss-preset-env/CHANGELOG.md

@@ -27,6 +27,7 @@
 		"dist"
 	],
 	"dependencies": {
+		"@csstools/postcss-cascade-layers": "^1.0.0",
 		"@csstools/postcss-color-function": "^1.1.0",
 		"@csstools/postcss-font-format-keywords": "^1.0.0",
 		"@csstools/postcss-hwb-function": "^1.0.0",

plugin-packs/postcss-preset-env/package.json

@@ -204,5 +204,10 @@
 		"packageName": "@csstools/postcss-unset-value",
 		"id": "unset-value",
 		"importName": "postcssUnsetValue"
+	},
+	{
+		"packageName": "@csstools/postcss-cascade-layers",
+		"id": "cascade-layers",
+		"importName": "postcssCascadeLayers"
 	}
 ]

plugin-packs/postcss-preset-env/scripts/plugins-data.json

@@ -32,4 +32,5 @@ export default [
 	'overflow-wrap-property',
 	'place-properties',
 	'system-ui-font-family',
+	'cascade-layers',
 ];

plugin-packs/postcss-preset-env/src/lib/ids-by-execution-order.mjs

@@ -2,6 +2,7 @@ import postcssInitial from 'postcss-initial';
 import postcssPseudoClassAnyLink from 'postcss-pseudo-class-any-link';
 import postcssBlankPseudo from 'css-blank-pseudo';
 import postcssPageBreak from 'postcss-page-break';
+import postcssCascadeLayers from '@csstools/postcss-cascade-layers';
 import postcssAttributeCaseInsensitive from 'postcss-attribute-case-insensitive';
 import postcssClamp from 'postcss-clamp';
 import postcssColorFunction from '@csstools/postcss-color-function';
@@ -47,6 +48,7 @@ export const pluginsById = new Map(
 		['any-link-pseudo-class', postcssPseudoClassAnyLink],
 		['blank-pseudo-class', postcssBlankPseudo],
 		['break-properties', postcssPageBreak],
+		['cascade-layers', postcssCascadeLayers],
 		['case-insensitive-attributes', postcssAttributeCaseInsensitive],
 		['clamp', postcssClamp],
 		['color-function', postcssColorFunction],

plugin-packs/postcss-preset-env/src/plugins/plugins-by-id.mjs

@@ -205,4 +205,9 @@ export default [
 		'id': 'unset-value',
 		'importName': 'postcssUnsetValue',
 	},
+	{
+		'packageName': '@csstools/postcss-cascade-layers',
+		'id': 'cascade-layers',
+		'importName': 'postcssCascadeLayers',
+	},
 ];