postcss-is-pseudo-class : fix edge case with compounds (#1101)

Author: romainmenke

plugins/postcss-is-pseudo-class/.tape.mjs

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

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

@@ -1,5 +1,18 @@
 # Changes to PostCSS Is Pseudo Class
 
+### Unreleased (patch)
+
+- Fix substitution when selectors have mixed types for compound selectors where one of two parts is a `:is()` pseudo class.
+
+```diff
+header:is(.a .b) {}
+
+/* becomes : */
+
+- header.a .b {}
++ .a header.b {}
+```
+
 ### 4.0.0
 
 _July 3, 2023_

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

@@ -1,3 +1,3 @@
 export default function splitSelectors(selectors: Array<string>, pluginOptions: {
     specificityMatchingName: string;
-}, recursionDepth?: number): any[];
+}, recursionDepth?: number): Array<string>;

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

@@ -47,8 +47,12 @@ export function isInCompoundWithOneOtherElement(selector): boolean {
 		}
 	}
 
-	selector.nodes[isPseudoIndex].append(selector.nodes[simpleSelectorIndex].clone());
-	selector.nodes[isPseudoIndex].replaceWith(...selector.nodes[isPseudoIndex].nodes);
+	if (selector.nodes[simpleSelectorIndex].type === 'combinator') {
+		return false;
+	}
+
+	selector.nodes[isPseudoIndex].nodes[0].append(selector.nodes[simpleSelectorIndex].clone());
+	selector.nodes[isPseudoIndex].replaceWith(...selector.nodes[isPseudoIndex].nodes[0].nodes);
 	selector.nodes[simpleSelectorIndex].remove();
 
 	return true;

plugins/postcss-is-pseudo-class/dist/split-selectors/split-selectors.d.ts

@@ -4,7 +4,7 @@ import { selectorSpecificity } from '@csstools/selector-specificity';
 // splitSelectors handles the forgiving list behavior of ":is".
 // After created all combinations it wraps the individual selectors in ":-csstools-matches".
 // This makes it easy to recursively resolve all ":is" selectors without infinite loops.
-export default function splitSelectors(selectors: Array<string>, pluginOptions: { specificityMatchingName: string }, recursionDepth = 0) {
+export default function splitSelectors(selectors: Array<string>, pluginOptions: { specificityMatchingName: string }, recursionDepth = 0): Array<string> {
 	const specificityMatchingNameId = ':not(#' + pluginOptions.specificityMatchingName + ')';
 	const specificityMatchingNameClass = ':not(.' + pluginOptions.specificityMatchingName + ')';
 	const specificityMatchingNameTag = ':not(' + pluginOptions.specificityMatchingName + ')';
@@ -15,7 +15,11 @@ export default function splitSelectors(selectors: Array<string>, pluginOptions:
 		}
 
 		let foundNestedIs = false;
-		const replacements = [];
+		const replacements: Array<Array<{
+			start: number,
+			end: number,
+			option: string,
+		}>> = [];
 
 		const selectorAST = parser().astSync(selector);
 		selectorAST.walkPseudos((pseudo) => {

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

@@ -153,3 +153,11 @@ foo[baz=":is(.some, .other)"], .ok {
 :is(input, button):is(:hover, :focus) {
 	to-clone: 1;
 }
+
+header:is(.a .b) {
+	color: green;
+}
+
+>:is(.a .b) {
+	color: green;
+}

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

@@ -261,3 +261,11 @@ h1.a, h2.a, h3.a, h4.a, h5.a, h6.a, .a h1, .a h2, .a h3, .a h4, .a h5, .a h6 {
 input:hover, input:focus, button:hover, button:focus {
 	to-clone: 1;
 }
+
+.a header.b {
+	color: green;
+}
+
+>:is(.a .b) {
+	color: green;
+}

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

@@ -261,3 +261,11 @@ h1.a, h2.a, h3.a, h4.a, h5.a, h6.a, .a h1, .a h2, .a h3, .a h4, .a h5, .a h6 {
 input:hover, input:focus, button:hover, button:focus {
 	to-clone: 1;
 }
+
+.a header.b {
+	color: green;
+}
+
+>:is(.a .b) {
+	color: green;
+}

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

@@ -261,3 +261,11 @@ h1.a, h2.a, h3.a, h4.a, h5.a, h6.a, .a h1, .a h2, .a h3, .a h4, .a h5, .a h6 {
 input:hover, input:focus, button:hover, button:focus {
 	to-clone: 1;
 }
+
+.a header.b {
+	color: green;
+}
+
+>:is(.a .b) {
+	color: green;
+}

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

@@ -261,3 +261,11 @@ h1.a, h2.a, h3.a, h4.a, h5.a, h6.a, .a h1, .a h2, .a h3, .a h4, .a h5, .a h6 {
 input:hover, input:focus, button:hover, button:focus {
 	to-clone: 1;
 }
+
+.a header.b {
+	color: green;
+}
+
+>:is(.a .b) {
+	color: green;
+}

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

@@ -401,3 +401,15 @@ input:hover, input:focus, button:hover, button:focus {
 :is(input, button):is(:hover, :focus) {
 	to-clone: 1;
 }
+
+.a header.b {
+	color: green;
+}
+
+header:is(.a .b) {
+	color: green;
+}
+
+>:is(.a .b) {
+	color: green;
+}

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

@@ -403,3 +403,15 @@ input:hover, input:focus, button:hover, button:focus {
 	cloned: 1;
 	to-clone: 1;
 }
+
+.a header.b {
+	color: green;
+}
+
+header:is(.a .b) {
+	color: green;
+}
+
+>:is(.a .b) {
+	color: green;
+}