CODEWITHSUNDEEP
reactjscss-modulesreact-css-modules
Edvards Niedre
Edvards Niedre

Reputation: 700

How to detect unused css-modules classes

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.

Upvotes: 12

Views: 5375

Answers (2)

Paul S.
Paul S.

Reputation: 31

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

Upvotes: 2

user14709104
user14709104

Reputation:

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

  1. Using chrome's developer tools: enter image description here

  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

  1. 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

Upvotes: 3

Related Questions