nesting selector CSS optimization support

ProjectEvergreen · Sep 20, 2024 · 5fa57bd · 5fa57bd
1 parent aa55127
commit 5fa57bd
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 1 deletion.
diff --git a/packages/cli/src/plugins/resource/plugin-standard-css.js b/packages/cli/src/plugins/resource/plugin-standard-css.js
@@ -83,6 +83,8 @@ function bundleCss(body, url, compilation) {
         optimizedCss += `#${name}`;
       } else if (type === 'ClassSelector') {
         optimizedCss += `.${name}`;
+      } else if (type === 'NestingSelector') {
+        optimizedCss += '&';
       } else if (type === 'PseudoClassSelector') {
         optimizedCss += `:${name}`;
 

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
@@ -78,4 +78,6 @@ h2 ::slotted(span){background:silver}
 
 tabbed-custom-element::part(tab){color:#0c0dcc;border-bottom:transparent solid 2px;}
 
-::highlight(rainbow-color-1){color:#ad26ad;text-decoration:underline;}
+::highlight(rainbow-color-1){color:#ad26ad;text-decoration:underline;}
+
+h2{& span{color:red}}
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
@@ -173,4 +173,10 @@ tabbed-custom-element::part(tab) {
 ::highlight(rainbow-color-1) {
   color: #ad26ad;
   text-decoration: underline;
+}
+
+h2 {
+  & span {
+    color: red;
+  }
 }