Registry / web-framework / vite-plugin-purgecss

vite-plugin-purgecss

library0.2.13jsnpmunverified

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.

web-framework devops

npm install vite-plugin-purgecss

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-PURGEC

vite-plugin-purgecss

web-frameworkjavascriptv0.2.13

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import htmlPurge from 'vite-plugin-purgecss'

✗ import { htmlPurge } from 'vite-plugin-purgecss'

Package exports a default function, not a named export.

UserDefinedOptions

✓ import type { UserDefinedOptions } from 'vite-plugin-purgecss'

✗ import { UserDefinedOptions } from 'vite-plugin-purgecss'

TypeScript users should import the type explicitly with 'import type'.

require usage

✓ const htmlPurge = require('vite-plugin-purgecss')

✗ const { htmlPurge } = require('vite-plugin-purgecss')

CommonJS require returns the default export directly, not an object.

Basic setup of vite-plugin-purgecss in Vite config with safelist option.

// vite.config.ts import { defineConfig } from 'vite'; import htmlPurge from 'vite-plugin-purgecss'; export default defineConfig({ plugins: [ htmlPurge({ content: ['./dist/**/*.html'], // Adjust as needed safelist: ['keep-this-class'], // Prevent removal of critical classes // Additional PurgeCSS options }), ], });

Debug

Known issues

gotchaThe plugin scans JS output for CSS strings, but does not detect dynamic style changes via JavaScript (e.g., element.style.color = 'red').

fix

Add potentially dynamic classes to the safelist manually.

affects: all

gotchaPlugin is a fork of 'vite-plugin-html-purgecss' and may have diverged in options or behavior.

fix

Refer to this plugin's documentation rather than the original.

affects: all

gotchaPurgeCSS removes unused CSS globally; may break styles for classes added by third-party libraries not present in your source code.

fix

Use safelist or allow-duplication options to preserve expected classes.

affects: all

Errors

Common errors & fixes

Error: 'htmlPurge' is not defined

Using named import instead of default import.

fix

Use 'import htmlPurge from 'vite-plugin-purgecss''.

TypeError: htmlPurge is not a function

Importing the package itself as a default export but it's actually a function.

fix

Ensure you are calling the default export as a function: htmlPurge({...}).

Cannot find module 'vite-plugin-purgecss'

Package not installed or typo in import path.

fix

Run 'npm install vite-plugin-purgecss' and check the import path.

Some CSS classes are missing in production build

PurgeCSS removed dynamic classes that were not in the scanned content.

fix

Add missing classes or patterns to the safelist option.

Upgrade

Version history

0.2.13latest on npm

Audit

Dependencies

purgecssrequiredCore PurgeCSS library for analyzing and removing unused CSS

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/colecrouter/vite-plugin-html-purgecss ↗

packagehttps://www.npmjs.com/package/vite-plugin-purgecss ↗