{"id":13417396,"url":"https://github.com/Simonwep/vite-plugin-optimize-css-modules","last_synced_at":"2025-03-15T02:31:16.076Z","repository":{"id":65564252,"uuid":"536643300","full_name":"simonwep/vite-plugin-optimize-css-modules","owner":"simonwep","description":"🗜 Mangle / minimize css module classnames in production like facebook and Google do!","archived":false,"fork":false,"pushed_at":"2024-07-06T14:27:48.000Z","size":33,"stargazers_count":30,"open_issues_count":1,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-29T21:10:42.630Z","etag":null,"topics":["css","css-minify","css-modules","plugin","vite","vite-plugin"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/simonwep.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-09-14T15:27:12.000Z","updated_at":"2024-10-14T15:24:58.000Z","dependencies_parsed_at":"2023-12-03T10:24:13.036Z","dependency_job_id":"e07bc539-3934-41aa-82f3-2a1a8403e83e","html_url":"https://github.com/simonwep/vite-plugin-optimize-css-modules","commit_stats":{"total_commits":23,"total_committers":2,"mean_commits":11.5,"dds":0.04347826086956519,"last_synced_commit":"7dd541feac3b8e6ab888709c40a42a4343acdd63"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonwep%2Fvite-plugin-optimize-css-modules","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonwep%2Fvite-plugin-optimize-css-modules/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonwep%2Fvite-plugin-optimize-css-modules/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonwep%2Fvite-plugin-optimize-css-modules/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/simonwep","download_url":"https://codeload.github.com/simonwep/vite-plugin-optimize-css-modules/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243674797,"owners_count":20329163,"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-minify","css-modules","plugin","vite","vite-plugin"],"created_at":"2024-07-30T22:00:36.406Z","updated_at":"2025-03-15T02:31:16.068Z","avatar_url":"https://github.com/simonwep.png","language":"TypeScript","funding_links":["https://github.com/sponsors/Simonwep"],"categories":["Plugins"],"sub_categories":["Framework-agnostic Plugins"],"readme":"\u003cbr/\u003e\n\n\u003ch3 align=\"center\"\u003e\n    \u003cp\u003eVite Plugin - Optimize CSS Modules\u003c/p\u003e\n\u003c/h3\u003e\n\n\u003ch6 align=\"center\"\u003e\n    \u003cp\u003e\u003ca href=\"#how-does-it-work\"\u003eMangle classnames in production\u003c/a\u003e - save up to 30% on css and 90% of build time for free!\u003c/p\u003e\n\u003c/h6\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/Simonwep/vite-plugin-optimize-css-modules/actions/workflows/main.yml\"\u003e\u003cimg\n     alt=\"CI Status\"\n     src=\"https://github.com/Simonwep/vite-plugin-optimize-css-modules/actions/workflows/main.yml/badge.svg\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vite-plugin-optimize-css-modules\"\u003e\u003cimg\n     alt=\"Install count\"\n     src=\"https://img.shields.io/npm/dm/vite-plugin-optimize-css-modules.svg\"\u003e\u003c/a\u003e\n  \u003cimg alt=\"Current version\"\n       src=\"https://img.shields.io/github/tag/Simonwep/vite-plugin-optimize-css-modules.svg?color=3498DB\u0026label=version\"\u003e\n  \u003ca href=\"https://github.com/sponsors/Simonwep\"\u003e\u003cimg\n     alt=\"Support me\"\n     src=\"https://img.shields.io/badge/github-support-3498DB.svg\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n### Setup\n\nThis plugin requires [vite](https://vitejs.dev/) of v3 or greater.\nIt only makes sense to use if you're using [css modules](https://vitejs.dev/config/shared-options.html#css-modules).\n\n```sh\n$ npm install --save-dev vite-plugin-optimize-css-modules\n```\n\nIn your [`vite.config.ts`](https://vitejs.dev/config/#configuring-vite) simply add the plugin:\n\n```ts\nimport { optimizeCssModules } from 'vite-plugin-optimize-css-modules';\nimport { defineConfig } from 'vite';\n\nexport default defineConfig({\n    plugins: [\n        optimizeCssModules()\n    ]\n})\n```\n\nAnd that's it. When running `vite build` your generated CSS should be significantly smaller.\n\n### Benchmarks\n\nBenchmarks are done against [bootstrap](https://getbootstrap.com/docs/5.0/getting-started/introduction/) and [materialize.css](https://materializecss.com/getting-started.html) assuming all the classes are used as css modules.\nThe benchmark code is located in the [benchmarks](./benchmarks) directory.\n\nRun them by building the plugin via `npm run build` and then running `npm run benchmarks`.\nThe results below are from a MacBook Air M2 with node v22.8.0.\n\n| Input                                                                            | Build Time                            | Gzip Size                                | Brotli Size                             |\n|----------------------------------------------------------------------------------|---------------------------------------|------------------------------------------|-----------------------------------------|\n| [bootstrap-5.0.2.module.css](benchmarks/fixtures/bootstrap-5.0.2.module.css)     | 525ms (_**-94.06%**_ / _**-8311ms**_) | 21.3 kB (_**-26.53%**_ / _**-7.69 kB**_) | 21.3 kB (_**-27.54%**_ / _**-6 kB**_)   |\n| [materialize-1.0.0.module.css](benchmarks/fixtures/materialize-1.0.0.module.css) | 572ms (_**-92.59%**_ / _**-7156ms**_) | 20.1 kB (_**-19.70%**_ / _**-4.93 kB**_) | 20.1 kB (_**-21.33%**_ / _**-4.3 kB**_) |\n\n\n### How does it work?\n\nBy default, when using css modules, you end up with hashes or other long class-names in your bundled css files:\n\n```css\n@keyframes _close-card_pzatx_1 {\n    /* ...css */\n}\n\n._card_pzatx_32 {\n    /* ...css */\n}\n\n._back_pzatx_49 ._content_pzatx_70 ._close_pzatx_74 {\n    /* ...css */\n}\n```\n\nBy using this module, the smalles possible classname will be used for each \"id\":\n\n```css\n@keyframes a {\n    /* ...css */\n}\n\n.v {\n    /* ...css */\n}\n\n.c .s .w {\n    /* ...css */\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSimonwep%2Fvite-plugin-optimize-css-modules","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSimonwep%2Fvite-plugin-optimize-css-modules","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSimonwep%2Fvite-plugin-optimize-css-modules/lists"}