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 {
-                    values.push(ComponentValue::Delimiter(self.parse()?));
+                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
+          }
+        ]
+      }
+    }
+  ]
+}