@reuters-graphics/vite-plugin-purge-styles

A shameless copy of vite-plugin-tailwind-purgecss, which is being deprecated in favour of in-built capabilities in tailwind 4.

We weren't using it with tailwind, but found it generic enough pre-0.3.0 to purge unused styles from our tailwind-like Reuters Graphics design system.

THUS... this shadow library to keep us going.

Usage

Installation

npm i -D @reuters-graphics/vite-plugin-purge-styles

Add to Vite

// vite.config.ts
import { purgeStyles } from '@reuters-graphics/vite-plugin-purge-styles';

const config: UserConfig = {
	plugins: [sveltekit(), purgeStyles()],
};

Safelisting

If selectors that shouldn't be purged are being removed, simply add them to the safelist.

// vite.config.ts
import { purgeStyles } from '@reuters-graphics/vite-plugin-purge-styles';

const config: UserConfig = {
	plugins: [
		sveltekit(),
		purgeStyles({
			safelist: {
				// any selectors that begin with "hljs-" will not be purged
				greedy: [/^hljs-/],
			},
		}),
	],
};

Alternatively, if you'd like to safelist selectors directly in your stylesheets, you can do so by adding special comments:

/*! purgecss start ignore */

h1 {
	color: red;
}

h2 {
	color: blue;
}

/*! purgecss end ignore */

You can also safelist selectors directly in the declaration block as well:

h3 {
	/*! purgecss ignore current */
	color: pink;
}

NEW! You can safelist any selectors from CSS or SCSS stylesheets matching glob patterns:

// vite.config.ts
import { purgeStyles } from '@reuters-graphics/vite-plugin-purge-styles';

const config: UserConfig = {
	plugins: [
		sveltekit(),
		purgeStyles({
			safelFiles: ['src/styles/**/*.scss']
		}),
	],
};

For further configuration, read PurgeCSS docs.