Merge pull request #526 from dminkovsky/fix-482

Fix #482: "Error when encoded quotes are used in html attribute"
Automattic · Mar 2, 2025 · 6f0b957 · 6f0b957
2 parents ff05e36 + 5d42299
commit 6f0b957
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -46,6 +46,8 @@ All juice methods take an options object that can contain any of these propertie
 
 * `applyWidthAttributes` - whether to use any CSS pixel widths to create `width` attributes on elements set in `juice.widthElements`. Defaults to `true`.
 
+* `decodeStyleAttributes` - whether to decode the value of `style=` attributes. Defaults to `false`.
+
 * `extraCss` - extra css to apply to the file. Defaults to `""`.
 
 * `insertPreservedExtraCss` - whether to insert into the document any preserved `@media` or `@font-face` content from `extraCss` when using `preserveMediaQueries`, `preserveFontFaces` or `preserveKeyFrames`. When `true` order of preference to append the `<style>` element is into `head`, then `body`, then at the end of the document. When a `string` the value is treated as a CSS/jQuery/cheerio selector, and when found, the `<style>` tag will be appended to the end of the first match. Defaults to `true`.

diff --git a/juice.d.ts b/juice.d.ts
@@ -50,6 +50,7 @@ declare namespace juice {
     xmlMode?: boolean;
     preserveImportant?: boolean;
     resolveCSSVariables?: boolean;
+    decodeStyleAttributes?: boolean;
   }
 
   interface WebResourcesOptions {

diff --git a/lib/cli.js b/lib/cli.js
@@ -118,6 +118,10 @@ cli.options = {
     pMap: 'webResourcesStrict',
     map: 'strict',
     def: 'see docs for web-resource-inliner strict',
+    coercion: JSON.parse },
+  'decode-style-attributes': {
+    pMap: 'decodeStyleAttributes',
+    def: 'decode the value of `style=` attributes?',
     coercion: JSON.parse }
 };
 

diff --git a/lib/inline.js b/lib/inline.js
@@ -1,5 +1,7 @@
 'use strict';
 
+var { decode } = require('entities');
+
 var utils = require('./utils');
 var numbers = require('./numbers');
 var variables = require('./variables');
@@ -149,7 +151,11 @@ function inlineDocument($, css, options) {
 
         // if the element has inline styles, fake selector with topmost specificity
         if ($(el).attr(styleAttributeName)) {
-          var cssText = '* { ' + $(el).attr(styleAttributeName) + ' } ';
+          var styleAttributeValue = $(el).attr(styleAttributeName);
+          var cssStyleAttributeValue = options.decodeStyleAttributes
+            ? decode(styleAttributeValue)
+            : styleAttributeValue;
+          var cssText = '* { ' + cssStyleAttributeValue + ' } ';
           addProps(utils.parseCSS(cssText)[0][1], new utils.Selector('<style>', true));
         }
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -37,6 +37,7 @@
   "dependencies": {
     "cheerio": "^1.0.0",
     "commander": "^12.1.0",
+    "entities": "^4.5.0",
     "mensch": "^0.3.4",
     "slick": "^1.12.2",
     "web-resource-inliner": "^7.0.0"

diff --git a/test/cli.js b/test/cli.js
@@ -27,6 +27,7 @@ it('cli parses options', function(done) {
   assert.strictEqual(parseArgs({'applyAttributesTableElements': 'true'}).applyAttributesTableElements, true);
   assert.strictEqual(parseArgs({'xmlMode': 'true'}).xmlMode, true);
   assert.strictEqual(parseArgs({'resolveCSSVariables': 'true'}).resolveCSSVariables, true);
+  assert.strictEqual(parseArgs({'decodeStyleAttributes': 'true'}).decodeStyleAttributes, true);
   assert.strictEqual(parseArgs({'webResourcesInlineAttribute': 'true'}).webResources.inlineAttribute, true);
   assert.strictEqual(parseArgs({'webResourcesImages': '12'}).webResources.images, 12);
   assert.strictEqual(parseArgs({'webResourcesLinks': 'true'}).webResources.links, true);

diff --git a/test/juice.test.js b/test/juice.test.js
@@ -192,3 +192,21 @@ it('test that preserved text order is stable', function() {
       utils.getPreservedText('div { color: red; } @media (min-width: 320px) { div { color: green; } } @media (max-width: 640px) { div { color: blue; } }', { mediaQueries: true }, juice.ignoredPseudos).replace(/\s+/g, ' '),
       ' @media (min-width: 320px) { div { color: green; } } @media (max-width: 640px) { div { color: blue; } } ');
 });
+
+it('can handle style attributes with html entities', function () {
+  // Throws without decodeStyleAttributes: true
+  assert.throws(function () {
+    juice(
+      '<style type="text/css">div {color: red;}</style><div style="font-family:&quot;Open Sans&quot;, sans-serif;"></div>'
+    );
+  });
+
+  // Expected results with decodeStyleAttributes: true
+  assert.deepEqual(
+    juice(
+      '<style type="text/css">div {color: red;}</style><div style="font-family:&quot;Open Sans&quot;, sans-serif;"></div>',
+      { decodeStyleAttributes: true }
+    ),
+    "<div style=\"color: red; font-family: 'Open Sans', sans-serif;\"></div>"
+  );
+});