autoprefixer 10.4.11 → 10.4.12

package/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,23 @@ 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
@@ -358,7 +368,16 @@ class Gradient extends Value {
    */
   old(prefix) {
     if (prefix === '-webkit-') {
-      let type = this.name === 'linear-gradient' ? 'linear' : 'radial'
+      let type
+      if (this.name === 'linear-gradient') {
+        type = 'linear'
+      } else if (this.name === 'repeating-linear-gradient') {
+        type = 'repeating-linear'
+      } else if (this.name === 'repeating-radial-gradient') {
+        type = 'repeating-radial'
+      } else {
+        type = 'radial'
+      }
       let string = '-gradient'
       let regexp = utils.regexp(
         `-webkit-(${type}-gradient|gradient\\(\\s*${type})`,
@@ -403,7 +422,7 @@ Gradient.names = [
 ]
 
 Gradient.directions = {
-  top: 'bottom',
+  top: 'bottom', // default value
   left: 'right',
   bottom: 'top',
   right: 'left'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "autoprefixer",
-  "version": "10.4.11",
+  "version": "10.4.12",
   "description": "Parse CSS and add vendor prefixes to CSS rules using values from the Can I Use website",
   "engines": {
     "node": "^10 || ^12 || >=14"
@@ -35,8 +35,8 @@
     "postcss": "^8.1.0"
   },
   "dependencies": {
-    "browserslist": "^4.21.3",
-    "caniuse-lite": "^1.0.30001399",
+    "browserslist": "^4.21.4",
+    "caniuse-lite": "^1.0.30001407",
     "fraction.js": "^4.2.0",
     "normalize-range": "^0.1.2",
     "picocolors": "^1.0.0",