fix being unable to ignore warnings in postcss-cascade-layers (#1640)

Co-authored-by: Romain Menke <11521496+romainmenke@users.noreply.github.com>

Author: Fox32

plugins/postcss-cascade-layers/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changes to PostCSS Cascade Layers
 
+### Unreleased (patch)
+
+- Fix being unable to ignore all warning types simultaneously 
+
 ### 5.0.1
 
 _October 23, 2024_

plugins/postcss-cascade-layers/dist/index.cjs

@@ -29,32 +29,31 @@ const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
 
 			let hasAnyLayer = false;
 
-			if (options.onRevertLayerKeyword || options.onImportLayerRule) {
-				root.walk((node) => {
-					if (node.type === 'decl') {
-						if (IS_REVERT_LAYER_REGEX.test(node.value)) {
-							node.warn(result, 'handling "revert-layer" is unsupported by this plugin and will cause style differences between browser versions.');
-							return;
-						}
-
+			root.walk((node) => {
+				if (node.type === 'decl') {
+					if (options.onRevertLayerKeyword && IS_REVERT_LAYER_REGEX.test(node.value)) {
+						node.warn(result, 'handling "revert-layer" is unsupported by this plugin and will cause style differences between browser versions.');
 						return;
 					}
 
-					if (node.type === 'atrule') {
-						if (IS_IMPORT_REGEX.test(node.name) && HAS_LAYER_REGEX.test(node.params)) {
-							node.warn(result, 'To use @import with layers, the postcss-import plugin is also required. This plugin alone will not support using the @import at-rule.');
-							return;
-						}
+					return;
+				}
 
-						if (IS_LAYER_REGEX.test(node.name)) {
-							hasAnyLayer = true;
-							return;
-						}
+				if (node.type === 'atrule') {
+					if (options.onImportLayerRule && IS_IMPORT_REGEX.test(node.name) && HAS_LAYER_REGEX.test(node.params)) {
+						node.warn(result, 'To use @import with layers, the postcss-import plugin is also required. This plugin alone will not support using the @import at-rule.');
+						return;
+					}
 
+					if (IS_LAYER_REGEX.test(node.name)) {
+						hasAnyLayer = true;
 						return;
 					}
-				});
-			}
+
+					return;
+				}
+			});
+
 
 			if (!hasAnyLayer) {
 				return;

plugins/postcss-cascade-layers/dist/index.mjs

@@ -45,6 +45,15 @@ postcssTape(plugin)({
 	'invalid-rules': {
 		message: 'correctly handles invalid rules',
 	},
+	'warnings-ignored': {
+		message: 'correctly ignored warnings',
+		options: {
+			onRevertLayerKeyword: false,
+			onConditionalRulesChangingLayerOrder: false,
+			onImportLayerRule: false,
+		},
+		warnings: 0,
+	},
 	'warnings': {
 		message: 'correctly handles warnings',
 		options: {

plugins/postcss-cascade-layers/src/index.ts

@@ -0,0 +1,31 @@
+/* [postcss-cascade-layers]: To use the @import at-rule with layer, the postcss-import plugin is also required. This plugin alone will not support importing layers. */
+@import 'imports/theme.css' layer(theme);
+@import 'imports/theme-overrides.css' layer;
+
+/* [postcss-cascade-layers]: handling "revert-layer" is unsupported by this plugin and will cause style differences between browser versions. */
+@layer {
+	.foo {
+		color: revert-layer;
+	}
+}
+
+/* [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;
+	}
+}

plugins/postcss-cascade-layers/test/_tape.mjs

@@ -0,0 +1,23 @@
+/* [postcss-cascade-layers]: To use the @import at-rule with layer, the postcss-import plugin is also required. This plugin alone will not support importing layers. */
+@import 'imports/theme.css' layer(theme);
+@import 'imports/theme-overrides.css' layer;
+
+/* [postcss-cascade-layers]: handling "revert-layer" is unsupported by this plugin and will cause style differences between browser versions. */
+.foo {
+		color: revert-layer;
+	}
+
+/* [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) {
+		.foo:not(#\#) {
+			color: red;
+		}
+}
+
+.foo:not(#\#):not(#\#) {
+		color: pink;
+	}
+
+.foo:not(#\#) {
+		color: red;
+	}