如何检测CSS Modules中未使用的类？求推荐相关工具

Absolutely, there are solid tools out there to help you hunt down unused CSS Modules classes—exactly what you need to trim bundle bloat and keep your stylesheets tidy. Since you’re already using typescript-plugin-css-modules for invalid class detection, I’ll focus on options that play nicely with TypeScript setups, plus some straightforward picks tailored for CSS Modules:

1. purgecss (The Most Versatile Pick) #

• This is the go-to tool for stripping unused CSS, and it works flawlessly with CSS Modules. It scans your TS/JSX files to match referenced class names, then removes any styles in your .module.css files that aren’t being used.
• How to use: Integrate it directly into your build tool (Webpack, Vite, Rollup, etc.) or run it via CLI. For Webpack, use purgecss-webpack-plugin—configure it to target your source files (e.g., src/**/*.{ts,tsx}) and CSS Modules paths, and it’ll automatically clean up during builds.
• Key perks: Supports preprocessors like Sass/Less, plays seamlessly with TypeScript, and lets you whitelist dynamically generated classes (like styles[btn-${variant}]) to avoid accidentally removing critical styles.

2. unused-css-classes (CSS Modules-Specific Lightweight Tool) #

• Built specifically for CSS Modules, this tool analyzes your TypeScript/JavaScript files and paired .module.css files to flag unused class names. It outputs results directly in your terminal or generates a detailed report.
• How to use: Install it, then run npx unused-css-classes from your project root. It auto-detects your project structure, but you can customize it with a config file to specify scan directories or exclude files.
• Key perks: Lightweight, no complex build config required, and accurately recognizes TypeScript’s typed CSS Modules references (perfect for pairing with typescript-plugin-css-modules).

3. stylelint + stylelint-no-unused-selectors (Integrate with Code Checks) #

• If you already use Stylelint for CSS linting, add the stylelint-no-unused-selectors plugin to catch unused CSS Modules classes during development—no waiting for builds.
• How to use: Install the plugin, then update your .stylelintrc config:

  {
    "plugins": ["stylelint-no-unused-selectors"],
    "rules": {
      "plugin/no-unused-selectors": true
    }
  }
  

  Make sure Stylelint can access your TS/JSX files (adjust the files option in your config if needed) so it can cross-reference used class names.
• Key perks: Fits into your existing code quality workflow, provides real-time feedback, and prevents unused styles from being committed to your repo.

4. Vite/Rollup Built-In Support (For Modern Build Tools) #

• If you’re using Vite, its official CSS plugin has built-in support for detecting and cleaning unused CSS—including CSS Modules. Enable it in your vite.config.ts:

  import { defineConfig } from 'vite'
  
  export default defineConfig({
    css: {
      modules: {
        warnOnDuplicate: true, // Optional: Warn about duplicate classes
      },
      postcss: {
        plugins: [
          require('@fullhuman/postcss-purgecss')({
            content: ['./src/**/*.{ts,tsx}'],
            defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
          })
        ]
      }
    }
  })
  

• Key perks: Deeply integrated with Vite’s build pipeline, minimal extra setup, and great performance.

Quick Tip #

If you use dynamically generated class names (e.g., template strings like styles[btn-${variant}]), make sure to add these patterns to your tool’s whitelist to avoid accidentally deleting necessary styles. You can also integrate these tools into your CI/CD pipeline to enforce clean styles on every commit.

内容的提问来源于stack exchange，提问作者Edvards Niedre