How to detect unused css-modules classes

Question

Does anyone know any tool which would help to highlight classes that are not used in css-modules?
Recently I have added typescript-plugin-css-modules to my project which helps me to detect if I use non existent class names in JSX, but now I also want to be able to detect unused classes in module.css as it unnecessary adds dead css code to the bundle.

Outrush

There is April of 2021 and the question is still actual. – Udale

Answer 1

If you only want to detect unused CSS module then there are a few ways to do it:

1. Using chrome's developer tools:

2. Use something like purifycss:

Installation:

npm i -D purify-css

Usage:

import purify from "purify-css"
const purify = require("purify-css")

let content = ""
let css = ""
let options = {
    output: "filepath/output.css"
}
purify(content, css, options)

A function that takes content (HTML/JS/PHP/etc) and CSS, and returns only the used CSS. PurifyCSS does not modify the original CSS files. You can write to a new file, like minification. If your application is using a CSS framework, this is especially useful as many selectors are often unused.

Read more here

3. Use uncss

Installation:

npm install -g uncss

Usage within NodeJS:

var uncss = require('uncss');

var files   = ['my', 'array', 'of', 'HTML', 'files', 'or', 'http://urls.com'],
    options = {
        banner       : false,
        csspath      : '../public/css/',
        htmlroot     : 'public',
        ignore       : ['#added_at_runtime', /test\-[0-9]+/],
        ignoreSheets : [/fonts.googleapis/],
        inject       : function(window) { window.document.querySelector('html').classList.add('no-csscalc', 'csscalc'); },
        jsdom        : {
            userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 10_3 like Mac OS X)',
        },
        media        : ['(min-width: 700px) handheld and (orientation: landscape)'],
        raw          : 'h1 { color: green }',
        report       : false,
        strictSSL    : true,
        stylesheets  : ['lib/bootstrap/dist/css/bootstrap.css', 'src/public/css/main.css'],
        timeout      : 1000,
        uncssrc      : '.uncssrc',
        userAgent    : 'Mozilla/5.0 (iPhone; CPU iPhone OS 10_3 like Mac OS X)',
    };

uncss(files, options, function (error, output) {
    console.log(output);
});

/* Look Ma, no options! */
uncss(files, function (error, output) {
    console.log(output);
});

/* Specifying raw HTML */
var rawHtml = '...';

uncss(rawHtml, options, function (error, output) {
    console.log(output);
});

UnCSS is a tool that removes unused CSS from your stylesheets. It works across multiple files and supports Javascript-injected CSS.

Read more here

N.B: There are other packages as well. But I've personally used uncss and purifycss which I mentioned here

Toby

What I was looking for is more of like that it would be able to detect during the runtime unused classes that are defined in css files while running localhost. – Outrush

Answer 2

If you have TypeScript this can help:

https://www.npmjs.com/package/typescript-plugin-css-modules

Two eslint plugins can help if you don't have TypeScript

1. eslint-plugin-postcss-modules last updated 2021
2. eslint-plugin-css-modules last updated 2019

Tetrameter

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Fricandeau