Better radial gradient direction fix

postcss · May 13, 2018 · 847bfd5 · 847bfd5
1 parent f020c4b
commit 847bfd5
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 9 deletions.
diff --git a/lib/hacks/gradient.js b/lib/hacks/gradient.js
@@ -148,6 +148,27 @@ class Gradient extends Value {
         return params;
     }
 
+    /**
+     * Look for at word
+     */
+    isRadial(params) {
+        let state = 'before';
+        for ( const param of params ) {
+            if ( state === 'before' && param.type === 'space' ) {
+                state = 'at';
+            } else if ( state === 'at' && param.value === 'at' ) {
+                state = 'after';
+            } else if ( state === 'after' && param.type === 'space' ) {
+                return true;
+            } else if ( param.type === 'div' ) {
+                break;
+            } else {
+                state = 'before';
+            }
+        }
+        return false;
+    }
+
     /**
      * Change new direction to old
      */
@@ -157,7 +178,7 @@ class Gradient extends Value {
                 this.fixDirection(params);
             } else if (params[0].value.indexOf('deg') !== -1) {
                 this.fixAngle(params);
-            } else if (params[2] && params[2].value === 'at') {
+            } else if (this.isRadial(params)) {
                 this.fixRadial(params);
             }
         }
@@ -195,12 +216,24 @@ class Gradient extends Value {
      * Fix radial direction syntax
      */
     fixRadial(params) {
-        const first = params[0];
+        const first = [];
         const second = [];
-        let i;
+        let a, b, c, i, next;
+
+        for (i = 0; i < params.length - 2; i++) {
+            a = params[i];
+            b = params[i + 1];
+            c = params[i + 2];
+            if (a.type === 'space' && b.value === 'at' && c.type === 'space') {
+                next = i + 3;
+                break;
+            } else {
+                first.push(a);
+            }
+        }
 
         let div;
-        for (i = 4; i < params.length; i++) {
+        for (i = next; i < params.length; i++) {
             if (params[i].type === 'div') {
                 div = params[i];
                 break;
@@ -209,7 +242,7 @@ class Gradient extends Value {
             }
         }
 
-        params.splice(0, i, ...second, div, first);
+        params.splice(0, i, ...second, div, ...first);
     }
 
     revertDirection(word) {

diff --git a/test/cases/gradient.css b/test/cases/gradient.css
@@ -117,3 +117,11 @@ div {
                 radial-gradient(#FFF, transparent),
                 url(path/to/image.jpg) 50%/cover;
 }
+
+.multiradial {
+    mask-image: radial-gradient(circle closest-corner at 100% 50%, #000, transparent);
+}
+
+.broken {
+    mask-image: radial-gradient(white, black);
+}
diff --git a/test/cases/gradient.out.css b/test/cases/gradient.out.css
@@ -169,8 +169,8 @@ div {
 }
 
 .cover {
-    background: -webkit-radial-gradient(ellipse cover at center, white, black);
-    background: -o-radial-gradient(ellipse cover at center, white, black);
+    background: -webkit-radial-gradient(center, ellipse cover, white, black);
+    background: -o-radial-gradient(center, ellipse cover, white, black);
     background: radial-gradient(ellipse cover at center, white, black);
 }
 
@@ -194,13 +194,23 @@ div {
 }
 
 .background-advanced {
-    background: -webkit-radial-gradient(ellipse farthest-corner at 5px 15px, rgba(214, 168, 18, 0.7) 0%, rgba(255, 21, 177, 0.7) 50%, rgba(210, 7, 148, 0.7) 95%),
+    background: -webkit-radial-gradient(5px 15px, ellipse farthest-corner, rgba(214, 168, 18, 0.7) 0%, rgba(255, 21, 177, 0.7) 50%, rgba(210, 7, 148, 0.7) 95%),
                 -webkit-radial-gradient(#FFF, transparent),
                 url(path/to/image.jpg) 50%/cover;
-    background: -o-radial-gradient(ellipse farthest-corner at 5px 15px, rgba(214, 168, 18, 0.7) 0%, rgba(255, 21, 177, 0.7) 50%, rgba(210, 7, 148, 0.7) 95%),
+    background: -o-radial-gradient(5px 15px, ellipse farthest-corner, rgba(214, 168, 18, 0.7) 0%, rgba(255, 21, 177, 0.7) 50%, rgba(210, 7, 148, 0.7) 95%),
                 -o-radial-gradient(#FFF, transparent),
                 url(path/to/image.jpg) 50%/cover;
     background: radial-gradient(ellipse farthest-corner at 5px 15px, rgba(214, 168, 18, 0.7) 0%, rgba(255, 21, 177, 0.7) 50%, rgba(210, 7, 148, 0.7) 95%),
                 radial-gradient(#FFF, transparent),
                 url(path/to/image.jpg) 50%/cover;
 }
+
+.multiradial {
+    -webkit-mask-image: -webkit-radial-gradient(100% 50%, circle closest-corner, #000, transparent);
+            mask-image: radial-gradient(circle closest-corner at 100% 50%, #000, transparent);
+}
+
+.broken {
+    -webkit-mask-image: -webkit-radial-gradient(white, black);
+            mask-image: radial-gradient(white, black);
+}