swc-project/swc
1
1
Fork 0
mirror of https://github.com/swc-project/swc.git synced 2024-12-25 06:36:08 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

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

Browse Source 
**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
This commit is contained in:
Donny/강동윤 2023-12-23 12:39:54 +09:00 committed by GitHub
parent eea8ba3fe1
commit d89b60a000
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 415 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
crates/swc_css_compat/tests/color-legacy/vercel-2175/input.css Normal file
View File

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

4
crates/swc_css_compat/tests/color-legacy/vercel-2175/input.expect.css Normal file
View File

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

6
crates/swc_css_parser/src/parser/values_and_units/mod.rs
View File

@ -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();

3
crates/swc_css_parser/tests/fixture/vercel-2175/input.css Normal file
View File

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

1
crates/swc_css_parser/tests/fixture/vercel-2175/leading-comments.json Normal file
View File

@ -0,0 +1 @@
{}

177
crates/swc_css_parser/tests/fixture/vercel-2175/output.json Normal file
View File

@ -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
}
]
}
}
]
}

221
crates/swc_css_parser/tests/fixture/vercel-2175/span.swc-stderr Normal file
View File

@ -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 | }
`----

1
crates/swc_css_parser/tests/fixture/vercel-2175/trailing-comments.json Normal file
View File

@ -0,0 +1 @@
{}