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