Skip to content

Commit

Permalink
fix: ensure removeUnusedCSS is opt in
Browse files Browse the repository at this point in the history
  • Loading branch information
cossssmin committed Mar 20, 2023
1 parent 9512065 commit f105672
Show file tree
Hide file tree
Showing 4 changed files with 20 additions and 29 deletions.
2 changes: 1 addition & 1 deletion src/transformers/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
18 changes: 12 additions & 6 deletions src/transformers/removeUnusedCss.js
Original file line number Diff line number Diff line change
@@ -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
}

Expand Down Expand Up @@ -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
}
6 changes: 2 additions & 4 deletions test/test-posthtml.js
Original file line number Diff line number Diff line change
Expand Up @@ -60,8 +60,7 @@ test('components', async t => {
components: {
folders: ['test/stubs/layouts', 'test/stubs/components']
}
},
removeUnusedCSS: false
}
},
beforeRender(html, config) {
config.foo = 'bar'
Expand Down Expand Up @@ -90,8 +89,7 @@ test('components (legacy)', async t => {
delimiters: ['[[', ']]']
}
}
},
removeUnusedCSS: false
}
}
}

Expand Down
23 changes: 5 additions & 18 deletions test/test-transformers.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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 => {
Expand Down

0 comments on commit f105672

Please sign in to comment.