Look for outdated gradient syntax only inside radial-gradient block (#…

…1017) * Look for outdated gradient syntax only inside radial-gradient block * Increase package size
postcss · Apr 11, 2018 · c860ba6 · c860ba6
1 parent c4b213f
commit c860ba6
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 13 deletions.
diff --git a/lib/processor.js b/lib/processor.js
@@ -2,6 +2,7 @@ const Value = require('./value');
 
 const OLD_LINEAR = /(^|[^-])linear-gradient\(\s*(top|left|right|bottom)/i;
 const OLD_RADIAL = /(^|[^-])radial-gradient\(\s*\d+(\w*|%)\s+\d+(\w*|%)\s*,/i;
+const RADIAL_BLOCK = /\(((?:[^)(]+|\((?:[^)(]+|\([^)(]*\))*\))*)\)/i;
 
 const SIZES = [
     'width', 'height', 'min-width', 'max-width',
@@ -88,18 +89,24 @@ class Processor {
                         'instead of `0 0, closest-side`.',
                         { node: decl }
                     );
-                } else if (/[^-]cover/.test(decl.value)) {
-                    result.warn(
-                        'Gradient has outdated direction syntax. ' +
-                        'Replace `cover` to `farthest-corner`.',
-                        { node: decl }
-                    );
-                } else if (/[^-]contain/.test(decl.value)) {
-                    result.warn(
-                        'Gradient has outdated direction syntax. ' +
-                        'Replace `contain` to `closest-side`.',
-                        { node: decl }
-                    );
+                } else {
+                    const match = decl.value.match(RADIAL_BLOCK);
+
+                    if (match) {
+                        if (/cover/.test(match[1])) {
+                            result.warn(
+                                'Gradient has outdated direction syntax. ' +
+                                'Replace `cover` to `farthest-corner`.',
+                                { node: decl }
+                            );
+                        } else if (/contain/.test(match[1])) {
+                            result.warn(
+                                'Gradient has outdated direction syntax. ' +
+                                'Replace `contain` to `closest-side`.',
+                                { node: decl }
+                            );
+                        }
+                    }
                 }
             }
             if (decl.prop === 'text-emphasis-position') {

diff --git a/package.json b/package.json
@@ -59,7 +59,7 @@
   "size-limit": [
     {
       "path": "build/lib/autoprefixer.js",
-      "limit": "96 KB"
+      "limit": "97 KB"
     }
   ],
   "eslintConfig": {

diff --git a/test/cases/gradient.css b/test/cases/gradient.css
@@ -107,3 +107,12 @@ div {
 .no-div {
     background: linear-gradient(black);
 }
+
+.background-shorthand {
+    background: radial-gradient(#FFF, transparent) 0 0 / cover no-repeat #F0F;
+}
+
+.background-advanced {
+    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%),
+                url(path/to/image.jpg) 50%/cover;
+}
diff --git a/test/cases/gradient.out.css b/test/cases/gradient.out.css
@@ -186,3 +186,18 @@ div {
     background: -o-linear-gradient(black);
     background: linear-gradient(black);
 }
+
+.background-shorthand {
+    background: -webkit-radial-gradient(#FFF, transparent) 0 0 / cover no-repeat #F0F;
+    background: -o-radial-gradient(#FFF, transparent) 0 0 / cover no-repeat #F0F;
+    background: radial-gradient(#FFF, transparent) 0 0 / cover no-repeat #F0F;
+}
+
+.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%),
+                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%),
+                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%),
+                url(path/to/image.jpg) 50%/cover;
+}