如何检测未使用的 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 框架，这尤其有用，因为许多选择器通常未使用。

在这里阅读更多内容

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。

在这里阅读更多内容

注意：还有其他包。但我个人使用过我在这里提到的 uncss 和 purifycss