@zokki/astro-purgecss

This integration uses purgecss to remove unused css. This works for css-files and for style-tags in html-files.

Note

astro-purgecss only for statically generated build and pre-rendered routes.

Installation

1. Install with npm.

   npm install @zokki/astro-purgecss
   

2. Import into the astro-config.

   import { purgecss } from '@zokki/astro-purgecss';
   
   export default defineConfig({
   	integrations: [purgecss()],
   });
   

Configuration

/**
 * Toggle logging of all purged files
 *
 * @default true
 */
logAllFiles?: boolean;
/**
 * Should purgecss purge styles in html-files
 *
 * @default true
 */
purgeInHtml?: boolean;
/**
 * A regex to extract css-vars from html
 *
 * @default /--[!\w\-%:+]+(?<!:)/g
 */
variableExtractor?: RegExp;
/**
 * Config for purgecss
 *
 * @default
 * {
 * 	defaultExtractor: content => content.match(/(--)?[!\w\-%:+]+(?<!:)/g) || [],
 * 	safelist: {
 * 		// purgecss falsly purges some css
 * 		standard: [
 * 			// https://github.com/FullHuman/purgecss/issues/1153
 * 			/:hover/,
 * 			// https://github.com/FullHuman/purgecss/issues/978
 * 			/:where/,
 * 			/:is/,
 * 			// https://github.com/FullHuman/purgecss/issues/1197
 * 			/:not/,
 * 			// https://github.com/FullHuman/purgecss/issues/1215
 * 			/:has/,
 * 		],
 * 	},
 * 	variables: true,
 * 	fontFace: true,
 * }
 */
purgecssConfig?: Omit<UserDefinedOptions, 'content' | 'css'>;

License

MIT © Tim-Niclas Oelschläger