fix: using lowercase tag names for width/height attributes

maizzle · Oct 20, 2022 · af9b6dc · af9b6dc
1 parent 876ce9a
commit af9b6dc
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 6 deletions.
diff --git a/src/transformers/inlineCss.js b/src/transformers/inlineCss.js
@@ -15,8 +15,8 @@ module.exports = async (html, config = {}, direct = false) => {
   if (get(config, 'inlineCSS') === true || !isEmpty(options)) {
     juice.styleToAttribute = get(options, 'styleToAttribute', {'vertical-align': 'valign'})
 
-    juice.widthElements = get(options, 'applyWidthAttributes', [])
-    juice.heightElements = get(options, 'applyHeightAttributes', [])
+    juice.widthElements = get(options, 'applyWidthAttributes', []).map(i => i.toUpperCase())
+    juice.heightElements = get(options, 'applyHeightAttributes', []).map(i => i.toUpperCase())
 
     juice.excludedProperties = ['--tw-shadow']
 

diff --git a/test/test-transformers.js b/test/test-transformers.js
@@ -58,8 +58,15 @@ test('remove inline background-color (with tags)', async t => {
 })
 
 test('inline CSS', async t => {
-  const html = `<div class="foo bar">test</div>`
+  const html = `
+    <table class="w-1 h-1">
+      <tr>
+        <td class="foo bar h-1">test</td>
+      </tr>
+    </table>`
   const css = `
+    .w-1 {width: 4px}
+    .h-1 {height: 4px}
     .foo {color: red}
     .bar {cursor: pointer}
   `
@@ -70,8 +77,8 @@ test('inline CSS', async t => {
     styleToAttribute: {
       'text-align': 'align'
     },
-    applyWidthAttributes: ['TABLE'],
-    applyHeightAttributes: ['TD'],
+    applyWidthAttributes: ['table'],
+    applyHeightAttributes: ['td'],
     mergeLonghand: ['div'],
     excludedProperties: ['cursor'],
     codeBlocks: {
@@ -82,7 +89,12 @@ test('inline CSS', async t => {
     }
   })
 
-  t.is(result, '<div class="foo bar" style="color: red;">test</div>')
+  t.is(result, `
+    <table class="w-1 h-1" style="width: 4px; height: 4px;" width="4">
+      <tr>
+        <td class="foo bar h-1" style="height: 4px; color: red;" height="4">test</td>
+      </tr>
+    </table>`)
 })
 
 test('inline CSS (disabled)', async t => {