fix #1625 (#1630)

Author: romainmenke

plugins/postcss-is-pseudo-class/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changes to PostCSS Is Pseudo Class
 
+### Unreleased (patch)
+
+- Add support for more complex selector patterns. `.a > :is(.b > .c)` -> `.a.b > .c`
+
 ### 5.0.1
 
 _October 23, 2024_

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

@@ -4,6 +4,7 @@ import { childAdjacentChild } from './complex/child-adjacent-child';
 import { isInCompoundWithOneOtherElement } from './complex/is-in-compound';
 import type { Container } from 'postcss-selector-parser';
 import { isPseudoInFirstCompound } from './complex/is-pseudo-in-first-compound';
+import { samePrecedingElement } from './complex/same-preceding-element';
 
 export default function complexSelectors(selectors: Array<string>, pluginOptions: { onComplexSelector?: 'warning' }, warnOnComplexSelector: () => void, warnOnPseudoElements: () => void): Array<string> {
 	return selectors.flatMap((selector) => {
@@ -82,7 +83,8 @@ export default function complexSelectors(selectors: Array<string>, pluginOptions
 			if (
 				childAdjacentChild(pseudo.parent) ||
 				isInCompoundWithOneOtherElement(pseudo.parent) ||
-				isPseudoInFirstCompound(pseudo.parent)
+				isPseudoInFirstCompound(pseudo.parent) ||
+				samePrecedingElement(pseudo.parent)
 			) {
 				return;
 			}

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

@@ -46,6 +46,10 @@ export function isInCompoundWithOneOtherElement(selector: parser.Container): boo
 		return false;
 	}
 
+	if (parser.isPseudoElement(simpleSelector)) {
+		return false;
+	}
+
 	isPseudo.nodes[0].append(simpleSelector.clone());
 	isPseudo.replaceWith(...isPseudo.nodes[0].nodes);
 	simpleSelector.remove();

plugins/postcss-is-pseudo-class/src/split-selectors/complex.ts

@@ -2,6 +2,7 @@
 // equivalent to
 // .a > .b > .c
 
+import type { Pseudo } from 'postcss-selector-parser';
 import parser from 'postcss-selector-parser';
 
 // because `:is()` is in the left-most compound selector
@@ -21,16 +22,28 @@ export function isPseudoInFirstCompound(selector: parser.Container): boolean {
 			return false;
 		}
 
-		if (parser.isPseudoClass(node) && node.value === ':-csstools-matches') {
-			if (!node.nodes || node.nodes.length !== 1) {
-				return false;
-			}
+		if (parser.isPseudoElement(node)) {
+			return false;
+		}
+
+		if (parser.isPseudoClass(node)) {
+			const nn = node as Pseudo; // because `isPseudoElement` is incorrectly typed
+
+			if (nn.value === ':-csstools-matches') {
+				if (!nn.nodes || nn.nodes.length !== 1) {
+					return false;
+				}
 
-			isPseudoIndex = i;
-			break;
+				isPseudoIndex = i;
+				break;
+			}
 		}
 	}
 
+	if (isPseudoIndex === -1) {
+		return false;
+	}
+
 	const isPseudo = selector.nodes[isPseudoIndex];
 	if (!isPseudo || !parser.isPseudoClass(isPseudo)) {
 		return false;

plugins/postcss-is-pseudo-class/src/split-selectors/complex/is-in-compound.ts

@@ -0,0 +1,92 @@
+import parser from 'postcss-selector-parser';
+
+// .a > :-csstools-matches(.b > .c)
+// equivalent to
+// .a.b > .c
+//
+// and
+//
+// .a + :-csstools-matches(.b + .c)
+// equivalent to
+// .a.b + .c
+//
+// because adjacent elements have the same parent element.
+export function samePrecedingElement(selector: parser.Container): boolean {
+	if (!selector || !selector.nodes) {
+		return false;
+	}
+	if (selector.type !== 'selector') {
+		return false;
+	}
+
+	let combinatorIndex = -1;
+	for (let i = 0; i < selector.nodes.length; i++) {
+		const node = selector.nodes[i];
+		if (parser.isCombinator(node)) {
+			combinatorIndex = i;
+			break;
+		}
+
+		if (parser.isPseudoElement(node)) {
+			return false;
+		}
+	}
+
+	if (combinatorIndex === -1) {
+		return false;
+	}
+
+	const isPseudoIndex = combinatorIndex + 1;
+
+	// immediate sibling/child combinator
+	if (!selector.nodes[combinatorIndex] || selector.nodes[combinatorIndex].type !== 'combinator' || (selector.nodes[combinatorIndex].value !== '>' && selector.nodes[combinatorIndex].value !== '+')) {
+		return false;
+	}
+
+	const combinator = selector.nodes[combinatorIndex].value;
+
+	if (!selector.nodes[isPseudoIndex] || selector.nodes[isPseudoIndex].type !== 'pseudo' || selector.nodes[isPseudoIndex].value !== ':-csstools-matches') {
+		return false;
+	}
+
+	// second `:-csstools-matches`
+	{
+		if (!selector.nodes[isPseudoIndex].nodes || selector.nodes[isPseudoIndex].nodes.length !== 1) {
+			return false;
+		}
+
+		if (selector.nodes[isPseudoIndex].nodes[0].type !== 'selector') {
+			return false;
+		}
+
+		if (!selector.nodes[isPseudoIndex].nodes[0].nodes || selector.nodes[isPseudoIndex].nodes[0].nodes.length !== 3) {
+			return false;
+		}
+
+		// same combinator
+		if (!selector.nodes[isPseudoIndex].nodes[0].nodes || selector.nodes[isPseudoIndex].nodes[0].nodes[1].type !== 'combinator' || selector.nodes[isPseudoIndex].nodes[0].nodes[1].value !== combinator) {
+			return false;
+		}
+	}
+
+	const isPseudo = selector.nodes[isPseudoIndex];
+	if (!isPseudo || !parser.isPseudoClass(isPseudo)) {
+		return false;
+	}
+
+	const before = selector.nodes.slice(0, combinatorIndex);
+
+	selector.each((node) => {
+		node.remove();
+	});
+
+	before.forEach((node) => {
+		selector.append(node);
+	});
+
+	isPseudo.nodes[0].nodes.forEach((node) => {
+		selector.append(node);
+	});
+
+	return true;
+}

plugins/postcss-is-pseudo-class/src/split-selectors/complex/is-pseudo-in-first-compound.ts

@@ -19,7 +19,7 @@ postcssTape(plugin)({
 	},
 	'basic:oncomplex:warning': {
 		message: 'warns on complex selectors',
-		warnings: 9,
+		warnings: 10,
 		options: {
 			onComplexSelector: 'warning',
 		},

plugins/postcss-is-pseudo-class/src/split-selectors/complex/same-preceding-element.ts

@@ -181,3 +181,7 @@ header:is(.a .b) {
 div:is(.a > .b) > .c {
 	color: green;
 }
+
+::before:is(.a > .b) {
+	color: green;
+}

plugins/postcss-is-pseudo-class/test/_tape.mjs

@@ -285,3 +285,7 @@ input:hover, input:focus, button:hover, button:focus {
 .a > div.b > .c {
 	color: green;
 }
+
+::before:is(.a > .b) {
+	color: green;
+}

plugins/postcss-is-pseudo-class/test/basic.css

@@ -285,3 +285,7 @@ input:hover, input:focus, button:hover, button:focus {
 .a > div.b > .c {
 	color: green;
 }
+
+::before:is(.a > .b) {
+	color: green;
+}

plugins/postcss-is-pseudo-class/test/basic.does-not-exist.expect.css

@@ -285,3 +285,7 @@ input:hover, input:focus, button:hover, button:focus {
 .a > div.b > .c {
 	color: green;
 }
+
+::before:is(.a > .b) {
+	color: green;
+}

plugins/postcss-is-pseudo-class/test/basic.expect.css

@@ -285,3 +285,7 @@ input:hover, input:focus, button:hover, button:focus {
 .a > div.b > .c {
 	color: green;
 }
+
+::before:is(.a > .b) {
+	color: green;
+}

plugins/postcss-is-pseudo-class/test/basic.oncomplex.no-warning.expect.css

@@ -437,3 +437,7 @@ header:is(.a .b) {
 div:is(.a > .b) > .c {
 	color: green;
 }
+
+::before:is(.a > .b) {
+	color: green;
+}

plugins/postcss-is-pseudo-class/test/basic.oncomplex.warning.expect.css

@@ -439,3 +439,7 @@ header:is(.a .b) {
 div:is(.a > .b) > .c {
 	color: green;
 }
+
+::before:is(.a > .b) {
+	color: green;
+}

plugins/postcss-is-pseudo-class/test/basic.preserve.expect.css

@@ -279,3 +279,48 @@ cartesianProduct([' ', '+', '>', '~'], [' ', '+', '>', '~'], [' ', '+', '>', '~'
 
 console.log(out.join(''));
 */
+
+.ignore :is(.b > .c) {
+	order: 065;
+}
+
+.ignore > :is(.b + .c) {
+	order: 066;
+}
+
+.ignore ~ :is(.b + .c) {
+	order: 067;
+}
+
+/* https: //github.com/csstools/postcss-plugins/issues/1625 */
+.a > :is(.b > .d, .c > .d) {
+	order: 65;
+}
+
+.a:hover > :is(.b > .d, .c > .d) {
+	order: 66;
+}
+
+.ignore + .b > :is(.b > .c) {
+	order: 67;
+}
+
+.ignore::before > :is(.b > .c) {
+	order: 68;
+}
+
+.a + :is(.b + .d, .c + .d) {
+	order: 75;
+}
+
+.a:hover + :is(.b + .d, .c + .d) {
+	order: 76;
+}
+
+.ignore + .b + :is(.b + .c) {
+	order: 77;
+}
+
+.ignore::before + :is(.b + .c) {
+	order: 78;
+}

plugins/postcss-is-pseudo-class/test/basic.with-cloned-declarations.expect.css

@@ -279,3 +279,48 @@ cartesianProduct([' ', '+', '>', '~'], [' ', '+', '>', '~'], [' ', '+', '>', '~'
 
 console.log(out.join(''));
 */
+
+.ignore :is(.b > .c) {
+	order: 065;
+}
+
+.ignore > :is(.b + .c) {
+	order: 066;
+}
+
+.ignore ~ :is(.b + .c) {
+	order: 067;
+}
+
+/* https: //github.com/csstools/postcss-plugins/issues/1625 */
+.a.b > .d, .a.c > .d {
+	order: 65;
+}
+
+.a.b:hover > .d, .a.c:hover > .d {
+	order: 66;
+}
+
+.ignore + .b > :is(.b > .c) {
+	order: 67;
+}
+
+.ignore::before > :is(.b > .c) {
+	order: 68;
+}
+
+.a.b + .d, .a.c + .d {
+	order: 75;
+}
+
+.a.b:hover + .d, .a.c:hover + .d {
+	order: 76;
+}
+
+.ignore + .b + :is(.b + .c) {
+	order: 77;
+}
+
+.ignore::before + :is(.b + .c) {
+	order: 78;
+}

plugins/postcss-is-pseudo-class/test/complex.css

@@ -26,7 +26,7 @@
 	order: 2.1;
 }
 
-.ignore > :is(.a > .b) > .c {
+::before > :is(.a > .b) > .c {
 	order: 2.2;
 }
 
@@ -38,7 +38,7 @@
 	order: 3.1;
 }
 
-.ignore + :is(.a + .b) + .c {
+::before + :is(.a + .b) + .c {
 	order: 3.2;
 }
 

plugins/postcss-is-pseudo-class/test/complex.expect.css

@@ -26,7 +26,7 @@
 	order: 2.1;
 }
 
-.ignore > :is(.a > .b) > .c {
+::before > :is(.a > .b) > .c {
 	order: 2.2;
 }
 
@@ -38,7 +38,7 @@
 	order: 3.1;
 }
 
-.ignore + :is(.a + .b) + .c {
+::before + :is(.a + .b) + .c {
 	order: 3.2;
 }