fix: ensure removeUnusedCSS is opt in

maizzle · Mar 20, 2023 · f105672 · f105672
1 parent 9512065
commit f105672
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 29 deletions.
diff --git a/src/transformers/index.js b/src/transformers/index.js
@@ -53,7 +53,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,10 +1,12 @@
 const {comb} = require('email-comb')
-const {get, merge} = require('lodash')
+const {get, merge, isEmpty, isObject} = require('lodash')
 const removeInlinedClasses = require('./removeInlinedSelectors')
 
-module.exports = async (html, config = {}) => {
-  // If it's explicitly disabled, return the HTML
-  if (get(config, 'removeUnusedCSS') === false) {
+module.exports = async (html, config = {}, direct = false) => {
+  config = direct ? config : get(config, 'removeUnusedCSS')
+
+  // Don't purge CSS if `removeUnusedCSS` is not set
+  if (!config || (isObject(config) && isEmpty(config))) {
     return html
   }
 
@@ -34,9 +36,13 @@ module.exports = async (html, config = {}) => {
     whitelist: [...get(config, 'whitelist', []), ...safelist]
   }
 
-  const options = merge(defaultOptions, get(config, 'removeUnusedCSS', config))
+  const options = merge(defaultOptions, get(config, 'removeUnusedCSS', {}))
 
-  html = await removeInlinedClasses(html, options)
+  /**
+   * Remove possibly inlined selectors, as long as we're not calling
+   * this function directly, i.e. Maizzle.removeUnusedCSS()
+   *  */
+  html = direct ? html : await removeInlinedClasses(html, options)
 
   return comb(html, options).result
 }
diff --git a/test/test-posthtml.js b/test/test-posthtml.js
@@ -60,8 +60,7 @@ test('components', async t => {
         components: {
           folders: ['test/stubs/layouts', 'test/stubs/components']
         }
-      },
-      removeUnusedCSS: false
+      }
     },
     beforeRender(html, config) {
       config.foo = 'bar'
@@ -90,8 +89,7 @@ test('components (legacy)', async t => {
             delimiters: ['[[', ']]']
           }
         }
-      },
-      removeUnusedCSS: false
+      }
     }
   }
 

diff --git a/test/test-transformers.js b/test/test-transformers.js
@@ -163,12 +163,12 @@ test('remove unused CSS', async t => {
     <head>
       <style>
         @media (screen) {
-          .ignore {color: yellow}
+          .should-remove {color: yellow}
         }
         .foo {color: red}
         .foo:hover {color: blue}
         .bar-baz {color: blue}
-        .baz {color: white}
+        .should-remove {color: white}
       </style>
     </head>
     <body>
@@ -182,32 +182,19 @@ test('remove unused CSS', async t => {
       <style>
         .foo {color: red}
         .foo:hover {color: blue}
-        .bar-baz {color: blue}</style>
-    </head>
-    <body>
-      <div class="foo {{ test }}">test div with some text</div>
-    </body>
-  </html>`
-
-  const unsetResult = `<!DOCTYPE html>
-  <html>
-    <head>
-      <style>
-        .foo {color: red}
-        .foo:hover {color: blue}</style>
+        .bar-baz {color: blue}
+      </style>
     </head>
     <body>
       <div class="foo {{ test }}">test div with some text</div>
     </body>
   </html>`
 
-  const disabled = await Maizzle.removeUnusedCSS(html, {removeUnusedCSS: false})
+  const disabled = await Maizzle.removeUnusedCSS(html)
   const withOptions = await Maizzle.removeUnusedCSS(html, {whitelist: ['.bar*']})
-  const unset = await Maizzle.removeUnusedCSS(html)
 
   t.is(disabled, html)
   t.is(withOptions, withOptionsResult)
-  t.is(unset, unsetResult)
 })
 
 test('remove attributes', async t => {