nth and lang selectors support

ProjectEvergreen · Nov 3, 2022 · 935e292 · 935e292
1 parent 8049c09
commit 935e292
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 2 deletions.
diff --git a/packages/cli/src/plugins/resource/plugin-standard-css.js b/packages/cli/src/plugins/resource/plugin-standard-css.js
@@ -38,7 +38,12 @@ function bundleCss(body, url) {
 
         switch (name) {
 
+          case 'lang':
           case 'not':
+          case 'nth-child':
+          case 'nth-last-child':
+          case 'nth-of-type':
+          case 'nth-last-of-type':
             optimizedCss += '(';
             break;
           default:
@@ -57,6 +62,23 @@ function bundleCss(body, url) {
         optimizedCss += '[';
       } else if (type === 'Combinator') {
         optimizedCss += name;
+      } else if (type === 'Nth') {
+        const { nth } = node;
+
+        switch (nth.type) {
+
+          case 'AnPlusB':
+            if (nth.a) {
+              optimizedCss += nth.a === '-1' ? '-n' : `${nth.a}n`;
+            }
+            if (nth.b) {
+              optimizedCss += nth.a ? `+${nth.b}` : nth.b;
+            }
+            break;
+          default:
+            break;
+
+        }
       } else if (type === 'Declaration') {
         optimizedCss += `${node.property}:`;
       } else if (type === 'Url' && this.atrule?.name !== 'import') {
@@ -116,7 +138,12 @@ function bundleCss(body, url) {
         case 'PseudoClassSelector':
           switch (node.name) {
 
+            case 'lang':
             case 'not':
+            case 'nth-child':
+            case 'nth-last-child':
+            case 'nth-last-of-type':
+            case 'nth-of-type':
               optimizedCss += ')';
               break;
             default:

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
@@ -20,4 +20,18 @@ p::first-line{color:blue;width:100%!important;}
 
 pre[class*='language-']{color:#ccc;background:none;}
 
-:not(pre)>code[class*='language-']{background:#2d2d2d;}
+dd:only-of-type{background-color:bisque;}
+
+:not(pre)>code[class*='language-']{background:#2d2d2d;}
+
+li:nth-child(-n+3){border:2px solid orange;margin-bottom:1px;}
+
+li:nth-child(even){background-color:lightyellow;}
+
+li:nth-last-child(5n){border:2px solid orange;margin-top:1px;}
+
+dd:nth-last-of-type(odd){border:2px solid orange;}
+
+p:nth-of-type(2n+1){color:red;}
+
+*:lang(en-US){outline:2px solid deeppink;}
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
@@ -43,6 +43,36 @@ pre[class*="language-"] {
   background: none;
 }
 
+dd:only-of-type {
+  background-color: bisque;
+}
+
 :not(pre) > code[class*="language-"] {
-	background: #2d2d2d;
+  background: #2d2d2d;
+}
+
+li:nth-child(-n+3) {
+  border: 2px solid orange;
+  margin-bottom: 1px;
+}
+
+li:nth-child(even) {
+  background-color: lightyellow;
+}
+
+li:nth-last-child(5n) {
+  border: 2px solid orange;
+  margin-top: 1px;
+}
+
+dd:nth-last-of-type(odd) {
+  border: 2px solid orange;
+}
+
+p:nth-of-type(2n + 1) {
+  color: red;
+}
+
+*:lang(en-US) {
+  outline: 2px solid deeppink;
 }