Repository: Automattic/juice
Pull request #428 (2022-10-25 04:29:23)

Add support for 'auto' as value for height/width properties
**What?**
Add support for `auto` as value for `height`/`width` properties
**Why?**
Scenarios like Outllook Windows support setting `width` only as attribute but resetting to `auto` is not possible with the current behavior, this allows to add `width="auto"` when applicable.

```
> mocha --reporter spec && npm run test-typescript

  ✓ cli parses options
  ✓ cli no css (502ms)
  ✓ cli css included (307ms)
  ✓ cli options included (283ms)
  ✓ cli supports codeBlock (281ms)
  ✓ extracting selectors
  ✓ selector specificity comparison
  ✓ selector specificity calculator
  ✓ property comparison based on selector specificity
  ✓ property toString
  ✓ parse simple css into a object structure
  ✓ parse complex css into a object structure
  ✓ test excludedProperties setting
  ✓ test juice
  ✓ test consecutive important rules
  ✓ test * specificity
  ✓ test style attributes priority
  ✓ test style attributes and important priority
  ✓ test style attributes and important priority
  ✓ test that preserved text order is stable
  ✓ alpha
  ✓ cascading
  ✓ cheerio
  ✓ class+id
  ✓ class
  ✓ css-quotes
  ✓ direct-descendents
  ✓ ejs-unterminated
  ✓ ejs
  ✓ empty
  ✓ entities
  ✓ hbs-unterminated
  ✓ hbs
  ✓ id
  ✓ identical-important
  ✓ ignore-pseudos
  ✓ important-specificity
  ✓ important
  ✓ improper-syntax-affect-cascade-issue44
  ✓ inline-specificity
  ✓ integration
  ✓ linear-gradient-space-issue-226
  ✓ media
  ✓ multiple-properties-occourences
  ✓ normalize
  ✓ not-xhtml
  ✓ php
  ✓ preserve-events
  ✓ propertyorder
  ✓ pseudo-specificity
  ✓ regression-media
  ✓ regression-selector-newline
  ✓ shorthand
  ✓ specificity
  ✓ specificitygte10
  ✓ style-preservation
  ✓ tag
  ✓ templates
  ✓ yui-reset
  ✓ juice(html)
  ✓ juice(document) with htmlparser2
  ✓ juice-content/embed
  ✓ juice-content/empty-style-tag
Not found, skipping: not-a-file.css
  ✓ juice-content/file-missing
  ✓ juice-content/font-face-preserve
  ✓ juice-content/font-quotes
  ✓ juice-content/height-attr
  ✓ juice-content/important
  ✓ juice-content/insert-preserve-fragment
  ✓ juice-content/keyframes-preserve
  ✓ juice-content/lt-in-comments-issue216
  ✓ juice-content/media-preserve
  ✓ juice-content/ms-filter-syntax-issue74
  ✓ juice-content/no-css
  ✓ juice-content/non-visual
  ✓ juice-content/prevent-css-gradient-in-attribute-issue319
  ✓ juice-content/pseudo-elements-and-width-attr
  ✓ juice-content/pseudo-elements
  ✓ juice-content/pseudo-selector-preserve
  ✓ juice-content/relative-url (101ms)
  ✓ juice-content/table-attr
  ✓ juice-content/width-attr
  ✓ juice-content/xml
  ✓ doctype
  ✓ no_css
  ✓ two_styles
  ✓ remote_url (54ms)
  ✓ spaces_in_path
  ✓ inlineContent

  89 passing (2s)
```


