Repository: postcss/autoprefixer (js)

Issue:
Incorrect "outdated gradient" warning on `background` shorthand
Hi,

This input returns an incorrect warning:

```css
a { background: radial-gradient(#FFF, transparent) 0 0 / cover no-repeat #F0F; }
```

The error:

> 2:2	⚠  Gradient has outdated direction syntax. Replace `cover` to `farthest-corner`. [autoprefixer]

In this context, `cover` is used as the `background-size`, not the `radial-gradient` direction.

Pull request:
Look for outdated gradient syntax only inside radial-gradient block
Fixes #1015

Patch:
diff --git a/lib/processor.js b/lib/processor.js
index 9aea94d..9132b40 100644
--- 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
index 7cde481..5a98b4e 100644
--- a/package.json
+++ b/package.json
@@ -59,7 +59,7 @@
   "size-limit": [
     {
       "path": "build/lib/autoprefixer.js",
-      "limit": "96 KB"
+      "limit": "97 KB"
     }
   ],
   "eslintConfig": {


Test patch:
diff --git a/test/cases/gradient.css b/test/cases/gradient.css
index d297585..a54d6a3 100644
--- 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
index 8bed498..68a1f6a 100644
--- 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;
+}