improve pseudo element handling (#318)

romainmenke · web-flow · commit 6d2300fac4bf · 2022-04-04T07:11:20.000+02:00
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)
+
+- Improved : compound selector order with pseudo elements
+
 ### 2.0.1 (March 4, 2022)
 
 - Preserve selector order as much as possible. Fixes issues where pseudo elements `::before` were moved.
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
@@ -47,68 +47,38 @@ export function sortCompoundSelector(node) {
 
 	node.nodes.sort((a, b) => {
 		if (a.type === 'selector' && b.type === 'selector' && a.nodes.length && b.nodes.length) {
-			if (a.nodes[0].type === b.nodes[0].type) {
-				return 0;
-			}
-
-			if (selectorTypeOrder[a.nodes[0].type] < selectorTypeOrder[b.nodes[0].type]) {
-				return -1;
-			}
-
-			if (selectorTypeOrder[a.nodes[0].type] > selectorTypeOrder[b.nodes[0].type]) {
-				return 1;
-			}
+			return selectorTypeOrder(a.nodes[0].value, a.nodes[0].type) - selectorTypeOrder(b.nodes[0].value, b.nodes[0].type);
 		}
 
 		if (a.type === 'selector' && a.nodes.length) {
-			if (a.nodes[0].type === b.type) {
-				return 0;
-			}
-
-			if (selectorTypeOrder[a.nodes[0].type] < selectorTypeOrder[b.type]) {
-				return -1;
-			}
-
-			if (selectorTypeOrder[a.nodes[0].type] > selectorTypeOrder[b.type]) {
-				return 1;
-			}
+			return selectorTypeOrder(a.nodes[0].value, a.nodes[0].type) - selectorTypeOrder(b.value, b.type);
 		}
 
 		if (b.type === 'selector' && b.nodes.length) {
-			if (a.type === b.nodes[0].type) {
-				return 0;
-			}
-
-			if (selectorTypeOrder[a.type] < selectorTypeOrder[b.nodes[0].type]) {
-				return -1;
-			}
-
-			if (selectorTypeOrder[a.type] > selectorTypeOrder[b.nodes[0].type]) {
-				return 1;
-			}
-		}
-
-		if (a.type === b.type) {
-			return 0;
+			return selectorTypeOrder(a.value, a.type) - selectorTypeOrder(b.nodes[0].value, b.nodes[0].type);
 		}
 
-		if (selectorTypeOrder[a.type] < selectorTypeOrder[b.type]) {
-			return -1;
-		}
-
-		return 1;
+		return selectorTypeOrder(a.value, a.type) - selectorTypeOrder(b.value, b.type);
 	});
 }
 
