postcss-is-pseudo : fix has pseudo (#1139)

Author: romainmenke

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

@@ -1,5 +1,9 @@
 # Changes to PostCSS Is Pseudo Class
 
+### Unreleased (patch)
+
+- Prevent incorrect transforms when `:is()` is wrapped in `:has()`.
+
 ### 4.0.2
 
 _September 18, 2023_

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

@@ -41,6 +41,12 @@ export default function splitSelectors(selectors: Array<string>, pluginOptions:
 				return;
 			}
 
+			if (pseudo.parent?.parent?.type === 'pseudo' && pseudo.parent?.parent?.value?.toLowerCase() === ':has') {
+				pseudo.value = ':-csstools-matches';
+
+				return;
+			}
+
 			let parent = pseudo.parent;
 			while (parent) {
 				if (parent.value && parent.value.toLowerCase() === ':is' && parent.type === 'pseudo') {

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

@@ -161,3 +161,15 @@ header:is(.a .b) {
 >:is(.a .b) {
 	color: green;
 }
+
+:has(:is(.foo .bar)) {
+	color: green;
+}
+
+:has(:is(.foo .bar), .fooz .bar) {
+	color: green;
+}
+
+:has(:is(.foo .bar) .fooz) {
+	color: green;
+}

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

@@ -226,15 +226,7 @@ ol:hover > li.foo, ol:hover > li.bar, ol:focus > li.foo, ol:focus > li.bar, ul:h
 	order: 35;
 }
 
-:has(h1) {
-	order: 36;
-}
-
-:has(h2) {
-	order: 36;
-}
-
-:has(h3) {
+:has(:is(h1, h2, h3)) {
 	order: 36;
 }
 
@@ -269,3 +261,15 @@ input:hover, input:focus, button:hover, button:focus {
 >:is(.a .b) {
 	color: green;
 }
+
+:has(:is(.foo .bar)) {
+	color: green;
+}
+
+:has( .fooz .bar,:is(.foo .bar)) {
+	color: green;
+}
+
+:has(:is(.foo .bar) .fooz) {
+	color: green;
+}

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

@@ -226,15 +226,7 @@ ol:hover > li.foo, ol:hover > li.bar, ol:focus > li.foo, ol:focus > li.bar, ul:h
 	order: 35;
 }
 
-:has(h1) {
-	order: 36;
-}
-
-:has(h2) {
-	order: 36;
-}
-
-:has(h3) {
+:has(:is(h1, h2, h3)) {
 	order: 36;
 }
 
@@ -269,3 +261,15 @@ input:hover, input:focus, button:hover, button:focus {
 >:is(.a .b) {
 	color: green;
 }
+
+:has(:is(.foo .bar)) {
+	color: green;
+}
+
+:has( .fooz .bar,:is(.foo .bar)) {
+	color: green;
+}
+
+:has(:is(.foo .bar) .fooz) {
+	color: green;
+}

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

@@ -226,15 +226,7 @@ ol:hover > li.foo, ol:hover > li.bar, ol:focus > li.foo, ol:focus > li.bar, ul:h
 	order: 35;
 }
 
-:has(h1) {
-	order: 36;
-}
-
-:has(h2) {
-	order: 36;
-}
-
-:has(h3) {
+:has(:is(h1, h2, h3)) {
 	order: 36;
 }
 
@@ -269,3 +261,15 @@ input:hover, input:focus, button:hover, button:focus {
 >:is(.a .b) {
 	color: green;
 }
+
+:has(:is(.foo .bar)) {
+	color: green;
+}
+
+:has( .fooz .bar,:is(.foo .bar)) {
+	color: green;
+}
+
+:has(:is(.foo .bar) .fooz) {
+	color: green;
+}

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

@@ -226,15 +226,7 @@ ol:hover > li.foo, ol:hover > li.bar, ol:focus > li.foo, ol:focus > li.bar, ul:h
 	order: 35;
 }
 
-:has(h1) {
-	order: 36;
-}
-
-:has(h2) {
-	order: 36;
-}
-
-:has(h3) {
+:has(:is(h1, h2, h3)) {
 	order: 36;
 }
 
@@ -269,3 +261,15 @@ input:hover, input:focus, button:hover, button:focus {
 >:is(.a .b) {
 	color: green;
 }
+
+:has(:is(.foo .bar)) {
+	color: green;
+}
+
+:has( .fooz .bar,:is(.foo .bar)) {
+	color: green;
+}
+
+:has(:is(.foo .bar) .fooz) {
+	color: green;
+}

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

@@ -350,18 +350,6 @@ ol:hover > li.foo, ol:hover > li.bar, ol:focus > li.foo, ol:focus > li.bar, ul:h
 	order: 35;
 }
 
-:has(h1) {
-	order: 36;
-}
-
-:has(h2) {
-	order: 36;
-}
-
-:has(h3) {
-	order: 36;
-}
-
 :has(:is(h1, h2, h3)) {
 	order: 36;
 }
@@ -413,3 +401,19 @@ header:is(.a .b) {
 >:is(.a .b) {
 	color: green;
 }
+
+:has(:is(.foo .bar)) {
+	color: green;
+}
+
+:has( .fooz .bar,:is(.foo .bar)) {
+	color: green;
+}
+
+:has(:is(.foo .bar), .fooz .bar) {
+	color: green;
+}
+
+:has(:is(.foo .bar) .fooz) {
+	color: green;
+}

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

@@ -350,18 +350,6 @@ ol:hover > li.foo, ol:hover > li.bar, ol:focus > li.foo, ol:focus > li.bar, ul:h
 	order: 35;
 }
 
-:has(h1) {
-	order: 36;
-}
-
-:has(h2) {
-	order: 36;
-}
-
-:has(h3) {
-	order: 36;
-}
-
 :has(:is(h1, h2, h3)) {
 	order: 36;
 }
@@ -415,3 +403,19 @@ header:is(.a .b) {
 >:is(.a .b) {
 	color: green;
 }
+
+:has(:is(.foo .bar)) {
+	color: green;
+}
+
+:has( .fooz .bar,:is(.foo .bar)) {
+	color: green;
+}
+
+:has(:is(.foo .bar), .fooz .bar) {
+	color: green;
+}
+
+:has(:is(.foo .bar) .fooz) {
+	color: green;
+}