unused-classes
Purpose
Finds out possibly unused class selectors (.my-class
) and id selectors (#my-element
) by statically analyzing the source code that generates HTML.
Currently Erb and Haml are supported.
Getting started
Install
npm install -D unused-classes
# OR
yarn add -D unused-classes
Configure
touch .classnamesrc.js
Configuration example
module.exports = {
rules: [
{
include: ["app/views/**/*.haml"],
parser: "haml",
},
{
include: ["app/views/**/*.html.erb"],
parser: "erb",
},
],
output: "classes.json",
};
Configure a script in package.json
:
{
"scripts": {
"unused-classes": "unused-classes"
}
}
Running
npm run unused-classes
# OR
yarn unused-classes
Then ./classes.json
will be generated. You can use the data with the following packages:
Advanced usage
known-classes parser
Use known-classes
parser to tell which class names / ids are autogenerated:
module.exports = {
rules: [
{
include: ["dynamically-generating-code.js"],
parser: "known-classes",
options: {
known: [".foo", "#bar"],
},
},
],
};
Then it checks for the occurrences of foo
and bar
in the specified files and if there are,
it records .foo
and #bar
as used.
externals
Explicitly tell unused-classes
about externally inserted classes:
module.exports = {
externals: {
"typeahead": [
".tt-dropdown-menu",
".tt-hint",
],
},
};
Wildcards
not supported yet