-const selectorTypeOrder = {
+function selectorTypeOrder(selector, type) {
+	if (type === 'pseudo' && selector && selector.indexOf('::') === 0) {
+		return selectorTypeOrderIndex['pseudoElement'];
+	}
+	return selectorTypeOrderIndex[type];
+}
+
+const selectorTypeOrderIndex = {
 	universal: 0,
 	tag: 1,
 	id: 2,
 	class: 3,
 	attribute: 4,
-	pseudo: 5,
-	selector: 7,
+	selector: 5,
+	pseudo: 6,
+	pseudoElement: 7,
 	string: 8,
-	root : 9,
+	root: 9,
 	comment: 10,
 };
diff --git a/plugins/postcss-is-pseudo-class/test/basic.css b/plugins/postcss-is-pseudo-class/test/basic.css
@@ -101,3 +101,7 @@ foo[baz=":is(.some, .other)"], .ok {
 :is(a, button):is(:hover, :focus)::before {
 	order: 26;
 }
+
+:is(::after, .foo):is(:hover, :focus) {
+	order: 27;
+}
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
@@ -325,3 +325,19 @@ button:hover::before {
 button:focus::before {
 	order: 26;
 }
+
+:not(.something-random):hover::after {
+	order: 27;
+}
+
+:not(.something-random):focus::after {
+	order: 27;
+}
+
+.foo:hover {
+	order: 27;
+}
+
+.foo:focus {
+	order: 27;
+}
diff --git a/plugins/postcss-is-pseudo-class/test/basic.expect.css b/plugins/postcss-is-pseudo-class/test/basic.expect.css
@@ -325,3 +325,19 @@ button:hover::before {
 button:focus::before {
 	order: 26;
 }
+
+:not(.does-not-exist):hover::after {
+	order: 27;
+}
+
+:not(.does-not-exist):focus::after {
+	order: 27;
+}
+
+.foo:hover {
+	order: 27;
+}
+
+.foo:focus {
+	order: 27;
+}
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
@@ -325,3 +325,19 @@ button:hover::before {
 button:focus::before {
 	order: 26;
 }
+
+:not(.does-not-exist):hover::after {
+	order: 27;
+}
+
+:not(.does-not-exist):focus::after {
+	order: 27;
+}
+
+.foo:hover {
+	order: 27;
+}
+
+.foo:focus {
+	order: 27;
+}
diff --git a/plugins/postcss-is-pseudo-class/test/basic.preserve.expect.css b/plugins/postcss-is-pseudo-class/test/basic.preserve.expect.css
@@ -397,3 +397,23 @@ button:focus::before {
 :is(a, button):is(:hover, :focus)::before {
 	order: 26;
 }
+
+:not(.does-not-exist):hover::after {
+	order: 27;
+}
+
+:not(.does-not-exist):focus::after {
+	order: 27;
+}
+
+.foo:hover {
+	order: 27;
+}
+
+.foo:focus {
+	order: 27;
+}
+
+:is(::after, .foo):is(:hover, :focus) {
+	order: 27;
+}
diff --git a/plugins/postcss-nesting/CHANGELOG.md b/plugins/postcss-nesting/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changes to PostCSS Nesting
 
+### Unreleased (patch)
+
+- Improved : compound selector order with pseudo elements
+
 ### 10.1.3 (March 4, 2022)
 
 - Avoid creating duplicate selectors containing only comments.
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
@@ -57,28 +57,28 @@ export function sortCompoundSelector(node) {
 	// `h1.foo`
 
 	node.nodes.sort((a, b) => {
-		if (a.type === b.type) {
-			return 0;
-		}
-
-		if (selectorTypeOrder[a.type] < selectorTypeOrder[b.type]) {
-			return -1;
-		}
-
-		return 1;
+		return selectorTypeOrder(a.value, a.type) - selectorTypeOrder(b.value, b.type);
 	});
 }
 
-const selectorTypeOrder = {
+function selectorTypeOrder(selector, type) {
+	if (type === 'pseudo' && selector && selector.indexOf('::') === 0) {
+		return selectorTypeOrderIndex['pseudoElement'];
+	}
+	return selectorTypeOrderIndex[type];
+}
+
+const selectorTypeOrderIndex = {
 	universal: 0,
 	tag: 1,
 	id: 2,
 	class: 3,
 	attribute: 4,
-	pseudo: 5,
-	selector: 7,
+	selector: 5,
+	pseudo: 6,
+	pseudoElement: 7,
 	string: 8,
-	root : 9,
+	root: 9,
 	comment: 10,
 
 	nesting: 9999,
diff --git a/plugins/postcss-nesting/test/basic.css b/plugins/postcss-nesting/test/basic.css
@@ -104,7 +104,7 @@ a {
 .b {
 	&.c,
 	&.d {
-		&:before {
+		&::before {
 			order: 41;
 		}
 	}
@@ -119,27 +119,33 @@ a {
 /* leading : root */
 .comments {
 	/* leading : 1 */
-	order: 1;
+	order: 61;
 	/* trailing: 2 */
 
 	& .comment {
-		order: 2;
+		order: 62;
 	}
 
 	/* loose comment */
 	& .comment {
-		order: 3;
+		order: 63;
 	}
 
 	/* leading : 4 */
-	order: 4;
+	order: 64;
 	/* trailing: 5 */
 
 	& .comment {
 		/* nested deeper */
 
 		& .comment {
-			order: 5;
+			order: 65;
 		}
 	}
 }
+
+.pseudo-element {
+	@nest ::before& {
+		order: 71;
+	}
+}
diff --git a/plugins/postcss-nesting/test/basic.expect.css b/plugins/postcss-nesting/test/basic.expect.css
@@ -121,7 +121,7 @@ a b[a="a&b"] {
 		order: 31;
 	}
 
-.a.c:before, .b.c:before, .a.d:before, .b.d:before {
+.a.c::before, .b.c::before, .a.d::before, .b.d::before {
 			order: 41;
 		}
 
@@ -132,23 +132,27 @@ a b[a="a&b"] {
 /* leading : root */
 .comments {
 	/* leading : 1 */
-	order: 1
+	order: 61
 	/* trailing: 2 */
 }
 .comments .comment {
-		order: 2;
+		order: 62;
 	}
 /* loose comment */
 .comments .comment {
-		order: 3;
+		order: 63;
 	}
 .comments {
 
 	/* leading : 4 */
-	order: 4
+	order: 64
 	/* trailing: 5 */
 }
 /* nested deeper */
 .comments .comment .comment {
-			order: 5;
+			order: 65;
 		}
+
+.pseudo-element::before {
+		order: 71
+}
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
@@ -121,7 +121,7 @@ a b[a="a&b"] {
 		order: 31;
 	}
 
-.a.c:before, .b.c:before, .a.d:before, .b.d:before {
+.a.c::before, .b.c::before, .a.d::before, .b.d::before {
 			order: 41;
 		}
 
@@ -132,23 +132,27 @@ a b[a="a&b"] {
 /* leading : root */
 .comments {
 	/* leading : 1 */
-	order: 1
+	order: 61
 	/* trailing: 2 */
 }
 .comments .comment {
-		order: 2;
+		order: 62;
 	}
 /* loose comment */
 .comments .comment {
-		order: 3;
+		order: 63;
 	}
 .comments {
 
 	/* leading : 4 */
-	order: 4
+	order: 64
 	/* trailing: 5 */
 }
 /* nested deeper */
 .comments .comment .comment {
-			order: 5;
+			order: 65;
 		}
+
+.pseudo-element::before {
+		order: 71
+}
diff --git a/plugins/postcss-nesting/test/spec-examples.expect.css b/plugins/postcss-nesting/test/spec-examples.expect.css
@@ -11,7 +11,7 @@ table.colortable td.c {
 		}
 
 table.colortable td:first-child,
-		:first-child:is(table.colortable td)+td {
+		:is(table.colortable td):first-child+td {
 			border: 1px solid black
 		}
 
diff --git a/plugins/postcss-pseudo-class-any-link/CHANGELOG.md b/plugins/postcss-pseudo-class-any-link/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changes to PostCSS Pseudo Class Any Link
 
+### Unreleased (patch)
+
+- Improved : compound selector order with pseudo elements
+
 ### 7.1.1 (February 5, 2022)
 
 - Improved `es module` and `commonjs` compatibility
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
diff --git a/plugins/postcss-pseudo-class-any-link/test/basic.css b/plugins/postcss-pseudo-class-any-link/test/basic.css
diff --git a/plugins/postcss-pseudo-class-any-link/test/basic.expect.css b/plugins/postcss-pseudo-class-any-link/test/basic.expect.css
diff --git a/plugins/postcss-pseudo-class-any-link/test/basic.preserve-false.expect.css b/plugins/postcss-pseudo-class-any-link/test/basic.preserve-false.expect.css
diff --git a/plugins/postcss-pseudo-class-any-link/test/basic.sub-features-area-href.expect.css b/plugins/postcss-pseudo-class-any-link/test/basic.sub-features-area-href.expect.css
diff --git a/plugins/postcss-pseudo-class-any-link/test/generated-selector-cases.expect.css b/plugins/postcss-pseudo-class-any-link/test/generated-selector-cases.expect.css
diff --git a/plugins/postcss-pseudo-class-any-link/test/generated-selector-cases.sub-features-area-href.expect.css b/plugins/postcss-pseudo-class-any-link/test/generated-selector-cases.sub-features-area-href.expect.css

Original file line number	Diff line number	Diff line change
`@@ -101,3 +101,7 @@ foo[baz=":is(.some, .other)"], .ok {`
`101`	`101`	`:is(a, button):is(:hover, :focus)::before {`
`102`	`102`	`order: 26;`
`103`	`103`	`}`
	`104`	`+`
	`105`	`+:is(::after, .foo):is(:hover, :focus) {`
	`106`	`+ order: 27;`
	`107`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -121,7 +121,7 @@ a b[a="a&b"] {`
`121`	`121`	`order: 31;`
`122`	`122`	`}`
`123`	`123`
`124`		`-.a.c:before, .b.c:before, .a.d:before, .b.d:before {`
	`124`	`+.a.c::before, .b.c::before, .a.d::before, .b.d::before {`
`125`	`125`	`order: 41;`
`126`	`126`	`}`
`127`	`127`
`@@ -132,23 +132,27 @@ a b[a="a&b"] {`
`132`	`132`	`/* leading : root */`
`133`	`133`	`.comments {`
`134`	`134`	`/* leading : 1 */`
`135`		`- order: 1`
	`135`	`+ order: 61`
`136`	`136`	`/* trailing: 2 */`
`137`	`137`	`}`
`138`	`138`	`.comments .comment {`
`139`		`- order: 2;`
	`139`	`+ order: 62;`
`140`	`140`	`}`
`141`	`141`	`/* loose comment */`
`142`	`142`	`.comments .comment {`
`143`		`- order: 3;`
	`143`	`+ order: 63;`
`144`	`144`	`}`
`145`	`145`	`.comments {`
`146`	`146`
`147`	`147`	`/* leading : 4 */`
`148`		`- order: 4`
	`148`	`+ order: 64`
`149`	`149`	`/* trailing: 5 */`
`150`	`150`	`}`
`151`	`151`	`/* nested deeper */`
`152`	`152`	`.comments .comment .comment {`
`153`		`- order: 5;`
	`153`	`+ order: 65;`
`154`	`154`	`}`
	`155`	`+`
	`156`	`+.pseudo-element::before {`
	`157`	`+ order: 71`
	`158`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ table.colortable td.c {`
`11`	`11`	`}`
`12`	`12`
`13`	`13`	`table.colortable td:first-child,`
`14`		`- :first-child:is(table.colortable td)+td {`
	`14`	`+ :is(table.colortable td):first-child+td {`
`15`	`15`	`border: 1px solid black`
`16`	`16`	`}`
`17`	`17`