This plugin replaces Vite's generated CSS Module class names with readable names during development. Instead of a class such as ._wrapper_pzatx_32, you get .Card_wrapper, making it easier to identify components in browser developer tools.

It supports Vite 5 and newer and only affects the development server. Production builds remain unchanged.

Installation

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

Add the plugin to your vite.config.ts:

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

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

No additional configuration is required. Start the Vite development server and inspect any element that uses a CSS Module to see its readable class name.

How does it work?

By default, the plugin combines the CSS Module filename with the local class name. For example, .wrapper in Card.module.css becomes .Card_wrapper.

You can instead derive the component name from its directory path and optionally include the source line number or a short hash. For example: .views_Card_wrapper or .Card_wrapper_1_Az7P.

Options

| Option | Type | Default | Description | | ----------------------- | ------------------ | --------------- | ------------------------------------------------------------------------------------- | | componentNameMatching | "file" \| "path" | "file" | Use the CSS Module filename or its directory path as the component name. | | pathDepth | number | All directories | Limit how many directory names are included when componentNameMatching is "path". | | includeLineNumber | boolean | false | Include the selector's source line number. | | includeHash | boolean | false | Include a short hash of the file path. | | separator | string | "_" | Separate each part of the generated class name. | | replacement | string | "_" | Replace non-alphanumeric characters. |