🤔 What Problem Does This Plugin Solve?

In React with CSS modules, we're used to class names like SomeComponent__classname_hash. By default, Vite generates names in the format __classname_hash, omitting the component name, which makes debugging more difficult.

If you try to add the component name through the generateScopedName: '[name]__[local]_[hash:base64:5]' configuration, React will add an extra -module suffix, and in Vue, such configuration may lead to build errors.

This plugin solves these problems and ensures predictable, readable class naming in the format ComponentName__classname_hash regardless of the framework.

What are generated class names and where are they visible?

When you use CSS modules, the resulting class names are automatically generated by the bundler (e.g., Vite or Webpack). These names are visible:

• in the HTML code of the page (through browser DevTools);
• in the final CSS file;
• when debugging in the browser as you search for the right element or style.

Readable class names that include the component name help you quickly understand where a style comes from, making debugging and project maintenance easier.