metalsmith-css-unused

⚠️ This repistory has been moved to metalsmith-plugins. ⚠️

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

const Metalsmith = require('metalsmith');
const cssUnused  = require('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

const Metalsmith = require('metalsmith');
const cssUnused  = require('metalsmith-css-unused');

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

Changelog

Changelog