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

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

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

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

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

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

• в HTML-коде страницы (через DevTools браузера);
• в итоговом CSS-файле;
• при отладке в браузере, когда вы ищете нужный элемент или стиль.

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