metalsmith-remove-unused-classes v1.0.0
metalsmith-remove-unused-classes
A metalsmith plugin for removing unused classes in HTML markup.
This plugin removes unused classes from the HTML document by checking if the classes are used as selectors in the CSS code. Under the hood metalsmith-remove-unused-classes
uses jsdom
and css-tree
to find unused classes, and checks both the <style>
tags and CSS files to determine which classes should be removed.
Installation
npm install metalsmith-remove-unused-classes
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 removeUnusedClasses = require('metalsmith-remove-unused-classes');
Metalsmith(__dirname)
.use(removeUnusedClasses())
.build((err, files) => {
if (err) { throw err; }
});
JSON
{
"plugins": {
"metalsmith-remove-unused-classes": {}
}
}
Options
You can pass options to metalsmith-remove-unused-classes
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 classes removed. So this Metalsmith JavaScript configuration or metalsmith.json
:
JavaScript
const Metalsmith = require('metalsmith');
const removeUnusedClasses = require('metalsmith-remove-unused-classes');
Metalsmith(__dirname)
.use(removeUnusedClasses({
htmlPattern: 'blog/**/*.html',
}))
.build((err, files) => {
if (err) { throw err; }
});
JSON
{
"source": "src",
"destination": "build",
"plugins": {
"metalsmith-remove-unused-classes": {
"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 class selectors. So this Metalsmith JavaScript configuration or metalsmith.json
:
JavaScript
const Metalsmith = require('metalsmith');
const removeUnusedClasses = require('metalsmith-remove-unused-classes');
Metalsmith(__dirname)
.use(removeUnusedClasses({
cssPattern: 'blog/**/*.css',
}))
.build((err, files) => {
if (err) { throw err; }
});
JSON
{
"source": "src",
"destination": "build",
"plugins": {
"metalsmith-remove-unused-classes": {
"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
3 years ago