Accumulating a Whitelist
Perhaps you want to take one giant CSS file and purge it against multiple HTML sources, thus retaining any selectors that appear in any HTML source. This also applies when using Puppeteer to invoke different application states to ensure that TrapCSS takes every state into account before cleaning the CSS. The idea is rather simple:
- Run TrapCSS against each HTML source.
- Accumulate a whitelist from each result.
- Run TrapCSS against an empty HTML string, relying only on the accumulated whitelist.
import trapcss from 'trapcss'
// super mega-huge combined stylesheet
let css = `
em {
color: red;
}
p {
font-weight: bold;
}
.foo {
font-size: 10pt;
}
`
// html of page (or state) A
let htmlA = `
<html>
<head></head>
<body>
<em>Hello World!</em>
</body>
</html>
`
// html of page (or state) B
let htmlB = `
<html>
<head></head>
<body>
<p>Soft Kitties!</p>
</body>
</html>
`
// whitelist
let whitelist = new Set()
let resA = trapcss({
css,
html: htmlA,
})
// accumulate retained A selectors
resA.sels.forEach(sel => whitelist.add(sel))
let resB = trapcss({
css,
html: htmlB,
})
// accumulate retained B selectors
resB.sels.forEach(sel => whitelist.add(sel))
// final purge relying only on accumulated whitelist
let cleaned = trapcss({
html: '',
css,
shouldDrop: sel => !whitelist.has(sel),
})
console.log(cleaned.css)em{color: red;}p{font-weight: bold;} |
© Art Deco™ 2020 |