inline-critical-css
Inline critical CSS in HTML
Last updated 10 months ago by goto-bus-stop .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install inline-critical-css 
SYNC missed versions from official npm registry.

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

Current Tags

  • 2.0.0                                ...           latest (10 months ago)

15 Versions

  • 2.0.0                                ...           10 months ago
  • 1.2.1                                ...           3 years ago
  • 1.2.0                                ...           3 years ago
  • 1.1.1                                ...           3 years ago
  • 1.1.0                                ...           3 years ago
  • 1.0.9                                ...           3 years ago
  • 1.0.8                                ...           3 years ago
  • 1.0.7                                ...           3 years ago
  • 1.0.6                                ...           3 years ago
  • 1.0.5                                ...           3 years ago
  • 1.0.4                                ...           3 years ago
  • 1.0.3                                ...           3 years ago
  • 1.0.2                                ...           3 years ago
  • 1.0.1                                ...           3 years ago
  • 1.0.0                                ...           3 years ago
Downloads
Today 0
This Week 2
This Month 19
Last Day 0
Last Week 16
Last Month 1
Dependencies (7)
Dev Dependencies (5)

Copyright 2014 - 2016 © taobao.org |