Stream that inlines critical CSS in HTML. Looks at the used CSS on a page and only inlines the CSS that's used.
varinline=require('inline-critical-css')varpump=require('pump')varcss=` .red { color: red }`varhtml=` <html> <head></head> <body class="red">Hello world</body> </html>`varstream=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.