Vite Plugin: Readable CSS Module Classes

Setup

This plugin requires vite of v3 or greater. It only makes sense to use if you're using css modules. Works in development mode only.

$ npm install --save-dev vite-plugin-readable-css-modules

In your vite.config.ts simply add the plugin:

import { readableCssModules } from 'vite-plugin-readable-css-modules';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    readableCssModules()
  ]
})

And that's it. When running vite build your generated CSS should be significantly smaller.

How does it work?

In Vite, when using css modules, you don't know, from which component does a specific rendered element come from. It generates names like ._wrapper_pzatx_32.

Because of that, the dom tree in devtools gives you no clue what are those component that are rendered.

By using this module, you get more meaningful class names, containing the name of your component and name of the selector: .views_Card_wrapper Optionally, number of line in CSS file and hash can be added: .Card_wrapper_1_Az7P

Options

• componentNameMatching: file or path
• pathDepth: how many path components to use
• includeLineNumber: false by default
• includeHash: false by default
• separator: string to separate name components, _ by default
• replacement: string to replace non-alphanumeric chars, _ by default