Wondering what’s next for npm?Check out our public roadmap! »

    inline-critical
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/inline-critical package

    8.0.0 • Public • Published

    inline-critical

    Inline critical-path css and load the existing stylesheets asynchronously. Existing link tags will also be wrapped in <noscript> so the users with javascript disabled will see the site rendered normally.

    NPM version Build Status Dependency Status Download Coverage Status

    Installation

    This module is installed via npm:

    $ npm install inline-critical

    Example Usage

    const inline = require('inline-critical');
    const html = fs.readFileSync('test/fixtures/index.html', 'utf8');
    const critical = fs.readFileSync('test/fixtures/critical.css', 'utf8');
    const inlined = inline(html, critical);

    Example Usage ignoring stylesheet per regex

    const inline = require('inline-critical');
    const html = fs.readFileSync('test/fixtures/index.html', 'utf8');
    const critical = fs.readFileSync('test/fixtures/critical.css', 'utf8');
    
    const inlined = inline(html, critical, {
      ignore: [/bootstrap/],
    });

    CLI

    inline-critical works well with standard input. You can either pass in the html

    cat index.html | inline-critical critical.css

    or just flip things around

    cat critical.css | inline-critical index.html

    or pass in the file as an option

    inline-critical critical.css index.html

    without having to worry about the correct order

    inline-critical index.html critical.css

    Run inline-critical --help to see the list of options.

    inline(html, styles, options?)

    • html is the HTML you want to use to inline your critical styles, or any other styles
    • styles are the styles you're looking to inline
    • options is an optional configuration object
      • strategy select the preload strategy
      • extract will remove the inlined styles from any stylesheets referenced in the HTML
      • basePath will be used when extracting styles to find the files references by href attributes
      • ignore ignore matching stylesheets when inlining.
      • selector defines the element used by loadCSS as a reference for inlining.
      • noscript specifies position of noscript fallback ('body' - end of body, 'head' - end of head, false - no noscript)
      • replaceStylesheets takes an array of stylesheet hrefs to replace the original links in the document. (Used by critical when you extract uncritical css to a target file)

    PreloadStrategy

    The mechanism to use for lazy-loading stylesheets. [JS] indicates that a strategy requires JavaScript (falls back to <noscript>).

    • default: Move stylesheet links to the end of the document and insert preload meta tags in their place.
    • "body": Move all external stylesheet links to the end of the document.
    • "media": Load stylesheets asynchronously by adding media="print" and swap to media="all" once loaded (https://www.filamentgroup.com/lab/load-css-simpler/). [JS]
    • "swap": Convert stylesheet links to preloads that swap to rel="stylesheet" once loaded. [JS]
    • "polyfill": Inject LoadCSS and use it to load stylesheets. [JS]

    Adopted from critters

    License

    MIT

    Install

    npm i inline-critical

    DownloadsWeekly Downloads

    25,485

    Version

    8.0.0

    License

    MIT

    Unpacked Size

    30.4 kB

    Total Files

    8

    Last publish

    Collaborators

    • avatar