{"id":13606698,"url":"https://github.com/teplostanski/vite-plugin-pretty-module-classnames","last_synced_at":"2025-03-17T16:11:01.737Z","repository":{"id":236574166,"uuid":"792884576","full_name":"teplostanski/vite-plugin-pretty-module-classnames","owner":"teplostanski","description":"💅 Adds the filename without the -module suffix to the class names of CSS modules","archived":false,"fork":false,"pushed_at":"2025-02-07T22:44:02.000Z","size":303,"stargazers_count":22,"open_issues_count":11,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-02T13:11:23.522Z","etag":null,"topics":["css","css-modules","less","plugin","scss","scss-modules","vite","vite-plugin"],"latest_commit_sha":null,"homepage":"https://npmjs.com/package/vite-plugin-pretty-module-classnames","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},"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-02-07T22:58:55.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-pretty-module-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"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teplostanski%2Fvite-plugin-pretty-module-classnames","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teplostanski%2Fvite-plugin-pretty-module-classnames/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teplostanski%2Fvite-plugin-pretty-module-classnames/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teplostanski%2Fvite-plugin-pretty-module-classnames/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/teplostanski","download_url":"https://codeload.github.com/teplostanski/vite-plugin-pretty-module-classnames/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244066180,"owners_count":20392406,"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","css-modules","less","plugin","scss","scss-modules","vite","vite-plugin"],"created_at":"2024-08-01T19:01:11.590Z","updated_at":"2025-03-17T16:11:01.718Z","avatar_url":"https://github.com/teplostanski.png","language":"TypeScript","funding_links":["donate.teplostanski.dev"],"categories":["Plugins"],"sub_categories":["Framework-agnostic Plugins"],"readme":"\u003cdiv align='center'\u003e\n\u003ch1\u003evite-plugin-pretty-module-classnames\u003c/h1\u003e\n\n[\u003cimg alt=\"NPM Version\" src=\"https://img.shields.io/npm/v/vite-plugin-pretty-module-classnames?style=flat-square\u0026color=07912E\u0026labelColor=1f2033\"\u003e](https://npmjs.com/package/vite-plugin-pretty-module-classnames)\n[\u003cimg alt=\"NPM License\" src=\"https://img.shields.io/npm/l/vite-plugin-pretty-module-classnames?style=flat-square\u0026color=D3748F\u0026labelColor=1f2033\"\u003e](https://npmjs.com/package/vite-plugin-pretty-module-classnames)\n[\u003cimg alt=\"NPM Type Definitions\" src=\"https://img.shields.io/npm/types/vite-plugin-pretty-module-classnames?style=flat-square\u0026labelColor=1f2033\"\u003e](https://npmjs.com/package/vite-plugin-pretty-module-classnames)\n[\u003cimg alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dw/vite-plugin-pretty-module-classnames?style=flat-square\u0026color=7F78D1\u0026labelColor=1f2033\"\u003e](https://npmjs.com/package/vite-plugin-pretty-module-classnames)\n[\u003cimg alt=\"GitHub commit activity\" src=\"https://img.shields.io/github/commit-activity/m/teplostanski/vite-plugin-pretty-module-classnames?style=flat-square\u0026labelColor=1f2033\"\u003e](https://github.com/teplostanski/vite-plugin-pretty-module-classnames)\n[\u003cimg alt=\"Coverage\" src=\"https://codecov.io/gh/teplostanski/vite-plugin-pretty-module-classnames/graph/badge.svg?token=CQY9WXG41L\"\u003e](https://codecov.io/gh/teplostanski/vite-plugin-pretty-module-classnames)\n\n\u003c/a\u003e\n\n\u003ch3\u003eAdds the filename without the \u003ccode\u003e-module\u003c/code\u003e suffix to the class names of CSS modules.\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-pretty-module-classnames) • [yarnpkg.com](https://yarnpkg.com/package?q=vite-plugin-pretty-module-classnames\u0026name=vite-plugin-pretty-module-classnames)\n\n```bash\nnpm install -D vite-plugin-pretty-module-classnames\n```\n\n## 🦾 Features\n\n- Framework-agnostic\n  - Tested: `VanillaJS`, `React`, `Vue`\n  - Potentially works with any framework. If you have any problems, write to the [Issue](https://github.com/teplostanski/vite-plugin-pretty-module-classnames/issues)\n- Support `CommonJS` and `ES Modules`\n- Support `Vite 2.x`\n- Configurable: Added support for plugin configuration\n\n## 🤔 Why Use This?\n\nAs utilizing CSS modules in React, we're accustomed to seeing class names formatted as `SomeComponent__classname_hash`. However, with Vite, the naming convention for modular class names appears slightly different, resembling `__classname_hash` or `SomeComponent-module__classname_hash` the latter occurring if `generateScopedName: '[name]__[local]_[hash:base64:5]'` is specified in vite.config.js. This addition of `-module` post-component name can be cumbersome to work around.\n\nFortunately, the `vite-plugin-pretty-module-classnames` provides a solution to this issue!\n\n## ⚙️ Usege\n\n###### Api\n\n```js\n// vite.config.js\nimport prettyModuleClassnames from \"vite-plugin-pretty-module-classnames\";\n```\n\n###### Example\n\n```js\n// vite.config.js\nexport default defineConfig({\n  plugins: [prettyModuleClassnames()],\n});\n```\n\n## 🔧 Configuration\n\n### `lineNumber` Option\n\nThe `lineNumber` option is a boolean that, when set to `true`, appends the line number where the CSS class is defined in the source file to the generated class name.\n\n###### Example\n\n```js\n// vite.config.js\nimport prettyModuleClassnames from \"vite-plugin-pretty-module-classnames\";\n\nexport default defineConfig({\n  plugins: [prettyModuleClassnames({ lineNumber: true })],\n});\n```\n\nWith this configuration, if your CSS file contains:\n\n```css\n/* SomeComponent.module.css */\n1 .wrapper {\n2   /* styles */\n3 }\n4\n5 .container {\n6   /* styles */\n7 }\n```\n\nThe generated class names will look like:\n\n- SomeComponent\\_\\_wrapper_abcd1_1\n- SomeComponent\\_\\_container_abcd2_5\n\n\u003e [!WARNING]\n\u003e Please note that the `lineNumber` option mirrors the behavior of Vite's default class name generation when using preprocessors like Sass, Less, or Stylus. The line number is calculated based on the compiled CSS, where empty lines between selectors and comments are typically removed. This can lead to discrepancies between the line numbers in the source files and the compiled output, potentially resulting in inaccurate line numbers in the generated class names.\n\u003e\n\u003e Additionally, in Vue files, the line count always starts from the `\u003cstyle module\u003e` tag, regardless of where it is placed within the file. This means that the line numbers in generated class names will be relative to the position of the `\u003cstyle module\u003e` tag, not the beginning of the file.\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-pretty-module-classnames/issues).\n\nBefore you contribute to the development of the project, read the [rules](https://github.com/teplostanski/vite-plugin-pretty-module-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-pretty-module-classnames/blob/main/LICENSE\"\u003eMIT\u003c/a\u003e License © 2024 \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-pretty-module-classnames","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fteplostanski%2Fvite-plugin-pretty-module-classnames","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fteplostanski%2Fvite-plugin-pretty-module-classnames/lists"}