如何检测未使用的 css 模块类

Question

有谁知道有什么工具可以帮助突出显示 css 模块中未使用的类吗？
最近我在我的项目中添加了 typescript-plugin-css-modules ，这有助于我检测我是否在 JSX 中使用了不存在的类名，但现在我也希望能够检测 module.css 中未使用的类，因为它不必要地添加死css 代码到 bundle.

Answer 1

如果你只想检测未使用的 CSS 模块，那么有几种方法可以做到：

1. 使用 chrome 的开发者工具：

2. 使用像

   purifycss

   这样的东西：

安装：

npm i -D purify-css

用法：

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

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

一个获取内容（HTML/JS/PHP/等）和 CSS 的函数，只返回使用过的 CSS。 PurifyCSS 不修改原始 CSS 文件。您可以写入一个新文件，例如缩小。 如果您的应用程序正在使用 CSS 框架，这将特别有用，因为许多选择器通常未被使用。

阅读更多在这里

3. 使用uncss

安装：

npm install -g uncss

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 是一种从样式表中删除未使用的 CSS 的工具。它适用于多个文件并支持注入 Javascript 的 CSS。

阅读更多在这里

N.B：还有其他包。但是我个人使用了我在这里提到的 uncss 和 purifycss

Answer 2

我迟到了，但也许这对其他人有帮助。 有两个 eslint 插件可以提供帮助（仅当没有带有 typescript-plugin-css-modules 的 typescript 时才有用）

1. eslint-plugin-postcss-modules 最后更新于 2021 年
2. eslint-plugin-css-modules 最后更新于 2019 年