fix(css/parser): Fix parsing of hsla(var(--foo), 1) (#8443)

**Description:**

```css
.test {
    border-color: hsla(var(--ds-gray-200-value), 1);
}
```

should be compiled as

```css

.test {
    border-color: hsla(var(--ds-gray-200-value), 1);
}
```

Previously, it was

```
.test {
    border-color: hsla(var(--ds-gray-200-value),);
}

```


**Related issue:**

 - https://linear.app/vercel/issue/PACK-2175

crates/swc_css_compat/tests/color-legacy/vercel-2175/input.css

@@ -0,0 +1,4 @@
+.test {
+    border-color: hsla(var(--ds-gray-200-value), 1);
+    --ds-gray-200: hsla(var(--ds-gray-200-value), 1);
+}

crates/swc_css_compat/tests/color-legacy/vercel-2175/input.expect.css

@@ -0,0 +1,4 @@
+.test {
+  border-color: hsla(var(--ds-gray-200-value), 1);
+  --ds-gray-200: hsla(var(--ds-gray-200-value), 1);
+}

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

@@ -726,8 +726,10 @@ where
                     }
                 }
 
-                if is!(self, ",") && is_legacy_syntax {
+                if (is!(self, ",") || has_variable) && is_legacy_syntax {
+                    if is!(self, ",") {
                         values.push(ComponentValue::Delimiter(self.parse()?));
+                    }
 
                     self.input.skip_ws();
 

crates/swc_css_parser/tests/fixture/vercel-2175/input.css

@@ -0,0 +1,3 @@
+.test {
+    border-color: hsla(var(--ds-gray-200-value), 1);
+}

crates/swc_css_parser/tests/fixture/vercel-2175/leading-comments.json

@@ -0,0 +1 @@
+{}

crates/swc_css_parser/tests/fixture/vercel-2175/output.json

@@ -0,0 +1,177 @@
+{
+  "type": "Stylesheet",
+  "span": {
+    "start": 1,
+    "end": 63,
+    "ctxt": 0
+  },
+  "rules": [
+    {
+      "type": "QualifiedRule",
+      "span": {
+        "start": 1,
+        "end": 63,
+        "ctxt": 0
+      },
+      "prelude": {
+        "type": "SelectorList",
+        "span": {
+          "start": 1,
+          "end": 6,
+          "ctxt": 0
+        },
+        "children": [
+          {
+            "type": "ComplexSelector",
+            "span": {
+              "start": 1,
+              "end": 6,
+              "ctxt": 0
+            },
+            "children": [
+              {
+                "type": "CompoundSelector",
+                "span": {
+                  "start": 1,
+                  "end": 6,
+                  "ctxt": 0
+                },
+                "nestingSelector": null,
+                "typeSelector": null,
+                "subclassSelectors": [
+                  {
+                    "type": "ClassSelector",
+                    "span": {
+                      "start": 1,
+                      "end": 6,
+                      "ctxt": 0
+                    },
+                    "text": {
+                      "type": "Ident",
+                      "span": {
+                        "start": 2,
+                        "end": 6,
+                        "ctxt": 0
+                      },
+                      "value": "test",
+                      "raw": "test"
+                    }
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      "block": {
+        "type": "SimpleBlock",
+        "span": {
+          "start": 7,
+          "end": 63,
+          "ctxt": 0
+        },
+        "name": {
+          "type": "PreservedToken",
+          "span": {
+            "start": 7,
+            "end": 8,
+            "ctxt": 0
+          },
+          "token": "LBrace"
+        },
+        "value": [
+          {
+            "type": "Declaration",
+            "span": {
+              "start": 13,
+              "end": 60,
+              "ctxt": 0
+            },
+            "name": {
+              "type": "Ident",
+              "span": {
+                "start": 13,
+                "end": 25,
+                "ctxt": 0
+              },
+              "value": "border-color",
+              "raw": "border-color"
+            },
+            "value": [
+              {
+                "type": "Function",
+                "span": {
+                  "start": 27,
+                  "end": 60,
+                  "ctxt": 0
+                },
+                "name": {
+                  "type": "Ident",
+                  "span": {
+                    "start": 27,
+                    "end": 31,
+                    "ctxt": 0
+                  },
+                  "value": "hsla",
+                  "raw": "hsla"
+                },
+                "value": [
+                  {
+                    "type": "Function",
+                    "span": {
+                      "start": 32,
+                      "end": 56,
+                      "ctxt": 0
+                    },
+                    "name": {
+                      "type": "Ident",
+                      "span": {
+                        "start": 32,
+                        "end": 35,
+                        "ctxt": 0
+                      },
+                      "value": "var",
+                      "raw": "var"
+                    },
+                    "value": [
+                      {
+                        "type": "DashedIdent",
+                        "span": {
+                          "start": 36,
+                          "end": 55,
+                          "ctxt": 0
+                        },
+                        "value": "ds-gray-200-value",
+                        "raw": "--ds-gray-200-value"
+                      }
+                    ]
+                  },
+                  {
+                    "type": "Delimiter",
+                    "span": {
+                      "start": 56,
+                      "end": 57,
+                      "ctxt": 0
+                    },
+                    "value": ","
+                  },
+                  {
+                    "type": "Number",
+                    "span": {
+                      "start": 58,
+                      "end": 59,
+                      "ctxt": 0
+                    },
+                    "value": 1.0,
+                    "raw": "1"
+                  }
+                ]
+              }
+            ],
+            "important": null
+          }
+        ]
+      }
+    }
+  ]
+}

crates/swc_css_parser/tests/fixture/vercel-2175/span.swc-stderr

@@ -0,0 +1,221 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
+ 1 | ,-> .test {
+ 2 | |       border-color: hsla(var(--ds-gray-200-value), 1);
+ 3 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
+ 1 | ,-> .test {
+ 2 | |       border-color: hsla(var(--ds-gray-200-value), 1);
+ 3 | `-> }
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
+ 1 | ,-> .test {
+ 2 | |       border-color: hsla(var(--ds-gray-200-value), 1);
+ 3 | `-> }
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
+ 1 | .test {
+   : ^^^^^
+ 2 |     border-color: hsla(var(--ds-gray-200-value), 1);
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
+ 1 | .test {
+   : ^^^^^
+ 2 |     border-color: hsla(var(--ds-gray-200-value), 1);
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
+ 1 | .test {
+   : ^^^^^
+ 2 |     border-color: hsla(var(--ds-gray-200-value), 1);
+   `----
+
+  x SubclassSelector
+   ,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
+ 1 | .test {
+   : ^^^^^
+ 2 |     border-color: hsla(var(--ds-gray-200-value), 1);
+   `----
+
+  x ClassSelector
+   ,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
+ 1 | .test {
+   : ^^^^^
+ 2 |     border-color: hsla(var(--ds-gray-200-value), 1);
+   `----
+
+  x Ident
+   ,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
+ 1 | .test {
+   :  ^^^^
+ 2 |     border-color: hsla(var(--ds-gray-200-value), 1);
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
+ 1 | ,-> .test {
+ 2 | |       border-color: hsla(var(--ds-gray-200-value), 1);
+ 3 | `-> }
+   `----
+
+  x LBrace
+   ,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
+ 1 | .test {
+   :       ^
+ 2 |     border-color: hsla(var(--ds-gray-200-value), 1);
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
+ 1 | .test {
+ 2 |     border-color: hsla(var(--ds-gray-200-value), 1);
+   :     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+ 3 | }
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
+ 1 | .test {
+ 2 |     border-color: hsla(var(--ds-gray-200-value), 1);
+   :     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+ 3 | }
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
+ 1 | .test {
+ 2 |     border-color: hsla(var(--ds-gray-200-value), 1);
+   :     ^^^^^^^^^^^^
+ 3 | }
+   `----
+
+  x Ident
+   ,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
+ 1 | .test {
+ 2 |     border-color: hsla(var(--ds-gray-200-value), 1);
+   :     ^^^^^^^^^^^^
+ 3 | }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
+ 1 | .test {
+ 2 |     border-color: hsla(var(--ds-gray-200-value), 1);
+   :                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+ 3 | }
+   `----
+
+  x Color
+   ,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
+ 1 | .test {
+ 2 |     border-color: hsla(var(--ds-gray-200-value), 1);
+   :                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+ 3 | }
+   `----
+
+  x Function
+   ,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
+ 1 | .test {
+ 2 |     border-color: hsla(var(--ds-gray-200-value), 1);
+   :                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+ 3 | }
+   `----
+
+  x Ident
+   ,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
+ 1 | .test {
+ 2 |     border-color: hsla(var(--ds-gray-200-value), 1);
+   :                   ^^^^
+ 3 | }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
+ 1 | .test {
+ 2 |     border-color: hsla(var(--ds-gray-200-value), 1);
+   :                        ^^^^^^^^^^^^^^^^^^^^^^^^
+ 3 | }
+   `----
+
+  x Function
+   ,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
+ 1 | .test {
+ 2 |     border-color: hsla(var(--ds-gray-200-value), 1);
+   :                        ^^^^^^^^^^^^^^^^^^^^^^^^
+ 3 | }
+   `----
+
+  x Ident
+   ,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
+ 1 | .test {
+ 2 |     border-color: hsla(var(--ds-gray-200-value), 1);
+   :                        ^^^
+ 3 | }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
+ 1 | .test {
+ 2 |     border-color: hsla(var(--ds-gray-200-value), 1);
+   :                            ^^^^^^^^^^^^^^^^^^^
+ 3 | }
+   `----
+
+  x DashedIdent
+   ,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
+ 1 | .test {
+ 2 |     border-color: hsla(var(--ds-gray-200-value), 1);
+   :                            ^^^^^^^^^^^^^^^^^^^
+ 3 | }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
+ 1 | .test {
+ 2 |     border-color: hsla(var(--ds-gray-200-value), 1);
+   :                                                ^
+ 3 | }
+   `----
+
+  x Delimiter
+   ,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
+ 1 | .test {
+ 2 |     border-color: hsla(var(--ds-gray-200-value), 1);
+   :                                                ^
+ 3 | }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
+ 1 | .test {
+ 2 |     border-color: hsla(var(--ds-gray-200-value), 1);
+   :                                                  ^
+ 3 | }
+   `----
+
+  x AlphaValue
+   ,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
+ 1 | .test {
+ 2 |     border-color: hsla(var(--ds-gray-200-value), 1);
+   :                                                  ^
+ 3 | }
+   `----
+
+  x Number
+   ,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
+ 1 | .test {
+ 2 |     border-color: hsla(var(--ds-gray-200-value), 1);
+   :                                                  ^
+ 3 | }
+   `----

crates/swc_css_parser/tests/fixture/vercel-2175/trailing-comments.json

@@ -0,0 +1 @@
+{}