Skip to content

Commit d89b60a

Browse files
kdy1kdy1
authoredDec 23, 2023
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
·
v1.11.13swc_core@v0.106.1
1 parent eea8ba3 commit d89b60a

File tree

8 files changed

+415
-2
lines changed

8 files changed

+415
-2
lines changed
 

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

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.test {
2+
border-color: hsla(var(--ds-gray-200-value), 1);
3+
--ds-gray-200: hsla(var(--ds-gray-200-value), 1);
4+
}

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

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.test {
2+
border-color: hsla(var(--ds-gray-200-value), 1);
3+
--ds-gray-200: hsla(var(--ds-gray-200-value), 1);
4+
}

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

+4-2
Original file line numberDiff line numberDiff line change
@@ -726,8 +726,10 @@ where
726726
}
727727
}
728728

729-
if is!(self, ",") && is_legacy_syntax {
730-
values.push(ComponentValue::Delimiter(self.parse()?));
729+
if (is!(self, ",") || has_variable) && is_legacy_syntax {
730+
if is!(self, ",") {
731+
values.push(ComponentValue::Delimiter(self.parse()?));
732+
}
731733

732734
self.input.skip_ws();
733735

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

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.test {
2+
border-color: hsla(var(--ds-gray-200-value), 1);
3+
}

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

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

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

+177
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
{
2+
"type": "Stylesheet",
3+
"span": {
4+
"start": 1,
5+
"end": 63,
6+
"ctxt": 0
7+
},
8+
"rules": [
9+
{
10+
"type": "QualifiedRule",
11+
"span": {
12+
"start": 1,
13+
"end": 63,
14+
"ctxt": 0
15+
},
16+
"prelude": {
17+
"type": "SelectorList",
18+
"span": {
19+
"start": 1,
20+
"end": 6,
21+
"ctxt": 0
22+
},
23+
"children": [
24+
{
25+
"type": "ComplexSelector",
26+
"span": {
27+
"start": 1,
28+
"end": 6,
29+
"ctxt": 0
30+
},
31+
"children": [
32+
{
33+
"type": "CompoundSelector",
34+
"span": {
35+
"start": 1,
36+
"end": 6,
37+
"ctxt": 0
38+
},
39+
"nestingSelector": null,
40+
"typeSelector": null,
41+
"subclassSelectors": [
42+
{
43+
"type": "ClassSelector",
44+
"span": {
45+
"start": 1,
46+
"end": 6,
47+
"ctxt": 0
48+
},
49+
"text": {
50+
"type": "Ident",
51+
"span": {
52+
"start": 2,
53+
"end": 6,
54+
"ctxt": 0
55+
},
56+
"value": "test",
57+
"raw": "test"
58+
}
59+
}
60+
]
61+
}
62+
]
63+
}
64+
]
65+
},
66+
"block": {
67+
"type": "SimpleBlock",
68+
"span": {
69+
"start": 7,
70+
"end": 63,
71+
"ctxt": 0
72+
},
73+
"name": {
74+
"type": "PreservedToken",
75+
"span": {
76+
"start": 7,
77+
"end": 8,
78+
"ctxt": 0
79+
},
80+
"token": "LBrace"
81+
},
82+
"value": [
83+
{
84+
"type": "Declaration",
85+
"span": {
86+
"start": 13,
87+
"end": 60,
88+
"ctxt": 0
89+
},
90+
"name": {
91+
"type": "Ident",
92+
"span": {
93+
"start": 13,
94+
"end": 25,
95+
"ctxt": 0
96+
},
97+
"value": "border-color",
98+
"raw": "border-color"
99+
},
100+
"value": [
101+
{
102+
"type": "Function",
103+
"span": {
104+
"start": 27,
105+
"end": 60,
106+
"ctxt": 0
107+
},
108+
"name": {
109+
"type": "Ident",
110+
"span": {
111+
"start": 27,
112+
"end": 31,
113+
"ctxt": 0
114+
},
115+
"value": "hsla",
116+
"raw": "hsla"
117+
},
118+
"value": [
119+
{
120+
"type": "Function",
121+
"span": {
122+
"start": 32,
123+
"end": 56,
124+
"ctxt": 0
125+
},
126+
"name": {
127+
"type": "Ident",
128+
"span": {
129+
"start": 32,
130+
"end": 35,
131+
"ctxt": 0
132+
},
133+
"value": "var",
134+
"raw": "var"
135+
},
136+
"value": [
137+
{
138+
"type": "DashedIdent",
139+
"span": {
140+
"start": 36,
141+
"end": 55,
142+
"ctxt": 0
143+
},
144+
"value": "ds-gray-200-value",
145+
"raw": "--ds-gray-200-value"
146+
}
147+
]
148+
},
149+
{
150+
"type": "Delimiter",
151+
"span": {
152+
"start": 56,
153+
"end": 57,
154+
"ctxt": 0
155+
},
156+
"value": ","
157+
},
158+
{
159+
"type": "Number",
160+
"span": {
161+
"start": 58,
162+
"end": 59,
163+
"ctxt": 0
164+
},
165+
"value": 1.0,
166+
"raw": "1"
167+
}
168+
]
169+
}
170+
],
171+
"important": null
172+
}
173+
]
174+
}
175+
}
176+
]
177+
}

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

+221
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,221 @@
1+
2+
x Stylesheet
3+
,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
4+
1 | ,-> .test {
5+
2 | | border-color: hsla(var(--ds-gray-200-value), 1);
6+
3 | `-> }
7+
`----
8+
9+
x Rule
10+
,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
11+
1 | ,-> .test {
12+
2 | | border-color: hsla(var(--ds-gray-200-value), 1);
13+
3 | `-> }
14+
`----
15+
16+
x QualifiedRule
17+
,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
18+
1 | ,-> .test {
19+
2 | | border-color: hsla(var(--ds-gray-200-value), 1);
20+
3 | `-> }
21+
`----
22+
23+
x SelectorList
24+
,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
25+
1 | .test {
26+
: ^^^^^
27+
2 | border-color: hsla(var(--ds-gray-200-value), 1);
28+
`----
29+
30+
x ComplexSelector
31+
,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
32+
1 | .test {
33+
: ^^^^^
34+
2 | border-color: hsla(var(--ds-gray-200-value), 1);
35+
`----
36+
37+
x CompoundSelector
38+
,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
39+
1 | .test {
40+
: ^^^^^
41+
2 | border-color: hsla(var(--ds-gray-200-value), 1);
42+
`----
43+
44+
x SubclassSelector
45+
,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
46+
1 | .test {
47+
: ^^^^^
48+
2 | border-color: hsla(var(--ds-gray-200-value), 1);
49+
`----
50+
51+
x ClassSelector
52+
,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
53+
1 | .test {
54+
: ^^^^^
55+
2 | border-color: hsla(var(--ds-gray-200-value), 1);
56+
`----
57+
58+
x Ident
59+
,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
60+
1 | .test {
61+
: ^^^^
62+
2 | border-color: hsla(var(--ds-gray-200-value), 1);
63+
`----
64+
65+
x SimpleBlock
66+
,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
67+
1 | ,-> .test {
68+
2 | | border-color: hsla(var(--ds-gray-200-value), 1);
69+
3 | `-> }
70+
`----
71+
72+
x LBrace
73+
,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
74+
1 | .test {
75+
: ^
76+
2 | border-color: hsla(var(--ds-gray-200-value), 1);
77+
`----
78+
79+
x ComponentValue
80+
,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
81+
1 | .test {
82+
2 | border-color: hsla(var(--ds-gray-200-value), 1);
83+
: ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
84+
3 | }
85+
`----
86+
87+
x Declaration
88+
,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
89+
1 | .test {
90+
2 | border-color: hsla(var(--ds-gray-200-value), 1);
91+
: ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
92+
3 | }
93+
`----
94+
95+
x DeclarationName
96+
,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
97+
1 | .test {
98+
2 | border-color: hsla(var(--ds-gray-200-value), 1);
99+
: ^^^^^^^^^^^^
100+
3 | }
101+
`----
102+
103+
x Ident
104+
,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
105+
1 | .test {
106+
2 | border-color: hsla(var(--ds-gray-200-value), 1);
107+
: ^^^^^^^^^^^^
108+
3 | }
109+
`----
110+
111+
x ComponentValue
112+
,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
113+
1 | .test {
114+
2 | border-color: hsla(var(--ds-gray-200-value), 1);
115+
: ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
116+
3 | }
117+
`----
118+
119+
x Color
120+
,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
121+
1 | .test {
122+
2 | border-color: hsla(var(--ds-gray-200-value), 1);
123+
: ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
124+
3 | }
125+
`----
126+
127+
x Function
128+
,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
129+
1 | .test {
130+
2 | border-color: hsla(var(--ds-gray-200-value), 1);
131+
: ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
132+
3 | }
133+
`----
134+
135+
x Ident
136+
,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
137+
1 | .test {
138+
2 | border-color: hsla(var(--ds-gray-200-value), 1);
139+
: ^^^^
140+
3 | }
141+
`----
142+
143+
x ComponentValue
144+
,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
145+
1 | .test {
146+
2 | border-color: hsla(var(--ds-gray-200-value), 1);
147+
: ^^^^^^^^^^^^^^^^^^^^^^^^
148+
3 | }
149+
`----
150+
151+
x Function
152+
,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
153+
1 | .test {
154+
2 | border-color: hsla(var(--ds-gray-200-value), 1);
155+
: ^^^^^^^^^^^^^^^^^^^^^^^^
156+
3 | }
157+
`----
158+
159+
x Ident
160+
,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
161+
1 | .test {
162+
2 | border-color: hsla(var(--ds-gray-200-value), 1);
163+
: ^^^
164+
3 | }
165+
`----
166+
167+
x ComponentValue
168+
,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
169+
1 | .test {
170+
2 | border-color: hsla(var(--ds-gray-200-value), 1);
171+
: ^^^^^^^^^^^^^^^^^^^
172+
3 | }
173+
`----
174+
175+
x DashedIdent
176+
,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
177+
1 | .test {
178+
2 | border-color: hsla(var(--ds-gray-200-value), 1);
179+
: ^^^^^^^^^^^^^^^^^^^
180+
3 | }
181+
`----
182+
183+
x ComponentValue
184+
,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
185+
1 | .test {
186+
2 | border-color: hsla(var(--ds-gray-200-value), 1);
187+
: ^
188+
3 | }
189+
`----
190+
191+
x Delimiter
192+
,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
193+
1 | .test {
194+
2 | border-color: hsla(var(--ds-gray-200-value), 1);
195+
: ^
196+
3 | }
197+
`----
198+
199+
x ComponentValue
200+
,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
201+
1 | .test {
202+
2 | border-color: hsla(var(--ds-gray-200-value), 1);
203+
: ^
204+
3 | }
205+
`----
206+
207+
x AlphaValue
208+
,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
209+
1 | .test {
210+
2 | border-color: hsla(var(--ds-gray-200-value), 1);
211+
: ^
212+
3 | }
213+
`----
214+
215+
x Number
216+
,-[$DIR/tests/fixture/vercel-2175/input.css:1:1]
217+
1 | .test {
218+
2 | border-color: hsla(var(--ds-gray-200-value), 1);
219+
: ^
220+
3 | }
221+
`----

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

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

0 commit comments

Comments
 (0)
Please sign in to comment.