Русский | English

vite-plugin-readable-classnames

Сделайте имена классов CSS-модулей понятными и читаемыми — плагин автоматически добавляет имя файла модуля и другую полезную информацию к именам классов для удобной разработки.

📦 Установка

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-pretty-module-classnames

vite-plugin-readable-classnames это новое имя для vite-plugin-pretty-module-classnames. Это руководство поможет мигрировать с vite-plugin-pretty-module-classnames на vite-plugin-readable-classnames.

Удалите старый плагин и установите новый

`sh [npm] npm uninstall vite-plugin-pretty-module-classnames npm install -D vite-plugin-readable-classnames


2. Обновите импорт и использование плагина в `vite.config.js` или `vite.config.ts`

```diff
- import prettyModuleClassnames from 'vite-plugin-pretty-module-classnames'
+ import readableClassnames from 'vite-plugin-readable-classnames'

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

🦾 Функциональность

Не зависит от фреймворка:
- Проверено на проектах с
- Потенциально работает с любым фреймворком. Если возникнут проблемы — создайте issue
Универсальный:
- Совместим с CommonJS и ES Modules
- Совместим с Vite 2.x
Настраиваемый: Гибкая настройка через объект параметров

🤔 Какую проблему решает плагин?

В React с CSS-модулями мы привыкли к именам классов вроде SomeComponent__classname_hash. По умолчанию Vite генерирует имена в формате __classname_hash, опуская имя компонента, что усложняет отладку.

Если попытаться добавить имя компонента через настройку generateScopedName: '[name]__[local]_[hash:base64:5]', в React появится лишний суффикс -module, а во Vue такая конфигурация может привести к ошибкам сборки.

Плагин решает эти проблемы и обеспечивает предсказуемое, читаемое именование классов в формате ComponentName__classname_hash независимо от фреймворка.

[!TIP] Что такое сгенерированные имена классов и где они видны?

Когда вы используете CSS-модули, итоговые имена классов автоматически генерируются сборщиком (например, Vite или Webpack). Эти имена видны:

в HTML-коде страницы (через DevTools браузера);

в итоговом CSS-файле;

при отладке в браузере, когда вы ищете нужный элемент или стиль.

Хорошо читаемые имена классов с именем компонента помогают быстро понять, откуда стиль, и упростить отладку и поддержку проекта.

⚙️ Применение

Пример

// vite.config.js
// ...
import readableClassnames from 'vite-plugin-readable-classnames'

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

📚 Документация

Полная документация доступна на vite-plugin-readable-classnames.teplostan.ski [ EN | RU ].

🤝 Вклад в проект

Хотите помочь проекту? Здорово! Поставьте звёздочку, расскажите друзьям или создайте issue на GitHub.

Перед тем как вносить изменения, ознакомьтесь с правилами.

Спасибо за вашу поддержку! 🙏

© Лицензия

❤ Поддержать проект

donate.teplostan.ski

Package detail