fix(css): Handle custom properties properly (#2869)

swc_css_codegen:
 - Fix code generation of custom properties.

swc_css_parser:
 - Fix parsing of custom properties.

crates/swc_css_codegen/src/lib.rs

@@ -351,16 +351,27 @@ where
     fn emit_declaration(&mut self, n: &Declaration) -> Result {
         emit!(self, n.property);
         punct!(self, ":");
-        formatting_space!(self);
 
-        self.emit_list(
-            &n.value,
-            ListFormat::SpaceDelimited | ListFormat::SingleLine,
-        )?;
+        let is_custom_property = n.property.value.starts_with("--");
 
-        if let Some(tok) = n.important {
+        if !is_custom_property {
             formatting_space!(self);
+        }
+
+        let format = match is_custom_property {
+            true => ListFormat::NotDelimited,
+            false => ListFormat::SpaceDelimited | ListFormat::SingleLine,
+        };
+
+        self.emit_list(&n.value, format)?;
+
+        if let Some(tok) = n.important {
+            if !is_custom_property {
+                formatting_space!(self);
+            }
+
             punct!(self, tok, "!");
+
             self.wr.write_raw(Some(tok), "important")?;
         }
 

crates/swc_css_parser/src/macros.rs

@@ -12,6 +12,14 @@ macro_rules! tok {
         swc_css_ast::Token::Function { .. }
     };
 
+    ("bad-string") => {
+        swc_css_ast::Token::BadStr { .. }
+    };
+
+    ("bad-url") => {
+        swc_css_ast::Token::BadUrl { .. }
+    };
+
     ("[") => {
         swc_css_ast::Token::LBracket
     };

crates/swc_css_parser/src/parser/selector/mod.rs

@@ -713,11 +713,11 @@ where
                         Err(_) => {
                             self.input.reset(&state);
 
-                            PseudoSelectorChildren::Tokens(self.parse_any_value(false)?)
+                            PseudoSelectorChildren::Tokens(self.parse_any_value()?)
                         }
                     }
                 }
-                _ => PseudoSelectorChildren::Tokens(self.parse_any_value(false)?),
+                _ => PseudoSelectorChildren::Tokens(self.parse_any_value()?),
             };
 
             expect!(self, ")");
@@ -769,7 +769,7 @@ where
                 _ => unreachable!(),
             };
 
-            let children = self.parse_any_value(false)?;
+            let children = self.parse_any_value()?;
 
             expect!(self, ")");
 

crates/swc_css_parser/src/parser/style_rule.rs

@@ -157,25 +157,35 @@ where
 
         self.input.skip_ws()?;
 
-        let property = self.parse()?;
+        let property: Ident = self.parse()?;
 
         self.input.skip_ws()?;
 
         expect!(self, ":");
 
-        let mut value = vec![];
         let mut end = self.input.cur_span()?.hi;
+        let mut value = vec![];
 
         if !is!(self, EOF) {
-            let ctx = Ctx {
-                allow_operation_in_value: false,
-                recover_from_property_value: true,
-                ..self.ctx
-            };
-            let (mut parsed_value, parsed_last_pos) = self.with_ctx(ctx).parse_property_values()?;
+            match &*property.value {
+                str if str.starts_with("--") => {
+                    let tokens = Value::Lazy(self.parse_declaration_value()?);
 
-            value.append(&mut parsed_value);
-            end = parsed_last_pos;
+                    value.push(tokens);
+                }
+                _ => {
+                    let ctx = Ctx {
+                        allow_operation_in_value: false,
+                        recover_from_property_value: true,
+                        ..self.ctx
+                    };
+                    let (parsed_value, parsed_last_pos) =
+                        self.with_ctx(ctx).parse_property_values()?;
+
+                    value.extend(parsed_value);
+                    end = parsed_last_pos;
+                }
+            }
         }
 
         let important = self.parse_bang_important()?;
@@ -229,21 +239,21 @@ where
     }
 }
 
-impl<I> Parse<Vec<Declaration>> for Parser<I>
+impl<I> Parse<Vec<DeclarationBlockItem>> for Parser<I>
 where
     I: ParserInput,
 {
-    fn parse(&mut self) -> PResult<Vec<Declaration>> {
-        self.parse_declaration_list()
+    fn parse(&mut self) -> PResult<Vec<DeclarationBlockItem>> {
+        self.parse_decl_block_items()
     }
 }
 
-impl<I> Parse<Vec<DeclarationBlockItem>> for Parser<I>
+impl<I> Parse<Vec<Declaration>> for Parser<I>
 where
     I: ParserInput,
 {
-    fn parse(&mut self) -> PResult<Vec<DeclarationBlockItem>> {
-        self.parse_decl_block_items()
+    fn parse(&mut self) -> PResult<Vec<Declaration>> {
+        self.parse_declaration_list()
     }
 }