@sardine/eleventy-plugin-tinycss NPM

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 Browserslist to add vendor specific prefixes.
You can pass a list of browsers in the plugin's options . Alternatively it will look for a .browserslistrc file or a browserslist in package.json. Check the details here

Requirements

Node.js 12 and up
11ty 0.11

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);
};

Browserslist options

You can pass a list of browsers as a string :

const tinyCSS = require('@sardine/eleventy-plugin-tinycss');
module.exports = function (eleventyConfig) {
  const tinyOptions = {
    browserslist: 'last 2 version, not dead',
  };

  eleventyConfig.addPlugin(tinyCSS, tinyOptions);
};

Alternatively it will look for a .browserslistrc file or a browserslist in package.json. Check the details here