@sardine/eleventy-plugin-tinycss

A plugin for 11ty to minify and optimise CSS

Usage no npm install needed!

<script type="module">
  import sardineEleventyPluginTinycss from 'https://cdn.skypack.dev/@sardine/eleventy-plugin-tinycss';
</script>

README

eleventy-plugin-tinycss

An 11ty plugin to optimise CSS.

Features

  • Improves First Contentful Paint by reducing the potential number of render-blocking resources. It replaces relative external CSS files and inlines them in the page.

    Original HTML:

    <html>
      <head>
        <link href="/assets/styles.css" rel="stylesheet" type="text/css" />
      </head>
      <body>
        <h1 class="a">Hello!</h1>
      </body>
    </html>
    

    Optimised HTML:

    <html>
      <head>
        <style>
          .a {
            font-size: large;
          }
        </style>
      </head>
      <body>
        <h1 class="a">Hello!</h1>
      </body>
    </html>
    
  • Finds multiple <style> elements and merge them together.

    Original HTML:

    <html>
      <head>
        <style>
          body {
            font-size: large;
          }
        </style>
      </head>
      <body>
        <style>
          .a {
            color: #ccc;
          }
        </style>
        <h1 class="a">Hello!</h1>
      </body>
    </html>
    

    Optimised HTML:

    <html>
      <head>
        <style>
          body {
            font-size: large;
          }
          .a {
            color: #ccc;
          }
        </style>
      </head>
      <body>
        <h1 class="a">Hello!</h1>
      </body>
    </html>
    
  • Uses PurgeCSS to remove unused CSS in the page.

    You can pass PurgeCSS configuration object in the plugin's options

  • Uses Autoprefixer to add vendor specific prefixes.

    You can pass Autoprefixer options in the plugin's options

  • Uses CSSNano to minify and optimise the final CSS.

    You can config CSSNano with the default config files

Requirements

Installation

npm install --save-dev @sardine/eleventy-plugin-tinycss

How to use it

const tinyCSS = require('@sardine/eleventy-plugin-tinycss');
module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(tinyCSS);
};

Configuration

Ouput directory

By default the plugin uses _site as the 11ty output directory. If you're using other directory you'll need to tell the plugin:

const tinyCSS = require('@sardine/eleventy-plugin-tinycss');
module.exports = function (eleventyConfig) {
  const tinyOptions = {
    output: 'dist',
  };

  eleventyConfig.addPlugin(tinyCSS, tinyOptions);
};

PurgeCSS options

By default the following options are used:

{
  content: [
    {
      raw: html,
      extension: "html",
    },
  ],
  extractors: [
    {
      extractor: purgeHtml,
      extensions: ["html"],
    },
  ],
};

You can pass your own options just like in the official documentation :

const tinyCSS = require('@sardine/eleventy-plugin-tinycss');
module.exports = function (eleventyConfig) {
  const tinyOptions = {
    purgeCSS: {
      // Remove them keyframes
      keyframes: true,
    },
  };

  eleventyConfig.addPlugin(tinyCSS, tinyOptions);
};

Autoprefixer options

You can pass your own options just like in the official documentation :

const tinyCSS = require('@sardine/eleventy-plugin-tinycss');
module.exports = function (eleventyConfig) {
  const tinyOptions = {
    autoprefixer: {
      // keep browser prefixes
      remove: false,
    },
  };

  eleventyConfig.addPlugin(tinyCSS, tinyOptions);
};

License

MIT