node package manager


inline-critical-css stability

npm version build status downloads js-standard-style

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 = `
    <body class="red">Hello world</body>
var stream = inline(css)
pump(stream, process.stdout)


Why is this is a stream?

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.

Why does it inline all CSS used on a page?

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.


transformStream = inline(css)

Create a transform stream that inlines critical CSS in HTML.

See Also