Patch:
diff --git a/lib/inline.js b/lib/inline.js
index 3a44beb..4ffaa05 100644
--- a/lib/inline.js
+++ b/lib/inline.js
@@ -293,9 +293,9 @@ function inlineDocument($, css, options) {
           if (options.preserveImportant) {
             value = removeImportant(value);
           }
-          if (value.match(/px/)) {
-            var pxSize = value.replace('px', '');
-            $(el).attr(dimension, pxSize);
+          if (value.match(/(px|auto)/)) {
+            var size = value.replace('px', '');
+            $(el).attr(dimension, size);
             return;
           }
           if (juiceClient.tableElements.indexOf(elName) > -1 && value.match(/\%/)) {


Test patch:
diff --git a/test/cases/juice-content/height-attr.html b/test/cases/juice-content/height-attr.html
index b679528..1951f07 100644
--- a/test/cases/juice-content/height-attr.html
+++ b/test/cases/juice-content/height-attr.html
@@ -7,6 +7,9 @@
     td.percentage, th.percentage, img.percentage {
         height: 50%;
     }
+    td.auto, th.auto, img.auto {
+        height: auto;
+    }
 </style>
 </head>
 <body>
@@ -19,6 +22,9 @@
             <th class="percentage">
                 header 2
             </th>
+            <th class="auto">
+                header 3
+            </th>
         </tr>
         <tr>
             <td class="px">
@@ -27,9 +33,13 @@
             <td class="percentage">
                 high
             </td>
+            <td class="auto">
+                high
+            </td>
         </tr>
     </table>
     <img src="#" alt="high" class="px">
     <img src="#" alt="high" class="percentage">
+    <img src="#" alt="high" class="auto">
 </body>
 </html>
diff --git a/test/cases/juice-content/height-attr.out b/test/cases/juice-content/height-attr.out
index d660be3..40b1ea6 100644
--- a/test/cases/juice-content/height-attr.out
+++ b/test/cases/juice-content/height-attr.out
@@ -12,6 +12,9 @@
             <th class="percentage" style="height: 50%;" height="50%">
                 header 2
             </th>
+            <th class="auto" style="height: auto;" height="auto">
+                header 3
+            </th>
         </tr>
         <tr>
             <td class="px" style="height: 200px;" height="200">
@@ -20,9 +23,13 @@
             <td class="percentage" style="height: 50%;" height="50%">
                 high
             </td>
+            <td class="auto" style="height: auto;" height="auto">
+                high
+            </td>
         </tr>
     </table>
     <img src="#" alt="high" class="px" style="height: 200px;" height="200">
     <img src="#" alt="high" class="percentage" style="height: 50%;">
+    <img src="#" alt="high" class="auto" style="height: auto;" height="auto">
 </body>
 </html>
diff --git a/test/cases/juice-content/width-attr.html b/test/cases/juice-content/width-attr.html
index ad0e922..46f87c7 100644
--- a/test/cases/juice-content/width-attr.html
+++ b/test/cases/juice-content/width-attr.html
@@ -7,6 +7,9 @@
     td.percentage, th.percentage, img.percentage {
         width: 50%;
     }
+    td.auto, th.auto, img.auto {
+        width: auto;
+    }
 </style>
 </head>
 <body>
@@ -19,6 +22,9 @@
             <th class="percentage">
                 header 2
             </th>
+            <th class="auto">
+                header 3
+            </th>
         </tr>
         <tr>
             <td class="px">
@@ -27,9 +33,14 @@
             <td class="percentage">
                 wide
             </td>
+            <td class="auto">
+                wide
+            </td>
         </tr>
     </table>
     <img src="#" alt="wide" class="px">
     <img src="#" alt="wide" class="percentage">
+    <img src="#" alt="wide" class="auto">
 </body>
 </html>
+
diff --git a/test/cases/juice-content/width-attr.out b/test/cases/juice-content/width-attr.out
index 283c010..5b9bb05 100644
--- a/test/cases/juice-content/width-attr.out
+++ b/test/cases/juice-content/width-attr.out
@@ -12,6 +12,9 @@
             <th class="percentage" style="width: 50%;" width="50%">
                 header 2
             </th>
+            <th class="auto" style="width: auto;" width="auto">
+                header 3
+            </th>
         </tr>
         <tr>
             <td class="px" style="width: 200px;" width="200">
@@ -20,9 +23,13 @@
             <td class="percentage" style="width: 50%;" width="50%">
                 wide
             </td>
+            <td class="auto" style="width: auto;" width="auto">
+                wide
+            </td>
         </tr>
     </table>
     <img src="#" alt="wide" class="px" style="width: 200px;" width="200">
     <img src="#" alt="wide" class="percentage" style="width: 50%;">
+    <img src="#" alt="wide" class="auto" style="width: auto;" width="auto">
 </body>
 </html>