parse html and remove css rules that don't match
npm install --save postcss-remove-unused
const postcss = require('postcss');
const removeUnused = require('postcss-remove-unused');
postcss([
removeUnused({html: '<h1 class="foo">hello</h1>'})
]).process(css);
postcss-remove-unused parses your html string with cheerio and removes any css rules that don't match elements in the html. if there's a css rule it can't determine statically, such as pseudoclasses, it's left in.
if you need to conditionally preserve some blocks of css (e.g. some pages have lazy-loaded content), surround the css with /* pru:startPreserve(flag) */
and /* pru:endPreserve(flag) */
comments, then set the flag name in preserveFlags
in the options:
h1 {
font-size: 3em;
}
/* pru:startPreserve(lazy) */
.lazy-load {
color: red;
}
/* pru:endPreserve(lazy) */
const postcss = require('postcss');
const removeUnused = require('postcss-remove-unused');
function renderCss(css, html, hasLazyLoad) {
return postcss([
removeUnused({
html,
preserveFlags: {
lazy: hasLazyLoad
}
})
]).process(css);
}
the selectorFilter
option can be used to filter modifier classes, which may not be in the HTML when postcss is run, from selectors. in the example below, the .tooltip.open .tooltip-tip
block would normally be discarded; but filtering the .open
modifier from it's selector, ensures it is kept.
.tooltip .tooltip-tip {
display: none;
}
.tooltip.open .tooltip-tip {
display: block;
}
require('postcss');
const removeUnused = require('postcss-remove-unused');
postcss([
removeUnused({
html: '<div class="tooltip><span class="tooltip-target">term</span><div class="tooltip-tip">Term definition</div></div>',
selectorFilter: selector => selector.replace(/(\.tooltip)\.open/g, '$1'),
})
]).process(css);
postcss-remove-unused is heavily inspired by uncss. there's a few major differences:
- postcss-remove-unused can only be used as a postcss plugin, and doesn't support standalone use or loading html from files
- uncss uses phantomjs, whereas postcss-remove-unused uses cheerio. in practice, this means:
- uncss can determine what css rules are being used far more accurately and almost always produces smaller output
- uncss can load multiple stylesheets
- uncss only needs to be given the html file and can load stylesheets from
<link>
and<style>
tags - postcss-remove-unused is an order of magnitude faster; on moderately-sized html and css it typically runs in less than a second
- uncss is far more configurable and battle-tested
isc. © matt brennan