cascade layers : use only simple selectors (#387)

romainmenke · web-flow · commit edc0fe36b428 · 2022-05-20T08:06:18.000+02:00
* cascade layers : use only simpel selectors

* update test results
diff --git a/plugin-packs/postcss-preset-env/test/layers-basic.css b/plugin-packs/postcss-preset-env/test/layers-basic.css
@@ -38,7 +38,7 @@
 			order: 5;
 
 			@layer D {
-				is-layer: C.D;
+				is-layer: C_D;
 				order: 5.1;
 			}
 		}
diff --git a/plugin-packs/postcss-preset-env/test/layers-basic.expect.css b/plugin-packs/postcss-preset-env/test/layers-basic.expect.css
diff --git a/plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.expect.css b/plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.expect.css
diff --git a/plugins/postcss-cascade-layers/CHANGELOG.md b/plugins/postcss-cascade-layers/CHANGELOG.md
@@ -1,9 +1,13 @@
 # Changes to PostCSS Cascade Layers
 
+### Unreleased
+
+- Use only simple `:not(#\#)` selectors to adjust specificity.
+
 ### 1.0.1 (May 17, 2022)
 
- - Process CSS after most other plugins to ensure correct analysis and transformation of sugary CSS.
- - Fix selector order with `:before` and other pseudo elements.
+- Process CSS after most other plugins to ensure correct analysis and transformation of sugary CSS.
+- Fix selector order with `:before` and other pseudo elements.
 
 ### 1.0.0 (May 12, 2022)
 
diff --git a/plugins/postcss-cascade-layers/README.md b/plugins/postcss-cascade-layers/README.md
@@ -46,8 +46,8 @@ for `@layer A, B, C`:
 | layer | specificity adjustment | selector |
 | ------ | ----------- | --- |
 | `A` | 0 | N/A |
-| `B` | 3 | `:not(#/##/##/#)` |
-| `C` | 6 | `:not(#/##/##/##/##/##/#)` |
+| `B` | 3 | `:not(#/#):not(#/#):not(#/#)` |
+| `C` | 6 | `:not(#/#):not(#/#):not(#/#):not(#/#):not(#/#):not(#/#)` |
 
 This approach lets more important (later) layers always override less important (earlier) layers.<br>
 And layers have enough room internally so that each selector works and overrides as expected.
diff --git a/plugins/postcss-cascade-layers/docs/README.md b/plugins/postcss-cascade-layers/docs/README.md
@@ -37,8 +37,8 @@ for `@layer A, B, C`:
 | layer | specificity adjustment | selector |
 | ------ | ----------- | --- |
 | `A` | 0 | N/A |
-| `B` | 3 | `:not(#/##/##/#)` |
-| `C` | 6 | `:not(#/##/##/##/##/##/#)` |
+| `B` | 3 | `:not(#/#):not(#/#):not(#/#)` |
+| `C` | 6 | `:not(#/#):not(#/#):not(#/#):not(#/#):not(#/#):not(#/#)` |
 
 This approach lets more important (later) layers always override less important (earlier) layers.<br>
 And layers have enough room internally so that each selector works and overrides as expected.
diff --git a/plugins/postcss-cascade-layers/src/adjust-selector-specificity.ts b/plugins/postcss-cascade-layers/src/adjust-selector-specificity.ts
@@ -20,8 +20,8 @@ function generateNot(specificity: number) {
 
 	let list = '';
 	for (let i = 0; i < specificity; i++) {
-		list += '#\\#'; // something short but still very uncommon
+		list += ':not(#\\#)'; // something short but still very uncommon
 	}
 
-	return `:not(${list})`;
+	return list;
 }
diff --git a/plugins/postcss-cascade-layers/test/anon-layer.expect.css b/plugins/postcss-cascade-layers/test/anon-layer.expect.css
@@ -7,14 +7,14 @@ target:not(#\#) {
 		color: orange;
 	}
 
