metalsmith-css-unused

A Metalsmith plugin to remove unused CSS rules.

This plugin works by removing rules in every CSS file that don't match any content in any HTML files.

CSS files are not moved or combined in any way, only the content of the files is changed. You can use plugins such as metalsmith-renamer or metalsmith-concat to rename or combine your CSS files before or after this plugin.

You might also want to consider minifying your CSS files after this plugin using @metalsmith/postcss with cssnano or another similar plugin.

Installation

npm install --save metalsmith-css-unused

JavaScript Usage

import Metalsmith from 'metalsmith';
import cssUnused from 'metalsmith-css-unused';

Metalsmith(__dirname)
    .use(cssUnused({
        // options here
    }))
    .build((err) => {
        if (err) {
            throw err;
        }
    });

Options

html (optional)

Type: string Default: "**/*.html"

A micromatch glob pattern to find HTML files.

css (optional)

Type: string Default: "**/*.css"

A micromatch glob pattern to find CSS files.

purgecss (optional)

Type: object Default: {}

An object of PurgeCSS options.

Example

import Metalsmith from 'metalsmith';
import cssUnused from 'metalsmith-css-unused';

Metalsmith(__dirname)
    .use(cssUnused({
        purgecss: {
            safelist: [
                // Bootstrap 4 JavaScript
                /\.carousel-item-.+/,
                /\.modal/,
                /\.show/
            ]
        }
    }))

Changelog

Changelog