feat(css/ast): Add / to the delimiters (#3402)

Author: alexander-akait

crates/swc_css_ast/src/value.rs

@@ -55,6 +55,8 @@ pub enum Value {
 pub enum DelimiterValue {
     /// `,`
     Comma,
+    /// `/`
+    Solidus,
 }
 
 #[ast_node("Delimiter")]

crates/swc_css_codegen/tests/fixture/packages/bootstrap_5_1_3/input.css

@@ -2409,6 +2409,7 @@ width: 1em;
 height: 1em;
 padding: 0.25em 0.25em;
 color: #000;
+background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center / 1em auto no-repeat;
 border: 0;
 border-radius: 0.25rem;
 opacity: 0.5}

crates/swc_css_codegen/tests/fixture/packages/bootstrap_5_1_3/output.css

@@ -39,7 +39,19 @@ where
 
             if !eat!(self, " ")
                 && !is_one_of!(
-                    self, ",", "function", "ident", "percent", "str", "#", "url", "[", "{", "("
+                    self,
+                    ",",
+                    "/",
+                    "function",
+                    "ident",
+                    "dimension",
+                    "percent",
+                    "str",
+                    "#",
+                    "url",
+                    "[",
+                    "{",
+                    "("
                 )
             {
                 if self.ctx.recover_from_property_value
@@ -232,6 +244,15 @@ where
                 }));
             }
 
+            tok!("/") => {
+                bump!(self);
+
+                return Ok(Value::Delimiter(Delimiter {
+                    span: span!(self, span.lo),
+                    value: DelimiterValue::Solidus,
+                }));
+            }
+
             tok!("str") => return Ok(Value::Str(self.parse()?)),
 
             tok!("num") => return self.parse_numeric_value(),

crates/swc_css_codegen/tests/fixture/packages/bootstrap_5_1_3/output.min.css

@@ -6,12 +6,18 @@ div {
     prop: fn(value);
     prop: fn(value)fn(value);
     prop: value, value;
+    prop: value ,value;
     prop: value,value;
+    prop: value , value;
     prop: 100%100%;
     prop: "string""string";
     prop: #ccc#ccc;
     prop: url(value)url(value);
     prop: (value)(value);
     prop: {value}{value};
     prop: [value][value];
+    prop: center/1em;
+    prop: center/ 1em;
+    prop: center /1em;
+    prop: center / 1em;
 }