Stream that inlines critical CSS in HTML. Looks at the used CSS on a page and only inlines the CSS that's used.
var inline = require('inline-critical-css')
var pump = require('pump')
var css = `
.red { color: red }
`
var html = `
<html>
<head></head>
<body class="red">Hello world</body>
</html>
`
var stream = inline(css)
pump(stream, process.stdout)
stream.end(html)hyperstream makes it easy to chain HTML transforms together. I was too lazy to write my own parser + selector so hence it being a stream. Also I use streams for this stuff anyway so it would make a lot of sense to keep it as a stream.
Ideally we'd only inline the "above the fold" CSS, but that requires knowing which tokens are "above the fold". This would require looking at a specific viewport, and checking which tokens are used (e.g. headless chrome or similar). We opted for a slightly simpler option, which hopefully works out well enough for most cases.
Inlining fancy selectors (e.g. .foo:not(:first-child)) is really hard to
determine statically if it's used. The best way to do so would be to launch a
headless chrome instance - but that requires a fair amount of compute
resources. So we don't. If you want that behavior, we recommend writing a
headless chrome module specifically for that (and let us know, we'd be
interested in that!)
Create a transform stream that inlines critical CSS in HTML.