cascade-layers : add support for scope and container at rules

plugins/postcss-cascade-layers/.tape.mjs

@@ -9,6 +9,12 @@ postcssTape(plugin)({
 	atrules: {
 		message: "supports @keyframes usage",
 	},
+	'container-scope--reference': {
+		message: "Layered styles without @container or @scope but with the same layers and layer order as the @container/@scope test",
+	},
+	'container-scope': {
+		message: "Layered styles with @container or @scope, these at rules are expected not to have any effect on the final order or specificity",
+	},
 	nested: {
 		message: "supports nested layer usage",
 	},

plugins/postcss-cascade-layers/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changes to PostCSS Cascade Layers
 
+### Unreleased
+
+- Add support for `@scope` and `@container` as parent rules for `@layer`
+
 ### 1.0.6 (September 7, 2022)
 
 - Fix broken `@keyframes` in `@layer`.

plugins/postcss-cascade-layers/src/is-processable-layer-rule.ts

@@ -1,6 +1,6 @@
 import type { AtRule, ChildNode, Container, Document } from 'postcss';
 
-const allowedParentAtRules = new Set(['layer', 'supports', 'media']);
+const allowedParentAtRules = new Set(['layer', 'supports', 'media', 'container', 'scope']);
 
 export function isProcessableLayerRule(atRule: AtRule): boolean {
 	if (atRule.type !== 'atrule') {

plugins/postcss-cascade-layers/test/atrules.css

@@ -5,13 +5,43 @@
 		from { translate: 0; }
 		to { translate: -100% 0; }
 	}
+
+	.foo {
+		order: 1.1;
+	}
+
+	@container (min-width: 700px) {
+		.foo {
+			order: 1.2;
+		}
+
+		@keyframes slide-left {
+			from { translate: 700; }
+			to { translate: -100% 0; }
+		}
+	}
 }
 
 @layer framework {
 	@keyframes slide-left {
 		from { margin-left: 0; }
 		to { margin-left: -100%; }
 	}
+
+	.foo {
+		order: 2.1;
+	}
+
+	@container (min-width: 700px) {
+		.foo {
+			order: 2.2;
+		}
+
+		@keyframes slide-left {
+			from { margin-left: 700; }
+			to { margin-left: -100%; }
+		}
+	}
 }
 
 #target {

plugins/postcss-cascade-layers/test/atrules.expect.css

@@ -2,17 +2,51 @@
 	@keyframes slide-left {
 		from { margin-left: 0; }
 		to { margin-left: -100%; }
-	}@keyframes slide-left {
+	}
+
+	@container (min-width: 700px) {
+
+		@keyframes slide-left {
+			from { margin-left: 700; }
+			to { margin-left: -100%; }
+		}
+	}
+
+@keyframes slide-left {
 		from { translate: 0; }
 		to { translate: -100% 0; }
 	}
 
+@container (min-width: 700px) {
+
+		@keyframes slide-left {
+			from { translate: 700; }
+			to { translate: -100% 0; }
+		}
+	}
+
 @keyframes anim {
 		from { background-color: red; }
 	}
 
 @counter-style custom-counter-style {
 		system: extends three;
+	}.foo:not(#\#):not(#\#) {
+		order: 1.1;
+	}@container (min-width: 700px) {
+		.foo:not(#\#):not(#\#) {
+			order: 1.2;
+		}
+	}
+
+.foo {
+		order: 2.1;
+	}
+
+@container (min-width: 700px) {
+		.foo {
+			order: 2.2;
+		}
 	}
 
 #target:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {

plugins/postcss-cascade-layers/test/container-scope--reference.css

@@ -0,0 +1,41 @@
+@keyframes slide-left {
+	from { margin-left: 0; }
+	to { margin-left: -100%; }
+}
+
+@layer A {
+	#target {
+		color: red;
+	}
+}
+
+@layer {
+	#foo #bar target::before:hover {
+		color: green;
+	}
+}
+
+@layer B {
+	#target {
+		color: orange;
+	}
+}
+
+@layer B {
+	#target {
+		color: yellow;
+	}
+
+	@keyframes slide-left {
+		from { translate: 0; }
+		to { translate: -100% 0; }
+	}
+}
+
+target {
+	color: purple;
+}
+
+target:before {
+	color: pink;
+}

plugins/postcss-cascade-layers/test/container-scope--reference.expect.css

@@ -0,0 +1,33 @@
+
+
+	@keyframes slide-left {
+		from { translate: 0; }
+		to { translate: -100% 0; }
+	}@keyframes slide-left {
+	from { margin-left: 0; }
+	to { margin-left: -100%; }
+}
+
+#target {
+		color: red;
+	}
+
+#foo:not(#\#):not(#\#):not(#\#) #bar target::before:hover {
+		color: green;
+	}
+
+#target:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+		color: orange;
+	}
+
+#target:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+		color: yellow;
+	}
+
+target:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+	color: purple;
+}
+
+target:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):before {
+	color: pink;
+}

plugins/postcss-cascade-layers/test/container-scope.css

@@ -0,0 +1,47 @@
+@scope (.media) to (.content) {
+	@keyframes slide-left {
+		from { margin-left: 0; }
+		to { margin-left: -100%; }
+	}
+}
+
+@layer A {
+	#target {
+		color: red;
+	}
+}
+
+@container (min-width: 700px) {
+	@layer {
+		#foo #bar target::before:hover {
+			color: green;
+		}
+	}
+}
+
+@layer B {
+	#target {
+		color: orange;
+	}
+}
+
+@scope (.media) to (.content) {
+	@layer B {
+		#target {
+			color: yellow;
+		}
+
+		@keyframes slide-left {
+			from { translate: 0; }
+			to { translate: -100% 0; }
+		}
+	}
+}
+
+target {
+	color: purple;
+}
+
+target:before {
+	color: pink;
+}

plugins/postcss-cascade-layers/test/container-scope.expect.css

@@ -0,0 +1,42 @@
+
+
+@scope (.media) to (.content) {
+
+		@keyframes slide-left {
+			from { translate: 0; }
+			to { translate: -100% 0; }
+		}
+}@scope (.media) to (.content) {
+	@keyframes slide-left {
+		from { margin-left: 0; }
+		to { margin-left: -100%; }
+	}
+}
+
+#target {
+		color: red;
+	}
+
+@container (min-width: 700px) {
+		#foo:not(#\#):not(#\#):not(#\#) #bar target::before:hover {
+			color: green;
+		}
+}
+
+#target:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+		color: orange;
+	}
+
+@scope (.media) to (.content) {
+		#target:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+			color: yellow;
+		}
+}
+
+target:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+	color: purple;
+}
+
+target:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):before {
+	color: pink;
+}