-target:not(#\##\#) {
+target:not(#\#):not(#\#) {
 		color: yellow;
 	}
 
-target:not(#\##\##\#) {
+target:not(#\#):not(#\#):not(#\#) {
 		color: green;
 	}
 
-target:not(#\##\##\##\#) {
+target:not(#\#):not(#\#):not(#\#):not(#\#) {
 	color: purple;
 }
diff --git a/plugins/postcss-cascade-layers/test/atrules.expect.css b/plugins/postcss-cascade-layers/test/atrules.expect.css
@@ -15,15 +15,15 @@
 		system: extends three;
 	}
 
-#target:not(#\##\##\##\##\##\##\##\#) {
+#target:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
 	animation: anim 1s paused;
 }
 
 @keyframes anim {
 	from { background-color: green; }
 }
 
-#target:not(#\##\##\##\##\##\##\##\#)::before {
+#target:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before {
 	content: counter(dont-care, custom-counter-style);
 }
 
diff --git a/plugins/postcss-cascade-layers/test/basic.expect.css b/plugins/postcss-cascade-layers/test/basic.expect.css
@@ -3,14 +3,14 @@
 		color: red;
 	}
 
-#foo #bar target:not(#\##\##\#)::before {
+#foo #bar target:not(#\#):not(#\#):not(#\#)::before {
 		color: green;
 	}
 
-target:not(#\##\##\##\##\##\#) {
+target:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
 	color: purple;
 }
 
-target:not(#\##\##\##\##\##\#):before {
+target:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):before {
 	color: pink;
 }
diff --git a/plugins/postcss-cascade-layers/test/important.expect.css b/plugins/postcss-cascade-layers/test/important.expect.css
@@ -15,15 +15,15 @@
 		background-color: blue;
 	}
 
