Skip to content

Commit 2d286dd

Browse files
yisiblyisibl
authored
fix: unitless zero for <angle> values are allowed in CSS gradients (#1479)
1 parent c338165 commit 2d286dd

3 files changed

Lines changed: 71 additions & 12 deletions

File tree

‎lib/hacks/gradient.js‎

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,10 @@ class Gradient extends Value {
1414
replace(string, prefix) {
1515
let ast = parser(string)
1616
for (let node of ast.nodes) {
17-
if (node.type === 'function' && node.value === this.name) {
17+
let gradientName = this.name // gradient name
18+
if (node.type === 'function' && node.value === gradientName) {
1819
node.nodes = this.newDirection(node.nodes)
19-
node.nodes = this.normalize(node.nodes)
20+
node.nodes = this.normalize(node.nodes, gradientName)
2021
if (prefix === '-webkit- old') {
2122
let changes = this.oldWebkit(node)
2223
if (!changes) {
@@ -56,7 +57,7 @@ class Gradient extends Value {
5657
/**
5758
* Normalize angle
5859
*/
59-
normalize(nodes) {
60+
normalize(nodes, gradientName) {
6061
if (!nodes[0]) return nodes
6162

6263
if (/-?\d+(.\d+)?grad/.test(nodes[0].value)) {
@@ -71,14 +72,20 @@ class Gradient extends Value {
7172
nodes[0].value = `${num}deg`
7273
}
7374

74-
if (nodes[0].value === '0deg') {
75-
nodes = this.replaceFirst(nodes, 'to', ' ', 'top')
76-
} else if (nodes[0].value === '90deg') {
77-
nodes = this.replaceFirst(nodes, 'to', ' ', 'right')
78-
} else if (nodes[0].value === '180deg') {
79-
nodes = this.replaceFirst(nodes, 'to', ' ', 'bottom')
80-
} else if (nodes[0].value === '270deg') {
81-
nodes = this.replaceFirst(nodes, 'to', ' ', 'left')
75+
if (gradientName === 'linear-gradient' || gradientName === 'repeating-linear-gradient') {
76+
let direction = nodes[0].value
77+
78+
// Unitless zero for `<angle>` values are allowed in CSS gradients and transforms.
79+
// Spec: https://github.com/w3c/csswg-drafts/commit/602789171429b2231223ab1e5acf8f7f11652eb3
80+
if (direction === '0deg' || direction === '0') {
81+
nodes = this.replaceFirst(nodes, 'to', ' ', 'top')
82+
} else if (direction === '90deg') {
83+
nodes = this.replaceFirst(nodes, 'to', ' ', 'right')
84+
} else if (direction === '180deg') {
85+
nodes = this.replaceFirst(nodes, 'to', ' ', 'bottom') // default value
86+
} else if (direction === '270deg') {
87+
nodes = this.replaceFirst(nodes, 'to', ' ', 'left')
88+
}
8289
}
8390

8491
return nodes
@@ -403,7 +410,7 @@ Gradient.names = [
403410
]
404411

405412
Gradient.directions = {
406-
top: 'bottom',
413+
top: 'bottom', // default value
407414
left: 'right',
408415
bottom: 'top',
409416
right: 'left'

‎test/cases/gradient.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,3 +129,21 @@ div {
129129
.loop {
130130
background-image: url("https://test.com/lol(test.png"), radial-gradient(yellow, black, yellow);
131131
}
132+
133+
.unitless-zero {
134+
background-image: linear-gradient(0, green, blue);
135+
background: repeating-linear-gradient(0, blue, red 33.3%)
136+
}
137+
138+
.zero-grad {
139+
background: linear-gradient(0grad, green, blue);
140+
background-image: repeating-linear-gradient(0grad, blue, red 33.3%)
141+
}
142+
143+
.zero-rad {
144+
background: linear-gradient(0rad, green, blue);
145+
}
146+
147+
.zero-turn {
148+
background: linear-gradient(0turn, green, blue);
149+
}

‎test/cases/gradient.out.css‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -220,3 +220,37 @@ div {
220220
background-image: url("https://test.com/lol(test.png"), -o-radial-gradient(yellow, black, yellow);
221221
background-image: url("https://test.com/lol(test.png"), radial-gradient(yellow, black, yellow);
222222
}
223+
224+
.unitless-zero {
225+
background-image: -webkit-gradient(linear, left bottom, left top, from(green), to(blue));
226+
background-image: -webkit-linear-gradient(bottom, green, blue);
227+
background-image: -o-linear-gradient(bottom, green, blue);
228+
background-image: linear-gradient(0, green, blue);
229+
background: -webkit-repeating-linear-gradient(bottom, blue, red 33.3%);
230+
background: -o-repeating-linear-gradient(bottom, blue, red 33.3%);
231+
background: repeating-linear-gradient(0, blue, red 33.3%)
232+
}
233+
234+
.zero-grad {
235+
background: -webkit-gradient(linear, left bottom, left top, from(green), to(blue));
236+
background: -webkit-linear-gradient(bottom, green, blue);
237+
background: -o-linear-gradient(bottom, green, blue);
238+
background: linear-gradient(0grad, green, blue);
239+
background-image: -webkit-repeating-linear-gradient(bottom, blue, red 33.3%);
240+
background-image: -o-repeating-linear-gradient(bottom, blue, red 33.3%);
241+
background-image: repeating-linear-gradient(0grad, blue, red 33.3%)
242+
}
243+
244+
.zero-rad {
245+
background: -webkit-gradient(linear, left bottom, left top, from(green), to(blue));
246+
background: -webkit-linear-gradient(bottom, green, blue);
247+
background: -o-linear-gradient(bottom, green, blue);
248+
background: linear-gradient(0rad, green, blue);
249+
}
250+
251+
.zero-turn {
252+
background: -webkit-gradient(linear, left bottom, left top, from(green), to(blue));
253+
background: -webkit-linear-gradient(bottom, green, blue);
254+
background: -o-linear-gradient(bottom, green, blue);
255+
background: linear-gradient(0turn, green, blue);
256+
}

0 commit comments

Comments
 (0)