Fix for #356 - preserveImportant: true adds !important to table attri…

…butes
Automattic · May 14, 2021 · 0641866 · 0641866
1 parent bfd4991
commit 0641866
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 5 deletions.
diff --git a/lib/inline.js b/lib/inline.js
@@ -203,7 +203,7 @@ function inlineDocument($, css, options) {
             }
 
             var important = value.match(/!important$/) !== null;
-            if (important && !options.preserveImportant) value = value.replace(/\s*!important$/, '');
+            if (important && !options.preserveImportant) value = removeImportant(value);
             // adds line number and column number for the properties as "additionalPriority" to the
             // properties because in CSS the position directly affect the priority.
             var additionalPriority = [style[i].position.start.line, style[i].position.start.col];
@@ -289,13 +289,17 @@ function inlineDocument($, css, options) {
     if (juiceClient[dimension + 'Elements'].indexOf(elName) > -1) {
       for (var i in el.styleProps) {
         if (el.styleProps[i].prop === dimension) {
-          if (el.styleProps[i].value.match(/px/)) {
-            var pxSize = el.styleProps[i].value.replace('px', '');
+          var value = el.styleProps[i].value;
+          if (options.preserveImportant) {
+            value = removeImportant(value);
+          }
+          if (value.match(/px/)) {
+            var pxSize = value.replace('px', '');
             $(el).attr(dimension, pxSize);
             return;
           }
-          if (juiceClient.tableElements.indexOf(elName) > -1 && el.styleProps[i].value.match(/\%/)) {
-            $(el).attr(dimension, el.styleProps[i].value);
+          if (juiceClient.tableElements.indexOf(elName) > -1 && value.match(/\%/)) {
+            $(el).attr(dimension, value);
             return;
           }
         }
@@ -319,6 +323,9 @@ function inlineDocument($, css, options) {
         if (styleProps.indexOf(el.styleProps[i].prop) > -1) {
           var prop = juiceClient.styleToAttribute[el.styleProps[i].prop];
           var value = el.styleProps[i].value;
+          if (options.preserveImportant) {
+            value = removeImportant(value);
+          }
           if (prop === 'background') {
             value = extractBackgroundUrl(value);
           }
@@ -332,6 +339,10 @@ function inlineDocument($, css, options) {
   }
 }
 
+function removeImportant(value) {
+  return value.replace(/\s*!important$/, '')
+}
+
 function findVariableValue(el, variable) {
   while (el) {
     if (variable in el.styleProps) {

diff --git a/test/cases/juice-content/important.html b/test/cases/juice-content/important.html
@@ -7,11 +7,16 @@
         span {
             color: blue;
         }
+        table {
+          background-color: black !important;
+          width: 100% !important;
+        }
     </style>
 </head>
 <body>
     <p>hi</p>
     <span>there</span>
     <p style="color: blue !important">again</p>
+    <table></table>
 </body>
 </html>
diff --git a/test/cases/juice-content/important.out b/test/cases/juice-content/important.out
@@ -6,5 +6,6 @@
     <p style="color: red !important;">hi</p>
     <span style="color: blue;">there</span>
     <p style="color: blue !important;">again</p>
+    <table style="background-color: black !important; width: 100% !important;" width="100%" bgcolor="black"></table>
 </body>
 </html>