{"id":22795,"library":"vite-plugin-purgecss-updated-v5","title":"vite-plugin-purgecss-updated-v5","description":"Vite plugin that integrates PurgeCSS to remove unused CSS from production bundles. Version 1.2.7 supports Vite 3 through 8 as peer dependencies, making it future-proof for Vite 5+ projects. TypeScript types included. Key differentiators: automatic detection of CSS modules hashed class names, supports PurgeCSS variables option, and passes Vite chunks as content automatically, reducing configuration overhead.","status":"active","version":"1.2.7","language":"javascript","source_language":"en","source_url":"https://github.com/rsnakdmx/vite-plugin-purgecss-v5","tags":["javascript","PurgeCSS","Vite","Vite Plugin","typescript"],"install":[{"cmd":"npm install vite-plugin-purgecss-updated-v5","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-purgecss-updated-v5","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-purgecss-updated-v5","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; plugin requires Vite to function","package":"vite","optional":true}],"imports":[{"note":"Package is ESM-only; named exports may not be available. Default import is the plugin function.","wrong":"const pluginPurgeCss = require('vite-plugin-purgecss-updated-v5')","symbol":"default export (pluginPurgeCss)","correct":"import pluginPurgeCss from 'vite-plugin-purgecss-updated-v5'"},{"note":"Type import for PurgeCSS options, available since v1.0.0","symbol":"Options type","correct":"import type { UserDefinedOptions } from 'vite-plugin-purgecss-updated-v5'"},{"note":"Options object is passed directly; variables is a boolean, not a string.","wrong":"plugins: [pluginPurgeCss({ variables: 'true' })]","symbol":"Plugin registration","correct":"plugins: [pluginPurgeCss({ variables: true })]"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport pluginPurgeCss from 'vite-plugin-purgecss-updated-v5';\n\nexport default defineConfig({\n  plugins: [\n    pluginPurgeCss({\n      safelist: {\n        standard: ['body', 'html'],\n        deep: [/^my-/],\n        greedy: [/^my-/],\n      },\n      variables: true,\n      fontFace: false,\n      keyframes: false,\n    }),\n  ],\n});","lang":"typescript","description":"Sets up PurgeCSS with Vite, safelisting elements and regex patterns, enabling variable purging, and disabling font-face/keyframe removal."},"warnings":[{"fix":"Use the default automatic content detection; only provide raw strings or already-processed file paths.","message":"The `content` and `css` options bypass Vite's build pipeline. Do not pass files requiring Vite processing (e.g., .vue, .svelte) to these options.","severity":"gotcha","affected_versions":"*"},{"fix":"Use 'vite-plugin-purgecss-updated-v5' as shown in documentation.","message":"Package name differs from original '@mojojoejo/vite-plugin-purgecss' which may cause confusion. Ensure correct import path.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Check your Vite version and ensure it matches the peer range: '^3 || ^4 || ^5 || ^6 || ^7 || ^8'.","message":"Plugin expects Vite 5+ but also supports older versions as peer (3, 4). Incorrect peer resolution may cause silent failures.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Avoid overriding `defaultExtractor` when using CSS Modules; use the built-in handling instead.","message":"CSS Modules are automatically supported via postcss-modules, but custom extractors may interfere with hashed class name detection.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run: npm install --save-dev vite-plugin-purgecss-updated-v5","cause":"Package not installed or incorrect import path.","error":"Error: Cannot find module 'vite-plugin-purgecss-updated-v5'"},{"fix":"Use: import pluginPurgeCss from 'vite-plugin-purgecss-updated-v5'","cause":"Using CommonJS require() instead of ESM import.","error":"TypeError: pluginPurgeCss is not a function"},{"fix":"Add safelist options to preserve those classes: safelist: { standard: ['dynamic-class'] }","cause":"PurgeCSS removed classes that are dynamically added, e.g., via JavaScript.","error":"ERROR: Unused CSS - expected classes removed"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}