feat(css/parser): Normalize at-rules (#6705)

swc-project · Jan 14, 2023 · 43e7519 · 43e7519
1 parent 47cc644
commit 43e7519
Show file tree

Hide file tree

Showing 28 changed files with 3,469 additions and 462 deletions.
diff --git a/crates/swc_atoms/words.txt b/crates/swc_atoms/words.txt
@@ -1002,6 +1002,7 @@ bigint
 bisque
 black
 blanchedalmond
+blank
 blink
 block
 block-overflow
@@ -1350,6 +1351,7 @@ filterUnits
 filterunits
 finally
 firebrick
+first
 first-child
 first-letter
 first-line

diff --git a/crates/swc_css_ast/src/at_rule.rs b/crates/swc_css_ast/src/at_rule.rs
@@ -392,6 +392,9 @@ pub enum MediaFeature {
 pub enum MediaFeatureName {
     #[tag("Ident")]
     Ident(Ident),
+
+    #[tag("ExtensionName")]
+    ExtensionName(ExtensionName),
 }
 
 #[ast_node]

diff --git a/crates/swc_css_codegen/src/lib.rs b/crates/swc_css_codegen/src/lib.rs
@@ -630,13 +630,8 @@ where
     #[emitter]
     fn emit_media_feature_name(&mut self, n: &MediaFeatureName) -> Result {
         match n {
-            MediaFeatureName::Ident(n) => emit!(
-                &mut *self.with_ctx(Ctx {
-                    allow_to_lowercase: true,
-                    ..self.ctx
-                }),
-                n
-            ),
+            MediaFeatureName::Ident(n) => emit!(self, n),
+            MediaFeatureName::ExtensionName(n) => emit!(self, n),
         }
     }
 

diff --git a/crates/swc_css_codegen/tests/fixture.rs b/crates/swc_css_codegen/tests/fixture.rs
@@ -120,10 +120,6 @@ impl VisitMut for NormalizeTest {
             modifier.value = modifier.value.to_lowercase().into();
         }
 
-        if let Some(MediaType::Ident(ident)) = &mut n.media_type {
-            ident.value = ident.value.to_lowercase().into();
-        }
-
         n.keyword = None;
     }
 
@@ -145,16 +141,6 @@ impl VisitMut for NormalizeTest {
         n.keyword = None;
     }
 
-    fn visit_mut_media_feature_name(&mut self, n: &mut MediaFeatureName) {
-        n.visit_mut_children_with(self);
-
-        match n {
-            MediaFeatureName::Ident(ident) => {
-                ident.value = ident.value.to_lowercase().into();
-            }
-        }
-    }
-
     fn visit_mut_supports_not(&mut self, n: &mut SupportsNot) {
         n.visit_mut_children_with(self);
 

diff --git a/crates/swc_css_codegen/tests/fixture/at-rules/media/4/output.css b/crates/swc_css_codegen/tests/fixture/at-rules/media/4/output.css
@@ -111,8 +111,8 @@
 @media func(100px) {}
 @media screen and func(100px) {}
 @media (max-width: 650px), calc(150px + 150px) {}
-@media ALL {}
-@media (PREFERS-reduced-motion: no-preference) {
+@media all {}
+@media (prefers-reduced-motion: no-preference) {
   :root {
     scroll-behavior: smooth;
   }

diff --git a/crates/swc_css_codegen/tests/fixture/at-rules/page/1/output.css b/crates/swc_css_codegen/tests/fixture/at-rules/page/1/output.css
@@ -44,6 +44,6 @@
 @page :blank:first {}
 @page :first {}
 @page toc, index {}
-@page :FIRST {
+@page :first {
   margin: 2cm;
 }
diff --git a/crates/swc_css_compat/src/compiler/custom_media.rs b/crates/swc_css_compat/src/compiler/custom_media.rs
@@ -225,7 +225,7 @@ impl CustomMediaHandler {
 
     pub(crate) fn process_media_in_parens(&mut self, n: &MediaInParens) -> Option<MediaInParens> {
         if let MediaInParens::Feature(box MediaFeature::Boolean(MediaFeatureBoolean {
-            name: MediaFeatureName::Ident(name),
+            name: MediaFeatureName::ExtensionName(name),
             ..
         })) = n
         {

diff --git a/crates/swc_css_modules/tests/fixture/import/import.compiled.css b/crates/swc_css_modules/tests/fixture/import/import.compiled.css
@@ -21,7 +21,7 @@
 @import url("");
 @import url("");
 @import url(test.css) screen and (orientation: landscape);
-@import url(test.css) SCREEN and (ORIENTATION: LANDSCAPE);
+@import url(test.css) screen and (orientation: landscape);
 @import url(test.css) screen and (orientation: landscape);
 @import url(test.css) screen and (orientation: landscape);
 @import url(test-media.css) screen and (orientation: landscape);
@@ -130,7 +130,7 @@
 @import url("./test.css") layer(default) supports(display: flex) screen and (min-width: 400px);
 @import url("./test.css") screen and (min-width: 400px);
 @import url("./test.css") layer(default) supports(display: flex) screen and (min-width: 400px);
-@import url("./test.css") layer(DEFAULT) supports(display: FLEX) SCREEN and (MIN-WIDTH: 400px);
+@import url("./test.css") layer(DEFAULT) supports(display: FLEX) screen and (min-width: 400px);
 @import url("./test.css") layer(default) supports(display: flex) screen and (min-width: 400px);
 @import url(test.css);
 @import url(test.css);