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-
polyfill
will use loadCSS polyfill instead of preferred media=print strategy (https://www.filamentgroup.com/lab/load-css-simpler/) -
preload
will add preload tags -
minify
will minify the styles before inlining (default: true) -
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 byhref
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)
-
License
MIT