如何检测未使用的 css-modules 类

Question

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

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 框架，这将特别有用，因为许多选择器通常是未使用的。

阅读更多here

1. 使用 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。

阅读更多here

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