{"id":22796,"library":"vite-plugin-purgecss","title":"vite-plugin-purgecss","description":"A Vite plugin that removes unused CSS from the production build by integrating PurgeCSS. Version 0.2.13, actively maintained with occasional updates. Fork of vite-plugin-html-purgecss, it scans both HTML and JS output to find CSS class references, making it compatible with JavaScript frameworks like SvelteKit. Unlike PurgeCSS CLI, it works seamlessly within Vite's build pipeline without extra configuration. Lightweight and easy to set up, it accepts all standard PurgeCSS options including safelist for preserving dynamic classes. Supports TypeScript with bundled type definitions.","status":"active","version":"0.2.13","language":"javascript","source_language":"en","source_url":"https://github.com/colecrouter/vite-plugin-html-purgecss","tags":["javascript","vite","vite-plugin","purgecss","typescript"],"install":[{"cmd":"npm install vite-plugin-purgecss","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-purgecss","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-purgecss","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core PurgeCSS library for analyzing and removing unused CSS","package":"purgecss","optional":false}],"imports":[{"note":"Package exports a default function, not a named export.","wrong":"import { htmlPurge } from 'vite-plugin-purgecss'","symbol":"default","correct":"import htmlPurge from 'vite-plugin-purgecss'"},{"note":"TypeScript users should import the type explicitly with 'import type'.","wrong":"import { UserDefinedOptions } from 'vite-plugin-purgecss'","symbol":"UserDefinedOptions","correct":"import type { UserDefinedOptions } from 'vite-plugin-purgecss'"},{"note":"CommonJS require returns the default export directly, not an object.","wrong":"const { htmlPurge } = require('vite-plugin-purgecss')","symbol":"require usage","correct":"const htmlPurge = require('vite-plugin-purgecss')"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport htmlPurge from 'vite-plugin-purgecss';\n\nexport default defineConfig({\n  plugins: [\n    htmlPurge({\n      content: ['./dist/**/*.html'],  // Adjust as needed\n      safelist: ['keep-this-class'],  // Prevent removal of critical classes\n      // Additional PurgeCSS options\n    }),\n  ],\n});","lang":"typescript","description":"Basic setup of vite-plugin-purgecss in Vite config with safelist option."},"warnings":[{"fix":"Add potentially dynamic classes to the safelist manually.","message":"The plugin scans JS output for CSS strings, but does not detect dynamic style changes via JavaScript (e.g., element.style.color = 'red').","severity":"gotcha","affected_versions":"all"},{"fix":"Refer to this plugin's documentation rather than the original.","message":"Plugin is a fork of 'vite-plugin-html-purgecss' and may have diverged in options or behavior.","severity":"gotcha","affected_versions":"all"},{"fix":"Use safelist or allow-duplication options to preserve expected classes.","message":"PurgeCSS removes unused CSS globally; may break styles for classes added by third-party libraries not present in your source code.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Use 'import htmlPurge from 'vite-plugin-purgecss''.","cause":"Using named import instead of default import.","error":"Error: 'htmlPurge' is not defined"},{"fix":"Ensure you are calling the default export as a function: htmlPurge({...}).","cause":"Importing the package itself as a default export but it's actually a function.","error":"TypeError: htmlPurge is not a function"},{"fix":"Run 'npm install vite-plugin-purgecss' and check the import path.","cause":"Package not installed or typo in import path.","error":"Cannot find module 'vite-plugin-purgecss'"},{"fix":"Add missing classes or patterns to the safelist option.","cause":"PurgeCSS removed dynamic classes that were not in the scanned content.","error":"Some CSS classes are missing in production build"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}