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

eleventy-critical-css

0.2.2 • Public • Published

eleventy-critical-css

npm version npm downloads License

Eleventy plugin to extract and inline critical (above-the-fold) CSS from your HTML templates.

You can easily add this plugin to your Eleventy project in just two steps or you can use index.js as a reference for your own implementation of critical CSS!

Get Started

  1. Install eleventy-critical-css
npm install eleventy-critical-css --save
  1. Add the plugin to your Eleventy configuration in .eleventy.js
const criticalCss = require("eleventy-critical-css");

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(criticalCss);
};

Configuration

This plugin uses Critical by Addy Osmani to extract and inline critical from HTML templates i.e. any template with an output path ending in .html.

You can pass options to Critical as a second parameter of addPlugin:

const criticalCss = require("eleventy-critical-css");

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(criticalCss, {
    minify: true,
    height: 1080,
    width: 1920,
  });
};

You can see all options for Critical in the GitHub repository.

Default Options

The default options passed to Critical are:

{
  assetPaths: [path.dirname(outputPath)],
  base: this._config.dir.output,
  html: content,
  inline: true,
  minify: false,
  rebase: ({ originalUrl }) => originalUrl,
}

Where content and outputPath are the arguments passed to Eleventy transforms.

Install

npm i eleventy-critical-css

DownloadsWeekly Downloads

63

Version

0.2.2

License

MIT

Unpacked Size

5.18 kB

Total Files

6

Last publish

Collaborators

  • avatar