node package manager

inline-critical-css

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.

Usage

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)

FAQ

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.

API

transformStream = inline(css)

Create a transform stream that inlines critical CSS in HTML.

See Also

License

MIT