diff --git a/src/transformers/inlineCss.js b/src/transformers/inlineCss.js
index f33483a5..00d9ea65 100644
--- 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
index 4e846b01..1d27652b 100644
--- 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 = `
test
`
+ const html = `
+ `
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, 'test
')
+ t.is(result, `
+ `)
})
test('inline CSS (disabled)', async t => {