{"id":28066739,"url":"https://github.com/teplostanski/vite-plugin-readable-classnames","last_synced_at":"2025-05-12T15:52:24.112Z","repository":{"id":236574166,"uuid":"792884576","full_name":"teplostanski/vite-plugin-readable-classnames","owner":"teplostanski","description":"💅 Make your scoped CSS modules class names clear, consistent and readable by automatically adding component names — a better alternative to the default Vite behavior","archived":false,"fork":false,"pushed_at":"2025-05-11T18:51:29.000Z","size":1025,"stargazers_count":23,"open_issues_count":11,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-11T19:38:24.236Z","etag":null,"topics":["css","less","plugin","react","scss","tsdown","vite","vite-plugin","vue"],"latest_commit_sha":null,"homepage":"https://vite-plugin-readable-classnames.teplostanski.dev/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/teplostanski.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"lfx_crowdfunding":null,"polar":null,"buy_me_a_coffee":null,"thanks_dev":null,"custom":["donate.teplostanski.dev"]}},"created_at":"2024-04-27T20:29:59.000Z","updated_at":"2025-05-11T18:50:42.000Z","dependencies_parsed_at":"2024-08-21T18:18:07.954Z","dependency_job_id":"db7dc3c1-a2d8-4fe8-920f-9c90a114c7f1","html_url":"https://github.com/teplostanski/vite-plugin-readable-classnames","commit_stats":{"total_commits":56,"total_committers":2,"mean_commits":28.0,"dds":0.0357142857142857,"last_synced_commit":"1defe31c0eec0f2ab85fafa6c93e351cd9df12e8"},"previous_names":["teplostanski/vite-plugin-react-pretty-module-classnames","teplostanski/vite-plugin-pretty-module-classnames","teplostanski/vite-plugin-readable-classnames"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teplostanski%2Fvite-plugin-readable-classnames","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teplostanski%2Fvite-plugin-readable-classnames/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teplostanski%2Fvite-plugin-readable-classnames/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teplostanski%2Fvite-plugin-readable-classnames/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/teplostanski","download_url":"https://codeload.github.com/teplostanski/vite-plugin-readable-classnames/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253769022,"owners_count":21961463,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","less","plugin","react","scss","tsdown","vite","vite-plugin","vue"],"created_at":"2025-05-12T15:52:23.036Z","updated_at":"2025-05-12T15:52:24.100Z","avatar_url":"https://github.com/teplostanski.png","language":"TypeScript","funding_links":["donate.teplostanski.dev"],"categories":[],"sub_categories":[],"readme":"English | [Russian](./README.ru.md)\n\n\u003cdiv align='center'\u003e\n\u003ch1\u003evite-plugin-readable-classnames\u003c/h1\u003e\n\n[\u003cimg alt=\"NPM Version\" src=\"https://img.shields.io/npm/v/vite-plugin-readable-classnames?style=flat-square\u0026color=07912E\u0026labelColor=1f2033\"\u003e](https://npmjs.com/package/vite-plugin-readable-classnames)\n[\u003cimg alt=\"NPM License\" src=\"https://img.shields.io/npm/l/vite-plugin-readable-classnames?style=flat-square\u0026color=D3748F\u0026labelColor=1f2033\"\u003e](https://npmjs.com/package/vite-plugin-readable-classnames)\n[\u003cimg alt=\"NPM Type Definitions\" src=\"https://img.shields.io/npm/types/vite-plugin-readable-classnames?style=flat-square\u0026labelColor=1f2033\"\u003e](https://npmjs.com/package/vite-plugin-readable-classnames)\n[\u003cimg alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dw/vite-plugin-readable-classnames?style=flat-square\u0026color=7F78D1\u0026labelColor=1f2033\"\u003e](https://npmjs.com/package/vite-plugin-readable-classnames)\n[\u003cimg alt=\"GitHub commit activity\" src=\"https://img.shields.io/github/commit-activity/m/teplostanski/vite-plugin-readable-classnames?style=flat-square\u0026labelColor=1f2033\"\u003e](https://github.com/teplostanski/vite-plugin-readable-classnames)\n[\u003cimg alt=\"Coverage\" src=\"https://codecov.io/gh/teplostanski/vite-plugin-readable-classnames/graph/badge.svg?token=CQY9WXG41L\"\u003e](https://codecov.io/gh/teplostanski/vite-plugin-readable-classnames)\n\n\u003c/a\u003e\n\n\u003ch3\u003eMake your scoped CSS module class names clear and readable — this plugin automatically adds the module filename and other useful info to class names for easier development.\u003c/h3\u003e\n\n\u003cp\u003e\nIncluded in the \u003ca href='https://github.com/vitejs/awesome-vite'\u003eAwesome Vite.js list \u003cimg src='https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg' alt='Awesome'\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003c/div\u003e\n\n## 📦 Installation\n\n[npmjs.com](https://npmjs.com/package/vite-plugin-readable-classnames) • [yarnpkg.com](https://yarnpkg.com/package?q=vite-plugin-readable-classnames\u0026name=vite-plugin-readable-classnames)\n\n```bash\nnpm install -D vite-plugin-readable-classnames\n\nyarn add -D vite-plugin-readable-classnames\n\npnpm add -D vite-plugin-readable-classnames\n\nbun add -d vite-plugin-readable-classnames\n```\n\n## Migration from vite-plugin-pretty-module-classnames\n\n`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`.\n\n1. Uninstall the old plugin and install the new one\n\n```sh [npm]\nnpm uninstall vite-plugin-pretty-module-classnames\nnpm install -D vite-plugin-readable-classnames\n```\n\n2. Update the import and plugin usage in your `vite.config.js` or `vite.config.ts`\n\n```diff\n- import prettyModuleClassnames from 'vite-plugin-pretty-module-classnames'\n+ import readableClassnames from 'vite-plugin-readable-classnames'\n\nexport default defineConfig {\n-  plugins: [prettyModuleClassnames()]\n+  plugins: [readableClassnames()]\n}\n```\n\n## 🦾 Features\n\n- Framework-agnostic:\n  - Tested on projects with ![VanillaJS](https://img.shields.io/badge/Vanilla_JS/TS-%231f2033.svg?style=for-the-badge\u0026logo=javascript\u0026logoColor=%23F7DF1E) ![React](https://img.shields.io/badge/react-%231f2033.svg?style=for-the-badge\u0026logo=react\u0026logoColor=%2361DAFB) ![Vue](https://img.shields.io/badge/vue-%231f2033.svg?style=for-the-badge\u0026logo=vuedotjs\u0026logoColor=%234FC08D) \u003c!--![Astro](https://img.shields.io/badge/Astro-%231f2033.svg?style=for-the-badge\u0026logo=astro\u0026logoColor=%23BC52EE)--\u003e\n  - Potentially works with any framework. If you have any problems, write to the [Issue](https://github.com/teplostanski/vite-plugin-readable-classnames/issues)\n- Universal:\n  - Compatible with both `CommonJS` and `ES Modules`\n  - Support `Vite 2.x`\n- Customizable: Flexible configuration through options object\n\n## 🤔 What Problem Does This Plugin Solve?\n\nIn 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.\n\nIf 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.\n\nThis plugin solves these problems and ensures predictable, readable class naming in the format `ComponentName__classname_hash` regardless of the framework.\n\n\u003e [!TIP]\n\u003e **What are generated class names and where are they visible?**\n\u003e\n\u003e When you use CSS modules, the resulting class names are automatically generated by the bundler (e.g., Vite or Webpack). These names are visible:\n\u003e - in the HTML code of the page (through browser DevTools);\n\u003e - in the final CSS file;\n\u003e - when debugging in the browser as you search for the right element or style.\n\u003e\n\u003e Readable class names that include the component name help you quickly understand where a style comes from, making debugging and project maintenance easier.\n\n\n## ⚙️ Usege\n\n###### Example\n\n```js\n// vite.config.js\n// ...\nimport readableClassnames from 'vite-plugin-readable-classnames'\n\nexport default defineConfig({\n  plugins: [readableClassnames()],\n})\n```\n\n## 📚 Documentation\n\nFor full documentation, visit [vite-plugin-readable-classnames.teplostanski.dev](https://vite-plugin-readable-classnames.teplostanski.dev) [ EN | RU ].\n\n## 🤝 Contributing\n\nWant to contribute? Awesome! To show your support is to star the project, or to raise [issues on GitHub](https://github.com/teplostanski/vite-plugin-readable-classnames/issues).\n\nBefore you contribute to the development of the project, read the [rules](https://github.com/teplostanski/vite-plugin-readable-classnames/blob/main/CONTRIBUTING.md).\n\nThanks again for your support, it is much appreciated! 🙏\n\n\u003ch2\u003e © License\u003c/h2\u003e\n\u003ca href=\"https://github.com/teplostanski/vite-plugin-readable-classnames/blob/main/LICENSE\"\u003eMIT\u003c/a\u003e License © 2024-2025 \u003ca href=\"https://github.com/teplostanski\"\u003eteplostanski\u003c/a\u003e\n\n\u003ch2\u003e ❤ Fund this project\u003c/h2\u003e\n\u003ca href=\"https://donate.teplostanski.dev\" target=\"_blank\"\u003edonate.teplostanski.dev\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fteplostanski%2Fvite-plugin-readable-classnames","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fteplostanski%2Fvite-plugin-readable-classnames","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fteplostanski%2Fvite-plugin-readable-classnames/lists"}