From a5ee8fbee91535894f2711fc23af052b66e30b71 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Mon, 3 Jun 2024 14:54:20 -0400
Subject: [PATCH] distinguish between pseudo selectors with and without
 children

---
 .../plugins/resource/plugin-standard-css.js   | 70 ++++++++++---------
 .../fixtures/expected.css                     |  2 +
 .../src/styles/main.css                       |  4 ++
 3 files changed, 44 insertions(+), 32 deletions(-)

diff --git a/packages/cli/src/plugins/resource/plugin-standard-css.js b/packages/cli/src/plugins/resource/plugin-standard-css.js
index a2736a22a..b0cdbcb26 100644
--- a/packages/cli/src/plugins/resource/plugin-standard-css.js
+++ b/packages/cli/src/plugins/resource/plugin-standard-css.js
@@ -21,7 +21,7 @@ function bundleCss(body, url, compilation) {
 
   walk(ast, {
     enter: function (node, item) { // eslint-disable-line complexity
-      const { type, name, value } = node;
+      const { type, name, value, children } = node;
 
       if ((type === 'String' || type === 'Url') && this.atrulePrelude && this.atrule.name === 'import') {
         const { value } = node;
@@ -83,23 +83,26 @@ function bundleCss(body, url, compilation) {
       } else if (type === 'PseudoClassSelector') {
         optimizedCss += `:${name}`;
 
-        switch (name) {
+        if (children) {
+          switch (name) {
 
-          case 'dir':
-          case 'is':
-          case 'has':
-          case 'lang':
-          case 'not':
-          case 'nth-child':
-          case 'nth-last-child':
-          case 'nth-of-type':
-          case 'nth-last-of-type':
-          case 'where':
-            optimizedCss += '(';
-            break;
-          default:
-            break;
+            case 'dir':
+            case 'host':
+            case 'is':
+            case 'has':
+            case 'lang':
+            case 'not':
+            case 'nth-child':
+            case 'nth-last-child':
+            case 'nth-of-type':
+            case 'nth-last-of-type':
+            case 'where':
+              optimizedCss += '(';
+              break;
+            default:
+              break;
 
+          }
         }
       } else if (type === 'PseudoElementSelector') {
         optimizedCss += `::${name}`;
@@ -208,23 +211,26 @@ function bundleCss(body, url, compilation) {
           optimizedCss += ')';
           break;
         case 'PseudoClassSelector':
-          switch (node.name) {
-
-            case 'dir':
-            case 'is':
-            case 'has':
-            case 'lang':
-            case 'not':
-            case 'nth-child':
-            case 'nth-last-child':
-            case 'nth-last-of-type':
-            case 'nth-of-type':
-            case 'where':
-              optimizedCss += ')';
-              break;
-            default:
-              break;
+          if (node.children) {
+            switch (node.name) {
+
+              case 'dir':
+              case 'host':
+              case 'is':
+              case 'has':
+              case 'lang':
+              case 'not':
+              case 'nth-child':
+              case 'nth-last-child':
+              case 'nth-last-of-type':
+              case 'nth-of-type':
+              case 'where':
+                optimizedCss += ')';
+                break;
+              default:
+                break;
 
+            }
           }
           break;
         case 'PseudoElementSelector':
diff --git a/packages/cli/test/cases/build.config.optimization-default/fixtures/expected.css b/packages/cli/test/cases/build.config.optimization-default/fixtures/expected.css
index 155e64ba4..bdaab6708 100644
--- a/packages/cli/test/cases/build.config.optimization-default/fixtures/expected.css
+++ b/packages/cli/test/cases/build.config.optimization-default/fixtures/expected.css
@@ -70,6 +70,8 @@ h1{background-image:url('/foo/bar.baz')}
 
 :dir(rtl){background-color:red}
 
+:host(h1){color:red}
+
 ::slotted(.content){background-color:aqua}
 
 h2 ::slotted(span){background:silver}
diff --git a/packages/cli/test/cases/build.config.optimization-default/src/styles/main.css b/packages/cli/test/cases/build.config.optimization-default/src/styles/main.css
index 99c87d65b..b31735600 100644
--- a/packages/cli/test/cases/build.config.optimization-default/src/styles/main.css
+++ b/packages/cli/test/cases/build.config.optimization-default/src/styles/main.css
@@ -153,6 +153,10 @@ h1 {
   background-color: red;
 }
 
+:host(h1) {
+  color: red;
+}
+
 ::slotted(.content) {
   background-color: aqua;
 }