Merge pull request #807 from maizzle/fix-removeunusedcss

maizzle · Oct 16, 2022 · 5e2eefd · 5e2eefd
2 parents 4b7db1d + 690e7e8
commit 5e2eefd
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 20 deletions.
diff --git a/src/transformers/index.js b/src/transformers/index.js
@@ -54,7 +54,7 @@ exports.addURLParams = (html, config) => addURLParams(html, config, true)
 exports.preventWidows = (html, config) => preventWidows(html, config)
 exports.replaceStrings = (html, config) => replaceStrings(html, config, true)
 exports.safeClassNames = (html, config) => safeClassNames(html, config, true)
-exports.removeUnusedCSS = (html, config) => removeUnusedCSS(html, config)
+exports.removeUnusedCSS = (html, config) => removeUnusedCSS(html, config, true)
 exports.removeAttributes = (html, config) => removeAttributes(html, config, true)
 exports.attributeToStyle = (html, config) => attributeToStyle(html, config, true)
 exports.removeInlineSizes = (html, config) => removeInlineSizes(html, config, true)

diff --git a/src/transformers/removeUnusedCss.js b/src/transformers/removeUnusedCss.js
@@ -1,19 +1,23 @@
 const {comb} = require('email-comb')
 const {get, merge} = require('lodash')
 
-module.exports = async (html, config = {}) => {
+module.exports = async (html, config = {}, direct = false) => {
   if (get(config, 'removeUnusedCSS') === false) {
     return html
   }
 
+  if (!direct && !get(config, 'removeUnusedCSS')) {
+    return html
+  }
+
   const safelist = [
     '*body*', // Gmail
     '.gmail*', // Gmail
     '.apple*', // Apple Mail
     '.ios*', // Mail on iOS
     '.ox-*', // Open-Xchange
     '.outlook*', // Outlook.com
-    '.ogs*', // Outlook.com
+    '[data-ogs*', // Outlook.com
     '.bloop_container', // Airmail
     '.Singleton', // Apple Mail 10
     '.unused', // Notes 8

diff --git a/test/test-posthtml.js b/test/test-posthtml.js
@@ -77,18 +77,25 @@ test('components', async t => {
   const html = await renderString(source, options)
 
   t.is(html.trim(), `<p>Variable from attribute: Example</p>
-<p>Variable from locals attribute: bar</p><p class="hidden">Variable from page: prod</p>
+
+<p>Variable from locals attribute: bar</p>
+
+
+<p class="hidden">Variable from page: prod</p>
+
   <p>Variable from attribute: Nested component</p>
-<p>Variable from locals attribute: bar (nested)</p><p>Variable from page (nested): prod</p>`)
+
+<p>Variable from locals attribute: bar (nested)</p>
+
+
+<p>Variable from page (nested): prod</p>`)
 })
 
 test('fetch component', async t => {
   const source = `<extends src="test/stubs/layouts/basic.html">
   <block name="template">
     <fetch url="test/stubs/data.json">
-      <each loop="user in response">
-[[ user.name + (loop.last ? '' : ', ') ]]
-      </each>
+      <each loop="user in response">[[ user.name + (loop.last ? '' : ', ') ]]</each>
     </fetch>
   </block>
 </extends>`

diff --git a/test/test-tostring.js b/test/test-tostring.js
@@ -124,9 +124,6 @@ test('preserves css in marked style tags (tailwindcss)', async t => {
         [data-ogsc] .inexistent {
           color: #ef4444;
         }
-        [data-ogsc] .ogsc:hidden {
-          display: none;
-        }
         div > u + .body .gmail-android-block {
           display: block !important;
         }
@@ -141,16 +138,18 @@ test('preserves css in marked style tags (tailwindcss)', async t => {
   </html>`
 
   const html = await renderString(source, {
+    maizzle: {
+      removeUnusedCSS: true
+    },
     // So that we don't compile twice
     tailwind: {
       compiled: ''
     }
   })
 
-  t.true(html.includes('[data-ogsc] .ogsc:hidden'))
-  t.false(html.includes('[data-ogsc] .inexistent'))
-
+  t.true(html.replace(/[\n\s\r]+/g, '').includes('div{text-transform:uppercase'))
   t.true(html.includes('div > u + .body .gmail-android-block'))
+  t.true(html.includes('[data-ogsc] .inexistent'))
   t.true(html.includes('u + #body a'))
 })
 

diff --git a/test/test-transformers.js b/test/test-transformers.js
@@ -98,38 +98,38 @@ test('remove unused CSS', async t => {
     </body>
   </html>`
 
-  const result1 = `<!DOCTYPE html>
+  const enabledResult = `<!DOCTYPE html>
   <html>
     <head>
       <style>
         .foo {color: red}
-        .bar-baz {color: blue}
       </style>
     </head>
     <body>
       <div class="foo {{ test }}">test div with some text</div>
     </body>
   </html>`
 
-  const result2 = `<!DOCTYPE html>
+  const withOptionsResult = `<!DOCTYPE html>
   <html>
     <head>
       <style>
         .foo {color: red}
+        .bar-baz {color: blue}
       </style>
     </head>
     <body>
       <div class="foo {{ test }}">test div with some text</div>
     </body>
   </html>`
 
-  const enabled = await Maizzle.removeUnusedCSS(html, true)
+  const enabled = await Maizzle.removeUnusedCSS(html)
   const disabled = await Maizzle.removeUnusedCSS(html, {removeUnusedCSS: false})
   const withOptions = await Maizzle.removeUnusedCSS(html, {whitelist: ['.bar*']})
 
-  t.is(enabled, result2)
+  t.is(enabled, enabledResult)
   t.is(disabled, html)
-  t.is(withOptions, result1)
+  t.is(withOptions, withOptionsResult)
 })
 
 test('remove unused CSS (disabled)', async t => {