postcss-is-pseudo : fix compound selectors with universal selectors (csstools#959)

romainmenke · web-flow · commit 8afd5389249d · 2023-05-08T08:23:41.000+02:00
diff --git a/plugins/postcss-is-pseudo-class/CHANGELOG.md b/plugins/postcss-is-pseudo-class/CHANGELOG.md
@@ -1,5 +1,18 @@
 # Changes to PostCSS Is Pseudo Class
 
+### Unreleased (patch)
+
+- Fix compound selectors with `*`.
+
+```diff
+:is(.a *):is(h1, h2, h3) {}
+
+/* becomes : */
+
+- .a *h1, .a *h2, .a *h3 {}
++ .a h1, .a h2, .a h3 {}
+```
+
 ### 3.2.0 (April 10, 2023)
 
 - Add support for more complex selector patterns. In particular anything where `:is()` is in the left-most compound selector.
diff --git a/plugins/postcss-is-pseudo-class/dist/index.cjs b/plugins/postcss-is-pseudo-class/dist/index.cjs
diff --git a/plugins/postcss-is-pseudo-class/dist/index.mjs b/plugins/postcss-is-pseudo-class/dist/index.mjs
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
@@ -5,7 +5,7 @@ export function sortCompoundSelectorsInsideComplexSelector(node) {
 		return;
 	}
 
-	const compoundSelectors = [];
+	const compoundSelectors: Array<Array<parser.Node>> = [];
 	let currentCompoundSelector = [];
 	for (let i = 0; i < node.nodes.length; i++) {
 		if (node.nodes[i].type === 'combinator') {
@@ -39,6 +39,7 @@ export function sortCompoundSelectorsInsideComplexSelector(node) {
 	const sortedCompoundSelectors = [];
 	for (let i = 0; i < compoundSelectors.length; i++) {
 		const compoundSelector = compoundSelectors[i];
+
 		compoundSelector.sort((a, b) => {
 			if (a.type === 'selector' && b.type === 'selector' && a.nodes.length && b.nodes.length) {
 				return selectorTypeOrder(a.nodes[0], a.nodes[0].type) - selectorTypeOrder(b.nodes[0], b.nodes[0].type);
@@ -55,7 +56,20 @@ export function sortCompoundSelectorsInsideComplexSelector(node) {
 			return selectorTypeOrder(a, a.type) - selectorTypeOrder(b, b.type);
 		});
 
+		const compoundSelectorChildTypes = new Set(compoundSelector.map(x => x.type));
+		const skipUniversals = compoundSelectorChildTypes.has('universal') && (
+			compoundSelectorChildTypes.has('tag') ||
+			compoundSelectorChildTypes.has('attribute') ||
+			compoundSelectorChildTypes.has('class') ||
+			compoundSelectorChildTypes.has('id') ||
+			compoundSelectorChildTypes.has('pseudo'));
+
 		for (let j = 0; j < compoundSelector.length; j++) {
+			if (compoundSelector[j].type === 'universal' && skipUniversals) {
+				compoundSelector[j].remove();
+				continue;
+			}
+
 			sortedCompoundSelectors.push(compoundSelector[j]);
 		}
 	}
diff --git a/plugins/postcss-is-pseudo-class/test/basic.css b/plugins/postcss-is-pseudo-class/test/basic.css
@@ -146,6 +146,10 @@ foo[baz=":is(.some, .other)"], .ok {
 	order: 37;
 }
 
+:is(.a, .a *):is(h1, h2, h3, h4, h5, h6) {
+	order: 38;
+}
+
 :is(input, button):is(:hover, :focus) {
 	to-clone: 1;
 }
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
@@ -254,6 +254,10 @@ button:is(textarea) {
 	order: 37;
 }
 
+h1.a, h2.a, h3.a, h4.a, h5.a, h6.a, .a h1, .a h2, .a h3, .a h4, .a h5, .a h6 {
+	order: 38;
+}
+
 input:hover, input:focus, button:hover, button:focus {
 	to-clone: 1;
 }
diff --git a/plugins/postcss-is-pseudo-class/test/basic.expect.css b/plugins/postcss-is-pseudo-class/test/basic.expect.css
@@ -254,6 +254,10 @@ button:is(textarea) {
 	order: 37;
 }
 
+h1.a, h2.a, h3.a, h4.a, h5.a, h6.a, .a h1, .a h2, .a h3, .a h4, .a h5, .a h6 {
+	order: 38;
+}
+
 input:hover, input:focus, button:hover, button:focus {
 	to-clone: 1;
 }
diff --git a/plugins/postcss-is-pseudo-class/test/basic.oncomplex.no-warning.expect.css b/plugins/postcss-is-pseudo-class/test/basic.oncomplex.no-warning.expect.css
@@ -254,6 +254,10 @@ button:is(textarea) {
 	order: 37;
 }
 
+h1.a, h2.a, h3.a, h4.a, h5.a, h6.a, .a h1, .a h2, .a h3, .a h4, .a h5, .a h6 {
+	order: 38;
+}
+
 input:hover, input:focus, button:hover, button:focus {
 	to-clone: 1;
 }
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
@@ -254,6 +254,10 @@ button:is(textarea) {
 	order: 37;
 }
 
+h1.a, h2.a, h3.a, h4.a, h5.a, h6.a, .a h1, .a h2, .a h3, .a h4, .a h5, .a h6 {
+	order: 38;
+}
+
 input:hover, input:focus, button:hover, button:focus {
 	to-clone: 1;
 }
diff --git a/plugins/postcss-is-pseudo-class/test/basic.preserve.expect.css b/plugins/postcss-is-pseudo-class/test/basic.preserve.expect.css
@@ -386,6 +386,14 @@ button:is(textarea) {
 	order: 37;
 }
 
+h1.a, h2.a, h3.a, h4.a, h5.a, h6.a, .a h1, .a h2, .a h3, .a h4, .a h5, .a h6 {
+	order: 38;
+}
+
+:is(.a, .a *):is(h1, h2, h3, h4, h5, h6) {
+	order: 38;
+}
+
 input:hover, input:focus, button:hover, button:focus {
 	to-clone: 1;
 }
diff --git a/plugins/postcss-is-pseudo-class/test/basic.with-cloned-declarations.expect.css b/plugins/postcss-is-pseudo-class/test/basic.with-cloned-declarations.expect.css
@@ -386,6 +386,14 @@ button:is(textarea) {
 	order: 37;
 }
 
+h1.a, h2.a, h3.a, h4.a, h5.a, h6.a, .a h1, .a h2, .a h3, .a h4, .a h5, .a h6 {
+	order: 38;
+}
+
+:is(.a, .a *):is(h1, h2, h3, h4, h5, h6) {
+	order: 38;
+}
+
 input:hover, input:focus, button:hover, button:focus {
 	cloned: 1;
 	to-clone: 1;
diff --git a/plugins/postcss-is-pseudo-class/test/browser.expect.css b/plugins/postcss-is-pseudo-class/test/browser.expect.css
@@ -15,7 +15,7 @@
 	font-size: 20px;
 }
 
-#main_a *.e.e:not(.does-not-exist):not(.does-not-exist)+.d, #main_a .e.e.g:not(.does-not-exist)+.d {
+#main_a .e.e:not(.does-not-exist):not(.does-not-exist)+.d, #main_a .e.e.g:not(.does-not-exist)+.d {
 	color: red;
 	font-size: 20px;
 }
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
@@ -1990,15 +1990,15 @@ __foo {
 	order: 239;
 }
 
-*.some, *.other {
+.some, .other {
 	order: 240;
 }
 
 *:is(.some, .other) {
 	order: 240;
 }
 
-*.some, *.other {
+.some, .other {
 	order: 241;
 }
 

Original file line number	Diff line number	Diff line change
`@@ -146,6 +146,10 @@ foo[baz=":is(.some, .other)"], .ok {`
`146`	`146`	`order: 37;`
`147`	`147`	`}`
`148`	`148`
	`149`	`+:is(.a, .a *):is(h1, h2, h3, h4, h5, h6) {`
	`150`	`+ order: 38;`
	`151`	`+}`
	`152`	`+`
`149`	`153`	`:is(input, button):is(:hover, :focus) {`
`150`	`154`	`to-clone: 1;`
`151`	`155`	`}`
Original file line number	Diff line number	Diff line change
`@@ -254,6 +254,10 @@ button:is(textarea) {`
`254`	`254`	`order: 37;`
`255`	`255`	`}`
`256`	`256`
	`257`	`+h1.a, h2.a, h3.a, h4.a, h5.a, h6.a, .a h1, .a h2, .a h3, .a h4, .a h5, .a h6 {`
	`258`	`+ order: 38;`
	`259`	`+}`
	`260`	`+`
`257`	`261`	`input:hover, input:focus, button:hover, button:focus {`
`258`	`262`	`to-clone: 1;`
`259`	`263`	`}`
Original file line number	Diff line number	Diff line change
`@@ -386,6 +386,14 @@ button:is(textarea) {`
`386`	`386`	`order: 37;`
`387`	`387`	`}`
`388`	`388`
	`389`	`+h1.a, h2.a, h3.a, h4.a, h5.a, h6.a, .a h1, .a h2, .a h3, .a h4, .a h5, .a h6 {`
	`390`	`+ order: 38;`
	`391`	`+}`
	`392`	`+`
	`393`	`+:is(.a, .a *):is(h1, h2, h3, h4, h5, h6) {`
	`394`	`+ order: 38;`
	`395`	`+}`
	`396`	`+`
`389`	`397`	`input:hover, input:focus, button:hover, button:focus {`
`390`	`398`	`to-clone: 1;`
`391`	`399`	`}`