inline-critical-css

Inline critical CSS in HTML

Usage no npm install needed!

<script type="module">
  import inlineCriticalCss from 'https://cdn.skypack.dev/inline-critical-css';
</script>

README

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.

Why doesn't it inline my fancy selectors?

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!)

API

transformStream = inline(css)

Create a transform stream that inlines critical CSS in HTML.

See Also

License

MIT