distinguish between pseudo selectors with and without children

ProjectEvergreen · Jun 22, 2024 · a5ee8fb · a5ee8fb
1 parent 9169091
commit a5ee8fb
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 32 deletions.
diff --git 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
@@ -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
@@ -153,6 +153,10 @@ h1 {
   background-color: red;
 }
 
+:host(h1) {
+  color: red;
+}
+
 ::slotted(.content) {
   background-color: aqua;
 }