English | Russian

npmjs.com • yarnpkg.com

npm install -D vite-plugin-readable-classnames
yarn add -D vite-plugin-readable-classnames
pnpm add -D vite-plugin-readable-classnames
bun add -d vite-plugin-readable-classnames

vite-plugin-readable-classnames is the new identity for vite-plugin-pretty-module-classnames. This guide will help you migrate from vite-plugin-pretty-module-classnames to vite-plugin-readable-classnames.

1. Uninstall the old plugin and install the new one

npm uninstall vite-plugin-pretty-module-classnames
npm install -D vite-plugin-readable-classnames

2. Update the import and plugin usage in your vite.config.js or vite.config.ts

- import prettyModuleClassnames from 'vite-plugin-pretty-module-classnames'
+ import readableClassnames from 'vite-plugin-readable-classnames'
export default defineConfig {
-  plugins: [prettyModuleClassnames()]
+  plugins: [readableClassnames()]
}

• Framework-agnostic:
  • Tested on projects with
  • Potentially works with any framework. If you have any problems, write to the Issue
• Universal:
  • Compatible with both CommonJS and ES Modules
  • Support Vite 2.x
• Customizable: Flexible configuration through options object

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.

// vite.config.js
// ...
import readableClassnames from 'vite-plugin-readable-classnames'
export default defineConfig({
  plugins: [readableClassnames()],
})

For full documentation, visit vite-plugin-readable-classnames.teplostan.ski [ EN | RU ].

Want to contribute? Awesome! To show your support is to star the project, or to raise issues on GitHub.

Before you contribute to the development of the project, read the rules.

Thanks again for your support, it is much appreciated! 🙏