fix(css/parser): Fix parsing of supports() (#6333)

crates/swc_css_ast/src/at_rule.rs

@@ -152,15 +152,14 @@ pub enum KeyframeSelector {
 #[derive(Eq, Hash, EqIgnoreSpan)]
 pub struct ImportPrelude {
     pub span: Span,
-    pub href: Box<ImportPreludeHref>,
-    pub layer_name: Option<Box<ImportPreludeLayerName>>,
-    pub supports: Option<Box<ImportPreludeSupportsType>>,
-    pub media: Option<Box<MediaQueryList>>,
+    pub href: Box<ImportHref>,
+    pub layer_name: Option<Box<ImportLayerName>>,
+    pub import_conditions: Option<Box<ImportConditions>>,
 }
 
 #[ast_node]
 #[derive(Eq, Hash, Is, EqIgnoreSpan)]
-pub enum ImportPreludeHref {
+pub enum ImportHref {
     #[tag("Url")]
     Url(Url),
     #[tag("Str")]
@@ -169,20 +168,19 @@ pub enum ImportPreludeHref {
 
 #[ast_node]
 #[derive(Eq, Hash, Is, EqIgnoreSpan)]
-pub enum ImportPreludeLayerName {
+pub enum ImportLayerName {
     #[tag("Ident")]
     Ident(Ident),
     #[tag("Function")]
     Function(Function),
 }
 
-#[ast_node]
-#[derive(Eq, Hash, Is, EqIgnoreSpan)]
-pub enum ImportPreludeSupportsType {
-    #[tag("SupportsCondition")]
-    SupportsCondition(SupportsCondition),
-    #[tag("Declaration")]
-    Declaration(Box<Declaration>),
+#[ast_node("ImportCondition")]
+#[derive(Eq, Hash, EqIgnoreSpan)]
+pub struct ImportConditions {
+    pub span: Span,
+    pub supports: Option<Box<Function>>,
+    pub media: Option<Box<MediaQueryList>>,
 }
 
 #[ast_node("NamespacePrelude")]

crates/swc_css_ast/src/base.rs

@@ -4,7 +4,7 @@ use swc_common::{ast_node, EqIgnoreSpan, Span};
 use crate::{
     AlphaValue, AtRule, CalcSum, CmykComponent, Color, ComplexSelector, DashedIdent, Delimiter,
     Dimension, Hue, Ident, Integer, KeyframeBlock, LayerName, Number, Percentage, Ratio,
-    RelativeSelectorList, SelectorList, Str, TokenAndSpan, UnicodeRange, Url,
+    RelativeSelectorList, SelectorList, Str, SupportsCondition, TokenAndSpan, UnicodeRange, Url,
 };
 
 #[ast_node("Stylesheet")]
@@ -143,6 +143,10 @@ pub enum ComponentValue {
     ComplexSelector(ComplexSelector),
     #[tag("LayerName")]
     LayerName(LayerName),
+    #[tag("SupportsCondition")]
+    SupportsCondition(SupportsCondition),
+    #[tag("Declaration")]
+    Declaration(Declaration),
 }
 
 #[ast_node]

crates/swc_css_codegen/src/lib.rs

@@ -210,10 +210,10 @@ where
             }
             AtRulePrelude::ImportPrelude(n) => {
                 match &*n.href {
-                    ImportPreludeHref::Url(_) => {
+                    ImportHref::Url(_) => {
                         space!(self);
                     }
-                    ImportPreludeHref::Str(_) => {
+                    ImportHref::Str(_) => {
                         formatting_space!(self);
                     }
                 }
@@ -334,56 +334,42 @@ where
         )?;
     }
 
-    #[emitter]
-    fn emit_import_prelude_supports_type(&mut self, n: &ImportPreludeSupportsType) -> Result {
-        match n {
-            ImportPreludeSupportsType::SupportsCondition(n) => emit!(self, n),
-            ImportPreludeSupportsType::Declaration(n) => emit!(self, n),
-        }
-    }
-
     #[emitter]
     fn emit_import_prelude(&mut self, n: &ImportPrelude) -> Result {
         emit!(self, n.href);
 
-        if let Some(layer_name) = &n.layer_name {
+        if n.layer_name.is_some() || n.import_conditions.is_some() {
             formatting_space!(self);
+        }
+
+        if let Some(layer_name) = &n.layer_name {
             emit!(self, layer_name);
 
-            if self.config.minify && (n.supports.is_some() || n.media.is_some()) {
-                if let ImportPreludeLayerName::Ident(_) = &**layer_name {
+            if n.import_conditions.is_some() {
+                if let ImportLayerName::Ident(_) = &**layer_name {
                     space!(self);
+                } else {
+                    formatting_space!(self);
                 }
             }
         }
 
-        if let Some(supports) = &n.supports {
-            formatting_space!(self);
-            write_raw!(self, "supports");
-            write_raw!(self, "(");
-            emit!(self, supports);
-            write_raw!(self, ")");
-        }
-
-        if let Some(media) = &n.media {
-            formatting_space!(self);
-            emit!(self, media);
-        }
+        emit!(self, n.import_conditions);
     }
 
     #[emitter]
-    fn emit_import_prelude_href(&mut self, n: &ImportPreludeHref) -> Result {
+    fn emit_import_prelude_href(&mut self, n: &ImportHref) -> Result {
         match n {
-            ImportPreludeHref::Url(n) => emit!(self, n),
-            ImportPreludeHref::Str(n) => emit!(self, n),
+            ImportHref::Url(n) => emit!(self, n),
+            ImportHref::Str(n) => emit!(self, n),
         }
     }
 
     #[emitter]
-    fn emit_import_layer_name(&mut self, n: &ImportPreludeLayerName) -> Result {
+    fn emit_import_layer_name(&mut self, n: &ImportLayerName) -> Result {
         match n {
-            ImportPreludeLayerName::Ident(n) => emit!(self, n),
-            ImportPreludeLayerName::Function(n) if n.value.is_empty() => {
+            ImportLayerName::Ident(n) => emit!(self, n),
+            ImportLayerName::Function(n) if n.value.is_empty() => {
                 // Never emit `layer()`
                 emit!(
                     self,
@@ -394,12 +380,27 @@ where
                     })
                 )
             }
-            ImportPreludeLayerName::Function(n) => {
+            ImportLayerName::Function(n) => {
                 emit!(self, n)
             }
         }
     }
 
+    #[emitter]
+    fn emit_import_conditions(&mut self, n: &ImportConditions) -> Result {
+        if let Some(supports) = &n.supports {
+            emit!(self, supports);
+
+            if n.media.is_some() {
+                formatting_space!(self);
+            }
+        }
+
+        if let Some(media) = &n.media {
+            emit!(self, media);
+        }
+    }
+
     #[emitter]
     fn emit_keyframes_name(&mut self, n: &KeyframesName) -> Result {
         match n {
@@ -1406,6 +1407,8 @@ where
             ComponentValue::CalcSum(n) => emit!(self, n),
             ComponentValue::ComplexSelector(n) => emit!(self, n),
             ComponentValue::LayerName(n) => emit!(self, n),
+            ComponentValue::Declaration(n) => emit!(self, n),
+            ComponentValue::SupportsCondition(n) => emit!(self, n),
         }
     }
 

crates/swc_css_lints/src/rules/no_duplicate_at_import_rules.rs

@@ -45,8 +45,8 @@ impl Visit for NoDuplicateAtImportRules {
 
     fn visit_import_prelude(&mut self, import_prelude: &ImportPrelude) {
         let href = match &*import_prelude.href {
-            ImportPreludeHref::Str(Str { value, .. }) => value,
-            ImportPreludeHref::Url(Url {
+            ImportHref::Str(Str { value, .. }) => value,
+            ImportHref::Url(Url {
                 value: Some(value), ..
             }) => match &**value {
                 UrlValue::Raw(UrlValueRaw { value, .. }) => value,
@@ -59,24 +59,26 @@ impl Visit for NoDuplicateAtImportRules {
             }
         };
 
-        if let Some(queries) = import_prelude.media.as_ref().map(|media| &media.queries) {
-            queries.iter().fold(&mut self.imports, |imports, query| {
-                let media = query.media_type.as_ref().map(|ident| {
-                    let MediaType::Ident(Ident { value, .. }) = ident;
+        if let Some(import_conditions) = &import_prelude.import_conditions {
+            if let Some(queries) = import_conditions.media.as_ref().map(|media| &media.queries) {
+                queries.iter().fold(&mut self.imports, |imports, query| {
+                    let media = query.media_type.as_ref().map(|ident| {
+                        let MediaType::Ident(Ident { value, .. }) = ident;
 
-                    value.clone()
-                });
-                let pair = (href.clone(), media);
+                        value.clone()
+                    });
+                    let pair = (href.clone(), media);
 
-                if imports.contains(&pair) {
-                    if let Some(at_rule) = &self.import_at_rules {
-                        self.ctx.report(at_rule, build_message(href));
+                    if imports.contains(&pair) {
+                        if let Some(at_rule) = &self.import_at_rules {
+                            self.ctx.report(at_rule, build_message(href));
+                        }
                     }
-                }
 
-                imports.insert(pair);
-                imports
-            });
+                    imports.insert(pair);
+                    imports
+                });
+            }
         } else {
             let pair = (href.clone(), None);
 

crates/swc_css_minifier/src/compressor/import.rs

@@ -3,8 +3,8 @@ use swc_css_ast::*;
 use super::Compressor;
 
 impl Compressor {
-    pub(super) fn compress_import_prelude_href(&mut self, import_href: &mut ImportPreludeHref) {
-        if let ImportPreludeHref::Url(Url {
+    pub(super) fn compress_import_href(&mut self, import_href: &mut ImportHref) {
+        if let ImportHref::Url(Url {
             value: Some(value),
             modifiers,
             span,
@@ -22,7 +22,7 @@ impl Compressor {
                 UrlValue::Raw(UrlValueRaw { value, .. }) => value,
             };
 
-            *import_href = ImportPreludeHref::Str(Str {
+            *import_href = ImportHref::Str(Str {
                 span: *span,
                 value: (&*new_value).into(),
                 raw: None,

crates/swc_css_minifier/src/compressor/mod.rs

@@ -139,10 +139,10 @@ impl VisitMut for Compressor {
         self.compress_keyframes_at_rule(n);
     }
 
-    fn visit_mut_import_prelude_href(&mut self, n: &mut ImportPreludeHref) {
+    fn visit_mut_import_href(&mut self, n: &mut ImportHref) {
         n.visit_mut_children_with(self);
 
-        self.compress_import_prelude_href(n);
+        self.compress_import_href(n);
     }
 
     fn visit_mut_media_query_list(&mut self, n: &mut MediaQueryList) {

crates/swc_css_modules/src/imports.rs

@@ -2,8 +2,8 @@
 
 use swc_atoms::{js_word, JsWord};
 use swc_css_ast::{
-    ComponentValue, Declaration, DeclarationName, Ident, ImportPrelude, ImportPreludeHref,
-    Stylesheet, UrlValue,
+    ComponentValue, Declaration, DeclarationName, Ident, ImportHref, ImportPrelude, Stylesheet,
+    UrlValue,
 };
 use swc_css_visit::{Visit, VisitWith};
 
@@ -26,7 +26,7 @@ impl Visit for Analyzer {
         n.visit_children_with(self);
 
         match &*n.href {
-            ImportPreludeHref::Url(u) => {
+            ImportHref::Url(u) => {
                 if let Some(s) = &u.value {
                     match &**s {
                         UrlValue::Str(s) => {
@@ -38,7 +38,7 @@ impl Visit for Analyzer {
                     }
                 }
             }
-            ImportPreludeHref::Str(s) => {
+            ImportHref::Str(s) => {
                 self.imports.push(s.value.clone());
             }
         }

crates/swc_css_modules/tests/fixture/import/import.compiled.css

@@ -143,7 +143,7 @@ st.css');
 @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);