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.

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