{"id":25975740,"url":"https://github.com/myelophone/vite-plugin-purgecss","last_synced_at":"2026-05-08T14:42:51.457Z","repository":{"id":280521125,"uuid":"942258747","full_name":"Myelophone/vite-plugin-purgecss","owner":"Myelophone","description":"Updated Vite plugin for removing unused CSS from generated bundles with PurgeCSS (instead of deprecated @mojojoejo/vite-plugin-purgecss).","archived":false,"fork":false,"pushed_at":"2025-03-03T21:41:30.000Z","size":2030,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-03-03T22:28:01.942Z","etag":null,"topics":["plugin","purgecss","vite"],"latest_commit_sha":null,"homepage":"","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/Myelophone.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2025-03-03T20:35:59.000Z","updated_at":"2025-03-03T21:41:34.000Z","dependencies_parsed_at":"2025-03-03T22:38:11.355Z","dependency_job_id":null,"html_url":"https://github.com/Myelophone/vite-plugin-purgecss","commit_stats":null,"previous_names":["myelophone/vite-plugin-purgecss"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Myelophone%2Fvite-plugin-purgecss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Myelophone%2Fvite-plugin-purgecss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Myelophone%2Fvite-plugin-purgecss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Myelophone%2Fvite-plugin-purgecss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Myelophone","download_url":"https://codeload.github.com/Myelophone/vite-plugin-purgecss/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241956595,"owners_count":20048662,"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":["plugin","purgecss","vite"],"created_at":"2025-03-05T03:23:54.012Z","updated_at":"2026-05-08T14:42:51.198Z","avatar_url":"https://github.com/Myelophone.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @myelophone/vite-plugin-purgecss\n\n[Vite](https://vitejs.dev/) plugin for removing unused CSS from generated bundles using [PurgeCSS](https://purgecss.com/).\n\nAs @mojojoejo/vite-plugin-purgecss has been depreceated.\n\nThis plugin is with actual updated dependencies. Can be used with Nuxt3.\n\n## 📦 Install\n\n**Add as a devDependency**:\n\n```sh\n{\n \"devDependencies\": {\n  \"@myelophone/vite-plugin-purgecss\": \"https://github.com/myelophone/vite-plugin-purgecss.git\",\n }\n}\n```\n\n**And run install**:\n\n```sh\nyarn install\n```\n\n## 🚀 Usage\n\n### Basic\n\nOmitting the options argument will use the default PurgeCSS options to clean\nthe CSS output of the Vite build.\n\n```ts\n// vite.config.ts\nimport pluginPurgeCss from \"@myelophone/vite-plugin-purgecss\";\n\nexport default {\n  plugins: [\n    pluginPurgeCss(),\n  ],\n};\n\n```\n\n### Lazy\n\nLoad plugin using async await (so, that it could be used as devDependencies).\n\n```ts\n// vite.config.ts\n\nconst defaultPlugins = []\n\nexport default defineConfig(async ({ command, mode, isSsrBuild, isPreview }) =\u003e {\n  if (command === 'build') {\n    const { default: pluginPurgeCss } = await import('@myelophone/vite-plugin-purgecss')\n    defaultPlugins.push(pluginPurgeCss())\n  }\n return {\n  plugins: defaultPlugins,\n }\n}\n\n```\n\n### With CSS Variables\n\nTo remove unused CSS variable declarations and invalid `var()` functions,\nenable the `variables` PurgeCSS option.\n\n```ts\n// vite.config.ts\nimport pluginPurgeCss from \"@myelophone/vite-plugin-purgecss\";\n\nexport default {\n  plugins: [\n    pluginPurgeCss({\n      variables: true,\n    }),\n  ],\n};\n\n```\n\n### With external files\n\nTo recognize class names defined in external JavaScript/TypeScript files, or\nany other asset file, use the `content` option to include extracted values.\n\nAn array of CSS file names or raw values can be passed with the `css` option to\nadd CSS content to the output of PurgeCSS.\n\n```ts\n// content/path/custom-classes.ts\nconst customClasses = [\n  \"custom-class-01\",\n  \"custom-class-02\",\n];\n\nexport default customClasses;\n```\n\n```css\n/* css/path/custom-styles.css */\n:root {\n  --custom-property-01: 50% 50%;\n  --custom-property-02: 0 4px 4px rgb(0 0 0 / 0.2);\n}\n```\n\n```ts\n// vite.config.ts\nimport pluginPurgeCss from \"@myelophone/vite-plugin-purgecss\";\n\nexport default {\n  plugins: [\n    pluginPurgeCss({\n      content: [\"content/path/custom-classes.ts\"],\n      css: [\"css/path/custom-styles.css\"],\n      variables: true,\n    }),\n  ],\n};\n\n```\n\n⚠️ **Note**:\n\n- Using the `content` or `css` options circumvents the Vite build process\n(i.e., these values will only be seen by the PurgeCSS process). Do not pass\nfiles to these options that require processing by Vite.\n\n### With CSS Modules\n\nVite uses [postcss-modules](https://github.com/css-modules/postcss-modules) to\nhandle CSS modules, exporting a JSON object with initial class names as keys\nand local hashed class names as values. This feature allows\n`@myelophone/vite-plugin-purgecss` to pick up the modified class names using the\ndefault `content` array. Therefore, there should be no further configuration\nneeded to support CSS Modules.\n\nIf you would like to customize this behavior, see the [Options](#%EF%B8%8F-options)\nsection for more information on configuring Vite and PurgeCSS output.\n\n## ⚙️ Options\n\nAn `Options` object may be passed as the only argument to the plugin. The shape\nof the options object matches that of the\n[PurgeCSS configuration file](https://purgecss.com/configuration.html). Refer\nto the PurgeCSS documentation for more information on how to configure\nPurgeCSS.\n\n```ts\ntype Options = Partial\u003cUserDefinedOptions\u003e;\n\ninterface UserDefinedOptions {\n  content: Array\u003cstring | RawContent\u003e;\n  css: Array\u003cstring | RawCSS\u003e;\n  defaultExtractor?: ExtractorFunction;\n  extractors?: Array\u003cExtractors\u003e;\n  fontFace?: boolean;\n  keyframes?: boolean;\n  output?: string;\n  rejected?: boolean;\n  rejectedCss?: boolean;\n  sourceMap?: boolean | (postcss.SourceMapOptions \u0026 {\n      to?: string;\n  });\n  stdin?: boolean;\n  stdout?: boolean;\n  variables?: boolean;\n  safelist?: UserDefinedSafelist;\n  blocklist?: StringRegExpArray;\n  skippedContentGlobs?: Array\u003cstring\u003e;\n  dynamicAttributes?: string[];\n}\n```\n\n⚠️ **Note**:\n\n- The `content` and `css` options are not required when using the plugin. All\nchunks and non-CSS assets in the bundle will automatically be added to the\n`content` array as raw values. Likewise, CSS assets will be added to the\n`css` array.\n- Custom filenames, globs, and raw values can be passed to the `content` and\n`css` options to include files that are not present in the bundle. These\narrays will be concatenated with the `content` and `css` arrays retrieved\nfrom the bundle.\n\n## 🤔 Caveats\n\n- The plugin utilizes the [generateBundle](https://rollupjs.org/plugin-development/#generatebundle)\nRollup build hook, an [output generation hook](https://vitejs.dev/guide/api-plugin.html#universal-hooks)\nthat is not called during dev. Therefore, PurgeCSS will not modify CSS assets\nwhile using Vite's dev server.\n- The result of using the plugin mimics that of calling the PurgeCSS CLI with\nthe output of a Vite build. The plugin seeks to include this operation within\nthe `vite build` command itself. The following commands provide an example of\nhow this functionality could be implemented using the PurgeCSS CLI.\n\n  ```sh\n  # Using the default output directory: \"dist/\"\n  vite build\n  purgecss --css 'dist/**/*.css' --content 'dist/**/*.!(css)'\n  ```\n\n## 📄 License\n\nMIT License © 2025 [Aliaksandr Ivanou](https://github.com/myelophone)\n\nMIT License © 2023 [Joe Stanley](https://github.com/mojojoejo)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmyelophone%2Fvite-plugin-purgecss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmyelophone%2Fvite-plugin-purgecss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmyelophone%2Fvite-plugin-purgecss/lists"}