Necrotizing Pineapple Music

    inline-critical-css

    2.0.0 • Public • Published

    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

    Install

    npm i inline-critical-css

    DownloadsWeekly Downloads

    49

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    13.8 kB

    Total Files

    7

    Last publish

    Collaborators

    • ahdinosaur
    • bret
    • goto-bus-stop
    • hughsk
    • jongacnik
    • s3ththompson
    • yoshuawuyts
    • zhouhancheng