-.foo:not(#\##\#) {
+.foo:not(#\#):not(#\#) {
 		color: pink !important;
 	}
 
 .foo {
 		background-color: pink;
 	}
 
-.bar:not(#\##\#) {
+.bar:not(#\#):not(#\#) {
 		color: green !important;
 	}
 
@@ -35,14 +35,14 @@
 	color: orange !important;
 }
 
-.foo:not(#\##\#) {
+.foo:not(#\#):not(#\#) {
 	background-color: orange;
 }
 
 .bar {
 	color: purple !important;
 }
 
-.bar:not(#\##\#) {
+.bar:not(#\#):not(#\#) {
 	background-color: green;
 }
diff --git a/plugins/postcss-cascade-layers/test/nested-complex.expect.css b/plugins/postcss-cascade-layers/test/nested-complex.expect.css
@@ -16,19 +16,19 @@
 }
 
 @media screen {
-	target:not(#\##\##\##\##\##\##\#) {
+	target:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
 		layered: no;
 		order: 3;
 	}
 }
 
 @media screen {
-		target:not(#\##\##\##\##\#) {
+		target:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
 			order: 6;
 		}
 
 		@media screen {
-			target:not(#\##\##\##\##\#) {
+			target:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
 				order: 7;
 			}
 		}
@@ -37,12 +37,12 @@
 @media screen {
 
 		@media screen {
-				target:not(#\##\##\#) {
+				target:not(#\#):not(#\#):not(#\#) {
 					order: 8;
 				}
 
 				@media screen {
-					target:not(#\##\##\#) {
+					target:not(#\#):not(#\#):not(#\#) {
 						order: 9;
 					}
 				}
@@ -54,15 +54,15 @@
 		@media screen {
 
 				@media screen {
-						target:not(#\##\#) {
+						target:not(#\#):not(#\#) {
 							order: 10;
 						}
 				}
 		}
 }
 
 @media screen {
-	target:not(#\##\##\##\##\##\##\#) {
+	target:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
 		layered: no;
 		order: 5;
 	}
diff --git a/plugins/postcss-cascade-layers/test/nested.expect.css b/plugins/postcss-cascade-layers/test/nested.expect.css
@@ -28,31 +28,31 @@ i:not(#\#) {
 		color: red;
 	}
 
-target:not(#\##\##\#) {
+target:not(#\#):not(#\#):not(#\#) {
 			color: yellow;
 		}
 
-target:not(#\##\##\##\##\##\#) {
+target:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
 			color: yellow;
 		}
 
 @media (prefers-color-scheme: dark) {
-		h1:not(#\##\##\##\##\##\##\#) {
+		h1:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
 			color: red;
 			background: black;
 		}
 	}
 
 @media (prefers-color-scheme: dark) {
-			target:not(#\##\##\##\##\##\#) {
+			target:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
 				color: lime;
 			}
 	}
 
-target:not(#\##\##\##\##\##\##\##\#) {
+target:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
 			color: yellow;
 		}
 
-target:not(#\##\##\##\##\##\##\##\##\#) {
+target:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
 		color: red;
 	}
diff --git a/plugins/postcss-cascade-layers/test/specificity-buckets-a.expect.css b/plugins/postcss-cascade-layers/test/specificity-buckets-a.expect.css
@@ -1,11 +1,11 @@
-#foo:not(#\##\##\##\#) {
+#foo:not(#\#):not(#\#):not(#\#):not(#\#) {
 	bucket: 1;
 }
 
 #foo {
 		bucket: 2;
 	}
 
-#foo:not(#\##\#) {
+#foo:not(#\#):not(#\#) {
 		bucket: 3;
 	}
diff --git a/plugins/postcss-cascade-layers/test/specificity-buckets-b.expect.css b/plugins/postcss-cascade-layers/test/specificity-buckets-b.expect.css
@@ -1,4 +1,4 @@
-foo:not(#\##\##\##\##\##\##\##\#) {
+foo:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
 	bucket: 1;
 }
 
@@ -18,18 +18,18 @@ foo {
 		bucket: 2;
 	}
 
-foo:not(#\##\##\##\#) {
+foo:not(#\#):not(#\#):not(#\#):not(#\#) {
 		bucket: 3;
 	}
 
-#foo:not(#\##\##\##\#) {
+#foo:not(#\#):not(#\#):not(#\#):not(#\#) {
 		bucket: 3;
 	}
 
-#foo #fooz:not(#\##\##\##\#) {
+#foo #fooz:not(#\#):not(#\#):not(#\#):not(#\#) {
 		bucket: 3;
 	}
 
-#foo #fooz #foos:not(#\##\##\##\#) {
+#foo #fooz #foos:not(#\#):not(#\#):not(#\#):not(#\#) {
 		bucket: 3;
 	}
diff --git a/plugins/postcss-cascade-layers/test/unlayered-styles.expect.css b/plugins/postcss-cascade-layers/test/unlayered-styles.expect.css
@@ -7,14 +7,14 @@ target:not(#\#) {
 		color: green;
 	}
 
-a:not(#\##\#) {
+a:not(#\#):not(#\#) {
 	color: purple;
 }
 
-target:not(#\##\#) {
+target:not(#\#):not(#\#) {
   color: green;
 }
 
-span h1:not(#\##\#), span p:not(#\##\#) {
+span h1:not(#\#):not(#\#), span p:not(#\#):not(#\#) {
   color:red;
 }
diff --git a/plugins/postcss-cascade-layers/test/warnings.expect.css b/plugins/postcss-cascade-layers/test/warnings.expect.css
@@ -13,7 +13,7 @@
 		}
 }
 
-.foo:not(#\##\#) {
+.foo:not(#\#):not(#\#) {
 		color: pink;
 	}
 
diff --git a/plugins/postcss-cascade-layers/test/warnings.with-postcss-import.expect.css b/plugins/postcss-cascade-layers/test/warnings.with-postcss-import.expect.css
@@ -6,13 +6,13 @@
 		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(#\##\#) {
+		.foo:not(#\#):not(#\#) {
 			color: red;
 		}
 }
-.foo:not(#\##\##\#) {
+.foo:not(#\#):not(#\#):not(#\#) {
 		color: pink;
 	}
-.foo:not(#\##\#) {
+.foo:not(#\#):not(#\#) {
 		color: red;
 	}

Original file line number	Diff line number	Diff line change
`@@ -38,7 +38,7 @@`
`38`	`38`	`order: 5;`
`39`	`39`
`40`	`40`	`@layer D {`
`41`		`- is-layer: C.D;`
	`41`	`+ is-layer: C_D;`
`42`	`42`	`order: 5.1;`
`43`	`43`	`}`
`44`	`44`	`}`
Original file line number	Diff line number	Diff line change
`@@ -20,8 +20,8 @@ function generateNot(specificity: number) {`
`20`	`20`
`21`	`21`	`let list = '';`
`22`	`22`	`for (let i = 0; i < specificity; i++) {`
`23`		`- list += '#\\#'; // something short but still very uncommon`
	`23`	`+ list += ':not(#\\#)'; // something short but still very uncommon`
`24`	`24`	`}`
`25`	`25`
`26`		- return `:not(${list})`;
	`26`	`+ return list;`
`27`	`27`	`}`
Original file line number	Diff line number	Diff line change
`@@ -7,14 +7,14 @@ target:not(#\#) {`
`7`	`7`	`color: orange;`
`8`	`8`	`}`
`9`	`9`
`10`		`-target:not(#\##\#) {`
	`10`	`+target:not(#\#):not(#\#) {`
`11`	`11`	`color: yellow;`
`12`	`12`	`}`
`13`	`13`
`14`		`-target:not(#\##\##\#) {`
	`14`	`+target:not(#\#):not(#\#):not(#\#) {`
`15`	`15`	`color: green;`
`16`	`16`	`}`
`17`	`17`
`18`		`-target:not(#\##\##\##\#) {`
	`18`	`+target:not(#\#):not(#\#):not(#\#):not(#\#) {`
`19`	`19`	`color: purple;`
`20`	`20`	`}`
Original file line number	Diff line number	Diff line change
`@@ -15,15 +15,15 @@`
`15`	`15`	`system: extends three;`
`16`	`16`	`}`
`17`	`17`
`18`		`-#target:not(#\##\##\##\##\##\##\##\#) {`
	`18`	`+#target:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {`
`19`	`19`	`animation: anim 1s paused;`
`20`	`20`	`}`
`21`	`21`
`22`	`22`	`@keyframes anim {`
`23`	`23`	`from { background-color: green; }`
`24`	`24`	`}`
`25`	`25`
`26`		`-#target:not(#\##\##\##\##\##\##\##\#)::before {`
	`26`	`+#target:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before {`
`27`	`27`	`content: counter(dont-care, custom-counter-style);`
`28`	`28`	`}`
`29`	`29`
Original file line number	Diff line number	Diff line change
`@@ -3,14 +3,14 @@`
`3`	`3`	`color: red;`
`4`	`4`	`}`
`5`	`5`
`6`		`-#foo #bar target:not(#\##\##\#)::before {`
	`6`	`+#foo #bar target:not(#\#):not(#\#):not(#\#)::before {`
`7`	`7`	`color: green;`
`8`	`8`	`}`
`9`	`9`
`10`		`-target:not(#\##\##\##\##\##\#) {`
	`10`	`+target:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {`
`11`	`11`	`color: purple;`
`12`	`12`	`}`
`13`	`13`
`14`		`-target:not(#\##\##\##\##\##\#):before {`
	`14`	`+target:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):before {`
`15`	`15`	`color: pink;`
`16`	`16`	`}`
Original file line number	Diff line number	Diff line change
`@@ -16,19 +16,19 @@`
`16`	`16`	`}`
`17`	`17`
`18`	`18`	`@media screen {`
`19`		`- target:not(#\##\##\##\##\##\##\#) {`
	`19`	`+ target:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {`
`20`	`20`	`layered: no;`
`21`	`21`	`order: 3;`
`22`	`22`	`}`
`23`	`23`	`}`
`24`	`24`
`25`	`25`	`@media screen {`
`26`		`- target:not(#\##\##\##\##\#) {`
	`26`	`+ target:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {`
`27`	`27`	`order: 6;`
`28`	`28`	`}`
`29`	`29`
`30`	`30`	`@media screen {`
`31`		`- target:not(#\##\##\##\##\#) {`
	`31`	`+ target:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {`
`32`	`32`	`order: 7;`
`33`	`33`	`}`
`34`	`34`	`}`
`@@ -37,12 +37,12 @@`
`37`	`37`	`@media screen {`
`38`	`38`
`39`	`39`	`@media screen {`
`40`		`- target:not(#\##\##\#) {`
	`40`	`+ target:not(#\#):not(#\#):not(#\#) {`
`41`	`41`	`order: 8;`
`42`	`42`	`}`
`43`	`43`
`44`	`44`	`@media screen {`
`45`		`- target:not(#\##\##\#) {`
	`45`	`+ target:not(#\#):not(#\#):not(#\#) {`
`46`	`46`	`order: 9;`
`47`	`47`	`}`
`48`	`48`	`}`
`@@ -54,15 +54,15 @@`
`54`	`54`	`@media screen {`
`55`	`55`
`56`	`56`	`@media screen {`
`57`		`- target:not(#\##\#) {`
	`57`	`+ target:not(#\#):not(#\#) {`
`58`	`58`	`order: 10;`
`59`	`59`	`}`
`60`	`60`	`}`
`61`	`61`	`}`
`62`	`62`	`}`
`63`	`63`
`64`	`64`	`@media screen {`
`65`		`- target:not(#\##\##\##\##\##\##\#) {`
	`65`	`+ target:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {`
`66`	`66`	`layered: no;`
`67`	`67`	`order: 5;`
`68`	`68`	`}`
Original file line number	Diff line number	Diff line change
`@@ -28,31 +28,31 @@ i:not(#\#) {`
`28`	`28`	`color: red;`
`29`	`29`	`}`
`30`	`30`
`31`		`-target:not(#\##\##\#) {`
	`31`	`+target:not(#\#):not(#\#):not(#\#) {`
`32`	`32`	`color: yellow;`
`33`	`33`	`}`
`34`	`34`
`35`		`-target:not(#\##\##\##\##\##\#) {`
	`35`	`+target:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {`
`36`	`36`	`color: yellow;`
`37`	`37`	`}`
`38`	`38`
`39`	`39`	`@media (prefers-color-scheme: dark) {`
`40`		`- h1:not(#\##\##\##\##\##\##\#) {`
	`40`	`+ h1:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {`
`41`	`41`	`color: red;`
`42`	`42`	`background: black;`
`43`	`43`	`}`
`44`	`44`	`}`
`45`	`45`
`46`	`46`	`@media (prefers-color-scheme: dark) {`
`47`		`- target:not(#\##\##\##\##\##\#) {`
	`47`	`+ target:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {`
`48`	`48`	`color: lime;`
`49`	`49`	`}`
`50`	`50`	`}`
`51`	`51`
`52`		`-target:not(#\##\##\##\##\##\##\##\#) {`
	`52`	`+target:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {`
`53`	`53`	`color: yellow;`
`54`	`54`	`}`
`55`	`55`
`56`		`-target:not(#\##\##\##\##\##\##\##\##\#) {`
	`56`	`+target:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {`
`57`	`57`	`color: red;`
`58`	`58`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,11 +1,11 @@`
`1`		`-#foo:not(#\##\##\##\#) {`
	`1`	`+#foo:not(#\#):not(#\#):not(#\#):not(#\#) {`
`2`	`2`	`bucket: 1;`
`3`	`3`	`}`
`4`	`4`
`5`	`5`	`#foo {`
`6`	`6`	`bucket: 2;`
`7`	`7`	`}`
`8`	`8`
`9`		`-#foo:not(#\##\#) {`
	`9`	`+#foo:not(#\#):not(#\#) {`
`10`	`10`	`bucket: 3;`
`11`	`11`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-foo:not(#\##\##\##\##\##\##\##\#) {`
	`1`	`+foo:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {`
`2`	`2`	`bucket: 1;`
`3`	`3`	`}`
`4`	`4`
`@@ -18,18 +18,18 @@ foo {`
`18`	`18`	`bucket: 2;`
`19`	`19`	`}`
`20`	`20`
`21`		`-foo:not(#\##\##\##\#) {`
	`21`	`+foo:not(#\#):not(#\#):not(#\#):not(#\#) {`
`22`	`22`	`bucket: 3;`
`23`	`23`	`}`
`24`	`24`
`25`		`-#foo:not(#\##\##\##\#) {`
	`25`	`+#foo:not(#\#):not(#\#):not(#\#):not(#\#) {`
`26`	`26`	`bucket: 3;`
`27`	`27`	`}`
`28`	`28`
`29`		`-#foo #fooz:not(#\##\##\##\#) {`
	`29`	`+#foo #fooz:not(#\#):not(#\#):not(#\#):not(#\#) {`
`30`	`30`	`bucket: 3;`
`31`	`31`	`}`
`32`	`32`
`33`		`-#foo #fooz #foos:not(#\##\##\##\#) {`
	`33`	`+#foo #fooz #foos:not(#\#):not(#\#):not(#\#):not(#\#) {`
`34`	`34`	`bucket: 3;`
`35`	`35`	`}`
Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,7 @@`
`13`	`13`	`}`
`14`	`14`	`}`
`15`	`15`
`16`		`-.foo:not(#\##\#) {`
	`16`	`+.foo:not(#\#):not(#\#) {`
`17`	`17`	`color: pink;`
`18`	`18`	`}`
`19`	`19`