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

Author: romainmenke

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.

plugins/postcss-is-pseudo-class/dist/index.cjs

@@ -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]);
 		}
 	}

plugins/postcss-is-pseudo-class/dist/index.mjs

@@ -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;
 }

plugins/postcss-is-pseudo-class/src/split-selectors/compound-selector-order.ts

@@ -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;
 }

plugins/postcss-is-pseudo-class/test/basic.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;
 }

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;
 }

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;
 }

plugins/postcss-is-pseudo-class/test/basic.oncomplex.no-warning.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;
 }

plugins/postcss-is-pseudo-class/test/basic.oncomplex.warning.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;

plugins/postcss-is-pseudo-class/test/basic.preserve.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;
 }

plugins/postcss-is-pseudo-class/test/basic.with-cloned-declarations.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;
 }