metalsmith-remove-unused-ids v1.0.0

metalsmith-remove-unused-ids

A metalsmith plugin for removing unused IDs in HTML markup.

This plugin removes unused id attributes from the HTML document by checking if the IDs are used as selectors in the CSS code. Under the hood metalsmith-remove-unused-ids uses jsdom and css-tree to find unused IDs, and checks both the <style> tags and CSS files to determine which IDs should be removed.

Installation

npm install metalsmith-remove-unused-ids

Usage

To use this plugin, simply add it to the existing plugins in your Metalsmith source file or include it in the Metalsmith JSON file:

JavaScript

const Metalsmith = require('metalsmith');
const removeUnusedIds = require('metalsmith-remove-unused-ids');

Metalsmith(__dirname)
  .use(removeUnusedIds())
  .build((err, files) => {
    if (err) { throw err; }
  });

JSON

{
  "plugins": {
    "metalsmith-remove-unused-ids": {}
  }
}

Options

You can pass options to metalsmith-remove-unused-ids with the Javascript API or CLI. The options are:

• htmlPattern: optional. Only HTML files that match this pattern will be processed. Accepts a string or an array of strings. The default is **/*.html.
• cssPattern: optional. Only CSS source files that match this pattern will be processed. Accepts a string or an array of strings. The default is **/*.css.

htmlPattern

Only HTML files that match this pattern will have unused IDs removed. So this Metalsmith JavaScript configuration or metalsmith.json:

JavaScript

const Metalsmith = require('metalsmith');
const removeUnusedIds = require('metalsmith-remove-unused-ids');

Metalsmith(__dirname)
  .use(removeUnusedIds({
    htmlPattern: 'blog/**/*.html',
  }))
  .build((err, files) => {
    if (err) { throw err; }
  });

JSON

{
  "source": "src",
  "destination": "build",
  "plugins": {
    "metalsmith-remove-unused-ids": {
      "htmlPattern": "blog/**/*.html"
    }
  }
}

Would only process HTML files within the ./src/blog folder, because the pattern is relative to your source folder. See multimatch for further details.

cssPattern

Only CSS files that match this pattern will be checked for ID selectors. So this Metalsmith JavaScript configuration or metalsmith.json:

JavaScript

const Metalsmith = require('metalsmith');
const removeUnusedIds = require('metalsmith-remove-unused-ids');

Metalsmith(__dirname)
  .use(removeUnusedIds({
    cssPattern: 'blog/**/*.css',
  }))
  .build((err, files) => {
    if (err) { throw err; }
  });

JSON

{
  "source": "src",
  "destination": "build",
  "plugins": {
    "metalsmith-remove-unused-ids": {
      "cssPattern": "blog/**/*.css"
    }
  }
}

Would only process CSS files within the ./src/blog folder, because the pattern is relative to your source folder. See multimatch for further details.

License

AGPLv3