Vite Plugin
Readable ClassnamesMake your scoped CSS module class names clear and readable

Getting Started ​

Add the plugin to your project using your favorite package manager!

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

Migration from vite-plugin-pretty-module-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

yarn remove vite-plugin-pretty-module-classnames
yarn add -D vite-plugin-readable-classnames

pnpm remove vite-plugin-pretty-module-classnames
pnpm add -D vite-plugin-readable-classnames

bun remove vite-plugin-pretty-module-classnames
bun add -d vite-plugin-readable-classnames

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

import { defineConfig } from 'vite'
import prettyModuleClassnames from 'vite-plugin-pretty-module-classnames'
import readableClassnames from 'vite-plugin-readable-classnames'

export default defineConfig {
  plugins: [prettyModuleClassnames()], 
  plugins: [readableClassnames()], 
}