eleventy-critical-css

    1.1.0 • Public • Published

    eleventy-critical-css

    npm version npm downloads License Prettier

    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, {
        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,
      rebase: ({ originalUrl }) => originalUrl,
    }

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

    Install

    npm i eleventy-critical-css

    DownloadsWeekly Downloads

    134

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    5.26 kB

    Total Files

    4

    Last publish

    Collaborators

    • gregives