fix: unitless zero for <angle> values are allowed in CSS gradients (#…

…1479)
postcss · Sep 20, 2022 · 2d286dd · 2d286dd
1 parent c338165
commit 2d286dd
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 12 deletions.
diff --git a/lib/hacks/gradient.js b/lib/hacks/gradient.js
@@ -14,9 +14,10 @@ class Gradient extends Value {
   replace(string, prefix) {
     let ast = parser(string)
     for (let node of ast.nodes) {
-      if (node.type === 'function' && node.value === this.name) {
+      let gradientName = this.name // gradient name
+      if (node.type === 'function' && node.value === gradientName) {
         node.nodes = this.newDirection(node.nodes)
-        node.nodes = this.normalize(node.nodes)
+        node.nodes = this.normalize(node.nodes, gradientName)
         if (prefix === '-webkit- old') {
           let changes = this.oldWebkit(node)
           if (!changes) {
@@ -56,7 +57,7 @@ class Gradient extends Value {
   /**
    * Normalize angle
    */
-  normalize(nodes) {
+  normalize(nodes, gradientName) {
     if (!nodes[0]) return nodes
 
     if (/-?\d+(.\d+)?grad/.test(nodes[0].value)) {
@@ -71,14 +72,20 @@ class Gradient extends Value {
       nodes[0].value = `${num}deg`
     }
 
-    if (nodes[0].value === '0deg') {
-      nodes = this.replaceFirst(nodes, 'to', ' ', 'top')
-    } else if (nodes[0].value === '90deg') {
-      nodes = this.replaceFirst(nodes, 'to', ' ', 'right')
-    } else if (nodes[0].value === '180deg') {
-      nodes = this.replaceFirst(nodes, 'to', ' ', 'bottom')
-    } else if (nodes[0].value === '270deg') {
-      nodes = this.replaceFirst(nodes, 'to', ' ', 'left')
+    if (gradientName === 'linear-gradient' || gradientName === 'repeating-linear-gradient') {
+      let direction = nodes[0].value
+
+      // Unitless zero for `<angle>` values are allowed in CSS gradients and transforms.
+      // Spec: https://github.com/w3c/csswg-drafts/commit/602789171429b2231223ab1e5acf8f7f11652eb3
+      if (direction === '0deg' || direction === '0') {
+        nodes = this.replaceFirst(nodes, 'to', ' ', 'top')
+      } else if (direction === '90deg') {
+        nodes = this.replaceFirst(nodes, 'to', ' ', 'right')
+      } else if (direction === '180deg') {
+        nodes = this.replaceFirst(nodes, 'to', ' ', 'bottom') // default value
+      } else if (direction === '270deg') {
+        nodes = this.replaceFirst(nodes, 'to', ' ', 'left')
+      }
     }
 
     return nodes
@@ -403,7 +410,7 @@ Gradient.names = [
 ]
 
 Gradient.directions = {
-  top: 'bottom',
+  top: 'bottom', // default value
   left: 'right',
   bottom: 'top',
   right: 'left'

diff --git a/test/cases/gradient.css b/test/cases/gradient.css
@@ -129,3 +129,21 @@ div {
 .loop {
   background-image: url("https://test.com/lol(test.png"), radial-gradient(yellow, black, yellow);
 }
+
+.unitless-zero {
+  background-image: linear-gradient(0, green, blue);
+  background: repeating-linear-gradient(0, blue, red 33.3%)
+}
+
+.zero-grad {
+  background: linear-gradient(0grad, green, blue);
+  background-image: repeating-linear-gradient(0grad, blue, red 33.3%)
+}
+
+.zero-rad {
+  background: linear-gradient(0rad, green, blue);
+}
+
+.zero-turn {
+  background: linear-gradient(0turn, green, blue);
+}
diff --git a/test/cases/gradient.out.css b/test/cases/gradient.out.css
@@ -220,3 +220,37 @@ div {
   background-image: url("https://test.com/lol(test.png"), -o-radial-gradient(yellow, black, yellow);
   background-image: url("https://test.com/lol(test.png"), radial-gradient(yellow, black, yellow);
 }
+
+.unitless-zero {
+  background-image: -webkit-gradient(linear, left bottom, left top, from(green), to(blue));
+  background-image: -webkit-linear-gradient(bottom, green, blue);
+  background-image: -o-linear-gradient(bottom, green, blue);
+  background-image: linear-gradient(0, green, blue);
+  background: -webkit-repeating-linear-gradient(bottom, blue, red 33.3%);
+  background: -o-repeating-linear-gradient(bottom, blue, red 33.3%);
+  background: repeating-linear-gradient(0, blue, red 33.3%)
+}
+
+.zero-grad {
+  background: -webkit-gradient(linear, left bottom, left top, from(green), to(blue));
+  background: -webkit-linear-gradient(bottom, green, blue);
+  background: -o-linear-gradient(bottom, green, blue);
+  background: linear-gradient(0grad, green, blue);
+  background-image: -webkit-repeating-linear-gradient(bottom, blue, red 33.3%);
+  background-image: -o-repeating-linear-gradient(bottom, blue, red 33.3%);
+  background-image: repeating-linear-gradient(0grad, blue, red 33.3%)
+}
+
+.zero-rad {
+  background: -webkit-gradient(linear, left bottom, left top, from(green), to(blue));
+  background: -webkit-linear-gradient(bottom, green, blue);
+  background: -o-linear-gradient(bottom, green, blue);
+  background: linear-gradient(0rad, green, blue);
+}
+
+.zero-turn {
+  background: -webkit-gradient(linear, left bottom, left top, from(green), to(blue));
+  background: -webkit-linear-gradient(bottom, green, blue);
+  background: -o-linear-gradient(bottom, green, blue);
+  background: linear-gradient(0turn, green, blue);
+}