vite-plugin-html-purgecss-extended

This Vite plugin purges CSS based on HTML output using PurgeCSS.

✔️ Works with Multi Page App

✔️ Content/pattern setup is not required - plugin purges styles over the whole HTML code which is being resolved by Vite

✔️ If you need to supply extra content (external HTML files, that is possible as an option)

✔ Classes can be dynamically created ('bg-' + true ? 'red' : 'blue') because PurgeCSS runs over already generated HTML (post).

Install

Yarn

yarn add vite-plugin-html-purgecss-extended -D

or npm

npm i vite-plugin-html-purgecss-extended --save-dev

Usage

Configuration

Use plugin in your Vite config (vite.config.ts)

import htmlPurge from 'vite-plugin-html-purgecss-extended'

export default {
    plugins: [
        htmlPurge(),
    ]
}

Options

Parameter	Type	Description
options	VitePurgeCSSOptions	A subset of UserDefinedOptions defined here in the purgecss docs.

VitePurgeCSSOptions exposes "content" | "variables" | "defaultExtractor" | "safelist"