rollup-plugin-purgecss-sveltekit

rollup-plugin-purgecss-sveltekit

A simple rollup plugin that throughly purges excess CSS from Svelte projects using PurgeCSS. Excellent when combining Tailwind with a Tailwind specific UI library such as Skeleton.

Motivation

PurgeCSS is a great package that does its job very well. Their provided plugins for extraction do a decent job for simple projects. However, plugins such as postcss-purgecss and rollup-plugin-purgecss do their jobs rather naively. They only analyze the content that is passed to them through their content fields, which means that if you pass a UI library to it, none of the selectors that are unused in your project (such as components that aren't imported) will be properly purged. Leaving you with a larger than necessary CSS bundle.

Ideally, we'd like to only keep the selectors that are used in your project, and only the ones that are imported from a library. We accomplish this by walking Svelte's AST, extracting out any the possible selectors (thanks to code lifted from carbon-preprocess-svelte's optimizeCss() plugin), followed by the extraction of potential selectors from the emitted JS chunks from rollup. From there, we can pass along the selectors to PurgeCSS for the final extraction.

Usage

Installation

npm i -D rollup-plugin-purgecss-sveltekit

Add to Vite

// vite.config.ts
import { purgeCss } from "rollup-plugin-purgecss-sveltekit";

const config: UserConfig = {
	plugins: [
		sveltekit(),
		process.env.NODE_ENV === "production" && purgeCss(), // we only want it to run in production
	],
};

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

// vite.config.ts
import { purgeCss } from "rollup-plugin-purgecss-sveltekit";

const config: UserConfig = {
	plugins: [
		sveltekit(),
		process.env.NODE_ENV === "production" &&
			purgeCss({
				safelist: {
					// any selectors that begin with "hljs-" will not be purged
					greedy: [/^hljs-/],
				},
			}),
	],
};

Credits

Foundationally based from carbon-preprocess-svelte for the preprocessing of svelte components. We've added further logic to include selectors that may live in JS/TS files as well.