Readable CSS Module Class Names for Vite

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";exportdefaultdefineConfig({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.