fix selector order in pseudo :is (#278)

romainmenke · web-flow · commit c07af0ab6ec9 · 2022-02-26T18:18:47.000+01:00
* fix selector order in pseudo is

* fix
diff --git a/plugins/postcss-is-pseudo-class/.tape.mjs b/plugins/postcss-is-pseudo-class/.tape.mjs
@@ -19,7 +19,7 @@ postcssTape(plugin)({
 	},
 	'basic:oncomplex:warning': {
 		message: "supports basic usage with { onComplexSelector: 'warning' }",
-		warnings: 11,
+		warnings: 10,
 		options: {
 			onComplexSelector: 'warning'
 		}
diff --git a/plugins/postcss-is-pseudo-class/CHANGELOG.md b/plugins/postcss-is-pseudo-class/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changes to PostCSS Is Pseudo Class
 
+### Unreleased (patch)
+
+- Preserve selector order as much as possible. Fixes issues where pseudo elements `::before` were moved.
+
 ### 2.0.0 (January 31, 2022)
 
 - Remove `skip` flag in `onComplexSelectors` option.
diff --git a/plugins/postcss-is-pseudo-class/src/split-selectors/compound-selector-order.ts b/plugins/postcss-is-pseudo-class/src/split-selectors/compound-selector-order.ts
@@ -39,10 +39,7 @@ export function sortCompoundSelector(node) {
 	if (!node || !node.nodes) {
 		return;
 	}
-	// compound selectors with nesting can be written with tag selectors as later parts.
-	// for example : `&h1`
-	//
-	// simply concating with parent selectors can lead to :
+	// simply concatenating with selectors can lead to :
 	// `.fooh1`
 	//
 	// applying a sort where tag selectors are first will result in :
@@ -92,14 +89,6 @@ export function sortCompoundSelector(node) {
 		}
 
 		if (a.type === b.type) {
-			if (a.value < b.value) {
-				return -1;
-			}
-
-			if (a.value > b.value) {
-				return 1;
-			}
-
 			return 0;
 		}
 
diff --git a/plugins/postcss-is-pseudo-class/test/basic.css b/plugins/postcss-is-pseudo-class/test/basic.css
@@ -93,3 +93,11 @@ foo[baz=":is(.some, .other)"], .ok {
 .invalid-is:is {
 	order: 24;
 }
+
+:is(a, button):is(:hover::before, :focus) {
+	order: 25;
+}
+
+:is(a, button):is(:hover, :focus)::before {
+	order: 26;
+}
diff --git a/plugins/postcss-is-pseudo-class/test/basic.does-not-exist.expect.css b/plugins/postcss-is-pseudo-class/test/basic.does-not-exist.expect.css
@@ -214,7 +214,7 @@ foo[baz=":is(.some, .other)"], .ok {
 	order: 14;
 }
 
-:focus:is(.alpha ~ .delta) > .beta + .beta {
+:is(.alpha ~ .delta):focus > .beta + .beta {
 	order: 15;
 }
 
@@ -266,7 +266,7 @@ foo[baz=":is(.some, .other)"], .ok {
 	order: 19;
 }
 
-.alpha.pre:is(.one > .two) {
+.pre.alpha:is(.one > .two) {
 	order: 20;
 }
 
@@ -293,3 +293,35 @@ a:not(.something-random) {
 .invalid-is:is {
 	order: 24;
 }
+
+a:hover::before {
+	order: 25;
+}
+
+a:focus:not(something-random) {
+	order: 25;
+}
+
+button:hover::before {
+	order: 25;
+}
+
+button:focus:not(something-random) {
+	order: 25;
+}
+
+a:hover::before {
+	order: 26;
+}
+
+a:focus::before {
+	order: 26;
+}
+
+button:hover::before {
+	order: 26;
+}
+
+button:focus::before {
+	order: 26;
+}
diff --git a/plugins/postcss-is-pseudo-class/test/basic.expect.css b/plugins/postcss-is-pseudo-class/test/basic.expect.css
@@ -214,7 +214,7 @@ foo[baz=":is(.some, .other)"], .ok {
 	order: 14;
 }
 
-:focus:is(.alpha ~ .delta) > .beta + .beta {
+:is(.alpha ~ .delta):focus > .beta + .beta {
 	order: 15;
 }
 
@@ -266,7 +266,7 @@ foo[baz=":is(.some, .other)"], .ok {
 	order: 19;
 }
 
-.alpha.pre:is(.one > .two) {
+.pre.alpha:is(.one > .two) {
 	order: 20;
 }
 
@@ -293,3 +293,35 @@ a:not(.does-not-exist) {
 .invalid-is:is {
 	order: 24;
 }
+
+a:hover::before {
+	order: 25;
+}
+
+a:focus:not(does-not-exist) {
+	order: 25;
+}
+
+button:hover::before {
+	order: 25;
+}
+
+button:focus:not(does-not-exist) {
+	order: 25;
+}
+
+a:hover::before {
+	order: 26;
+}
+
+a:focus::before {
+	order: 26;
+}
+
+button:hover::before {
+	order: 26;
+}
+
+button:focus::before {
+	order: 26;
+}
diff --git a/plugins/postcss-is-pseudo-class/test/basic.oncomplex.warning.expect.css b/plugins/postcss-is-pseudo-class/test/basic.oncomplex.warning.expect.css
@@ -214,7 +214,7 @@ foo[baz=":is(.some, .other)"], .ok {
 	order: 14;
 }
 
-:focus:is(.alpha ~ .delta) > .beta + .beta {
+:is(.alpha ~ .delta):focus > .beta + .beta {
 	order: 15;
 }
 
@@ -266,7 +266,7 @@ foo[baz=":is(.some, .other)"], .ok {
 	order: 19;
 }
 
-.alpha.pre:is(.one > .two) {
+.pre.alpha:is(.one > .two) {
 	order: 20;
 }
 
@@ -293,3 +293,35 @@ a:not(.does-not-exist) {
 .invalid-is:is {
 	order: 24;
 }
+
+a:hover::before {
+	order: 25;
+}
+
+a:focus:not(does-not-exist) {
+	order: 25;
+}
+
+button:hover::before {
+	order: 25;
+}
+
+button:focus:not(does-not-exist) {
+	order: 25;
+}
+
+a:hover::before {
+	order: 26;
+}
+
+a:focus::before {
+	order: 26;
+}
+
+button:hover::before {
+	order: 26;
+}
+
+button:focus::before {
+	order: 26;
+}
diff --git a/plugins/postcss-is-pseudo-class/test/basic.preserve.expect.css b/plugins/postcss-is-pseudo-class/test/basic.preserve.expect.css
@@ -254,7 +254,7 @@ foo[baz=":is(.some, .other)"], .ok {
 	order: 14;
 }
 
-:focus:is(.alpha ~ .delta) > .beta + .beta {
+:is(.alpha ~ .delta):focus > .beta + .beta {
 	order: 15;
 }
 
@@ -322,10 +322,6 @@ foo[baz=":is(.some, .other)"], .ok {
 	order: 19;
 }
 
-.alpha.pre:is(.one > .two) {
-	order: 20;
-}
-
 .pre.alpha:is(.one > .two) {
 	order: 20;
 }
@@ -361,3 +357,43 @@ a:not(.does-not-exist) {
 .invalid-is:is {
 	order: 24;
 }
+
+a:hover::before {
+	order: 25;
+}
+
+a:focus:not(does-not-exist) {
+	order: 25;
+}
+
+button:hover::before {
+	order: 25;
+}
+
+button:focus:not(does-not-exist) {
+	order: 25;
+}
+
+:is(a, button):is(:hover::before, :focus) {
+	order: 25;
+}
+
+a:hover::before {
+	order: 26;
+}
+
+a:focus::before {
+	order: 26;
+}
+
+button:hover::before {
+	order: 26;
+}
+
+button:focus::before {
+	order: 26;
+}
+
+:is(a, button):is(:hover, :focus)::before {
+	order: 26;
+}
diff --git a/plugins/postcss-is-pseudo-class/test/generated-selector-class-function-cases.expect.css b/plugins/postcss-is-pseudo-class/test/generated-selector-class-function-cases.expect.css
@@ -2,6 +2,10 @@
 	order: 0;
 }
 
+.some.other {
+	order: 0;
+}
+
 .other.some {
 	order: 0;
 }
@@ -18,6 +22,10 @@
 	order: 1;
 }
 
+.some.other {
+	order: 1;
+}
+
 .other.some {
 	order: 1;
 }
@@ -34,6 +42,10 @@
 	order: 2;
 }
 
+.some.other {
+	order: 2;
+}
+
 .other.some {
 	order: 2;
 }
@@ -890,11 +902,11 @@ button {
 	order: 59;
 }
 
-.some.🧑🏾‍🎤 {
+.🧑🏾‍🎤.some {
 	order: 60;
 }
 
-.other.🧑🏾‍🎤 {
+.🧑🏾‍🎤.other {
 	order: 60;
 }
 
@@ -1230,11 +1242,11 @@ button {
 	order: 90;
 }
 
-.foo.some {
+.some.foo {
 	order: 91;
 }
 
-.foo.other {
+.other.foo {
 	order: 91;
 }
 
diff --git a/plugins/postcss-nesting/src/lib/merge-selectors/compound-selector-order.js b/plugins/postcss-nesting/src/lib/merge-selectors/compound-selector-order.js
@@ -50,10 +50,7 @@ export function sortCompoundSelectorsInsideComplexSelector(node, wrapWithIsPseud
 }
 
 export function sortCompoundSelector(node) {
-	// compound selectors with nesting can be written with tag selectors as later parts.
-	// for example : `&h1`
-	//
-	// simply concating with parent selectors can lead to :
+	// simply concatenating with selectors can lead to :
 	// `.fooh1`
 	//
 	// applying a sort where tag selectors are first will result in :
diff --git a/plugins/postcss-nesting/test/basic.css b/plugins/postcss-nesting/test/basic.css
@@ -109,3 +109,9 @@ a {
 		}
 	}
 }
+
+.a:hover, .b:focus {
+	&::before, &::after {
+		order: 51;
+	}
+}
diff --git a/plugins/postcss-nesting/test/basic.expect.css b/plugins/postcss-nesting/test/basic.expect.css
@@ -124,3 +124,7 @@ a b[a="a&b"] {
 .a.c:before, .b.c:before, .a.d:before, .b.d:before {
 			order: 41;
 		}
+
+.a:hover::before, .b:focus::before, .a:hover::after, .b:focus::after {
+		order: 51;
+	}
diff --git a/plugins/postcss-nesting/test/basic.no-is-pseudo-selector.expect.css b/plugins/postcss-nesting/test/basic.no-is-pseudo-selector.expect.css
@@ -124,3 +124,7 @@ a b[a="a&b"] {
 .a.c:before, .b.c:before, .a.d:before, .b.d:before {
 			order: 41;
 		}
+
+.a:hover::before, .b:focus::before, .a:hover::after, .b:focus::after {
+		order: 51;
+	}
diff --git a/plugins/postcss-pseudo-class-any-link/src/compound-selector-order.js b/plugins/postcss-pseudo-class-any-link/src/compound-selector-order.js
@@ -39,10 +39,7 @@ export function sortCompoundSelector(node) {
 	if (!node || !node.nodes) {
 		return;
 	}
-	// compound selectors with nesting can be written with tag selectors as later parts.
-	// for example : `&h1`
-	//
-	// simply concating with parent selectors can lead to :
+	// simply concatenating with selectors can lead to :
 	// `.fooh1`
 	//
 	// applying a sort where tag selectors are first will result in :

Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,7 @@ postcssTape(plugin)({`
`19`	`19`	`},`
`20`	`20`	`'basic:oncomplex:warning': {`
`21`	`21`	`message: "supports basic usage with { onComplexSelector: 'warning' }",`
`22`		`- warnings: 11,`
	`22`	`+ warnings: 10,`
`23`	`23`	`options: {`
`24`	`24`	`onComplexSelector: 'warning'`
`25`	`25`	`}`
Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,10 @@`
`2`	`2`	`order: 0;`
`3`	`3`	`}`
`4`	`4`
	`5`	`+.some.other {`
	`6`	`+ order: 0;`
	`7`	`+}`
	`8`	`+`
`5`	`9`	`.other.some {`
`6`	`10`	`order: 0;`
`7`	`11`	`}`
`@@ -18,6 +22,10 @@`
`18`	`22`	`order: 1;`
`19`	`23`	`}`
`20`	`24`
	`25`	`+.some.other {`
	`26`	`+ order: 1;`
	`27`	`+}`
	`28`	`+`
`21`	`29`	`.other.some {`
`22`	`30`	`order: 1;`
`23`	`31`	`}`
`@@ -34,6 +42,10 @@`
`34`	`42`	`order: 2;`
`35`	`43`	`}`
`36`	`44`
	`45`	`+.some.other {`
	`46`	`+ order: 2;`
	`47`	`+}`
	`48`	`+`
`37`	`49`	`.other.some {`
`38`	`50`	`order: 2;`
`39`	`51`	`}`
`@@ -890,11 +902,11 @@ button {`
`890`	`902`	`order: 59;`
`891`	`903`	`}`
`892`	`904`
`893`		`-.some.🧑🏾‍🎤 {`
	`905`	`+.🧑🏾‍🎤.some {`
`894`	`906`	`order: 60;`
`895`	`907`	`}`
`896`	`908`
`897`		`-.other.🧑🏾‍🎤 {`
	`909`	`+.🧑🏾‍🎤.other {`
`898`	`910`	`order: 60;`
`899`	`911`	`}`
`900`	`912`
`@@ -1230,11 +1242,11 @@ button {`
`1230`	`1242`	`order: 90;`
`1231`	`1243`	`}`
`1232`	`1244`
`1233`		`-.foo.some {`
	`1245`	`+.some.foo {`
`1234`	`1246`	`order: 91;`
`1235`	`1247`	`}`
`1236`	`1248`
`1237`		`-.foo.other {`
	`1249`	`+.other.foo {`
`1238`	`1250`	`order: 91;`
`1239`	`1251`	`}`
`1240`	`1252`
Original file line number	Diff line number	Diff line change
`@@ -109,3 +109,9 @@ a {`
`109`	`109`	`}`
`110`	`110`	`}`
`111`	`111`	`}`
	`112`	`+`
	`113`	`+.a:hover, .b:focus {`
	`114`	`+ &::before, &::after {`
	`115`	`+ order: 51;`
	`116`	`+ }`
	`117`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -124,3 +124,7 @@ a b[a="a&b"] {`
`124`	`124`	`.a.c:before, .b.c:before, .a.d:before, .b.d:before {`
`125`	`125`	`order: 41;`
`126`	`126`	`}`
	`127`	`+`
	`128`	`+.a:hover::before, .b:focus::before, .a:hover::after, .b:focus::after {`
	`129`	`+ order: 51;`
	`130`	`+ }`