Repository: Automattic/juice (js)

Issue:
CSS gradients should not be added as attribute values
Currently, `juice.styleToAttribute` will add anything inside a `background-image` property to the value of the `background=""` attribute.

This means that given this:

```html
<doctype html>
<html>
  <head>
    <style>
      .bg-gradient { background-image: linear-gradient(to right, #fdc830, #f37335); }
    </style>
  </head>
  <body>
    <table class="bg-gradient">
      <tr>
        <td>Lorem ipsum</td>
      </tr>
    </table>
  </body>
</html>
```

You will get this table:

```html
<table class="bg-gradient" style="background-image: linear-gradient(to right, #fdc830, #f37335);" background="linear-gradient(to right, #fdc830, #f37335)">
  <tr>
    <td>Lorem ipsum</td>
  </tr>
</table>
```

The `background=""` attribute can only use an image path/URL, so this is unnecessary.

Looking at [`lib/inline.js:268`](https://github.com/Automattic/juice/blob/master/lib/inline.js#L268), this would just need a simple check for a `gradient` string in the `value`. If matched, simply don't add the attribute.

I'll be doing some tests today and will hopefully send a PR this week.

Pull request:
Prevent css gradient in attribute
If merged, closes #319.

Patch:
diff --git a/lib/inline.js b/lib/inline.js
index 0066068..df761c1 100644
--- a/lib/inline.js
+++ b/lib/inline.js
@@ -266,7 +266,10 @@ function inlineDocument($, css, options) {
           var prop = juiceClient.styleToAttribute[el.styleProps[i].prop];
           var value = el.styleProps[i].value;
           if (prop === 'background') {
-            value = extractBackgroundUrl(value)
+            value = extractBackgroundUrl(value);
+          }
+          if (/(linear|radial)-gradient\(/i.test(value)) {
+            continue;
           }
           $(el).attr(prop, value);
         }


Test patch:
diff --git a/test/cases/juice-content/prevent-css-gradient-in-attribute-issue319.css b/test/cases/juice-content/prevent-css-gradient-in-attribute-issue319.css
new file mode 100644
index 0000000..e69de29
diff --git a/test/cases/juice-content/prevent-css-gradient-in-attribute-issue319.html b/test/cases/juice-content/prevent-css-gradient-in-attribute-issue319.html
new file mode 100644
index 0000000..a846179
--- /dev/null
+++ b/test/cases/juice-content/prevent-css-gradient-in-attribute-issue319.html
@@ -0,0 +1,29 @@
+<html>
+<head>
+    <style>
+        .bg-linear-gradient { 
+            background-image: linear-gradient(to right, #fdc830, #f37335); 
+        }
+        .bg-radial-gradient { 
+            background-image: radial-gradient(circle at 100%, #333, #333 50%, #eee 75%, #333 75%); 
+        }
+        .bg-image-sanity-check-one {
+            background-image: url('linear-gradient.png');
+        }
+        .bg-image-sanity-check-two {
+            background-image: url('radial-gradient.png');
+        }
+    </style>
+</head>
+<body>
+    <table class="bg-linear-gradient">
+        <tr>
+            <th class="bg-radial-gradient">Lorem</th>
+        </tr>
+        <tr>
+            <td class="bg-image-sanity-check-one">Ipsum</td>
+            <td class="bg-image-sanity-check-two">Dolor</td>
+        </tr>
+    </table>
+</body>
+</html>
\ No newline at end of file
diff --git a/test/cases/juice-content/prevent-css-gradient-in-attribute-issue319.json b/test/cases/juice-content/prevent-css-gradient-in-attribute-issue319.json
new file mode 100644
index 0000000..617dc75
--- /dev/null
+++ b/test/cases/juice-content/prevent-css-gradient-in-attribute-issue319.json
@@ -0,0 +1,4 @@
+{
+    "url": "./",
+    "removeStyleTags": true
+}
diff --git a/test/cases/juice-content/prevent-css-gradient-in-attribute-issue319.out b/test/cases/juice-content/prevent-css-gradient-in-attribute-issue319.out
new file mode 100644
index 0000000..a6d28f4
--- /dev/null
+++ b/test/cases/juice-content/prevent-css-gradient-in-attribute-issue319.out
@@ -0,0 +1,16 @@
+<html>
+<head>
+    
+</head>
+<body>
+    <table class="bg-linear-gradient" style="background-image: linear-gradient(to right, #fdc830, #f37335);">
+        <tr>
+            <th class="bg-radial-gradient" style="background-image: radial-gradient(circle at 100%, #333, #333 50%, #eee 75%, #333 75%);">Lorem</th>
+        </tr>
+        <tr>
+            <td class="bg-image-sanity-check-one" style="background-image: url('linear-gradient.png');" background="linear-gradient.png">Ipsum</td>
+            <td class="bg-image-sanity-check-two" style="background-image: url('radial-gradient.png');" background="radial-gradient.png">Dolor</td>
+        </tr>
+    </table>
+</body>
+</html>
\ No newline at end of file