Vite Plugin Laravel Purgecss

A Vite plugin that integrates PurgeCSS with Laravel template assets. Apart from Blade, it also supports frontend frameworks such as Svelte, Vue, React and Angular. It works well with Inertia.

Download

vite-plugin-laravel-purgecss

A Vite plugin that integrates PurgeCSS with Laravel 9-12 template assets (currently updated up to laravel/laravel@12.0.9).

This plugin purges unused CSS assets only in production mode (yarn build / npm run build).

📦 Installation

Using Yarn:

yarn add @erbelion/vite-plugin-laravel-purgecss

Using npm:

npm i @erbelion/vite-plugin-laravel-purgecss

🚀 Usage

To use the plugin in your Vite configuration (vite.config.ts):

import purge from '@erbelion/vite-plugin-laravel-purgecss'

export default {
    plugins: [
        laravel(...),
        purge()
    ]
}

See more examples

🛠️ Options

Parameter	Type	Optional	Description
paths	`string[]`	Yes	List of paths to be processed by PurgeCSS.
rehash	`boolean`	Yes	Determines whether to hash asset filenames after purging.
PurgeCSS Options	`Partial<UserDefinedOptions>`	Yes	PurgeCSS options (see docs).
templates	`string[]`	Yes	❌ Deprecated (see anyway).

`paths` Option

If the paths option isn't specified, it will default to:

resources/{js,views}/**/*.{blade.php,svelte,vue,html}

`rehash` Option

If the rehash option isn't specified, it will default to true

All Options

type Options = {
    // Plugin options
    paths?: string[] // Defaults to `resources/{js,views}/**/*.{blade.php,svelte,vue,html}`
    rehash?: boolean // Defaults to `true`
    templates?: string[] // ❌ Deprecated

    // PurgeCSS options
    defaultExtractor?: ExtractorFunction
    extractors?: Array<Extractors>
    fontFace?: boolean
    keyframes?: boolean
    output?: string
    rejected?: boolean
    rejectedCss?: boolean
    stdin?: boolean
    stdout?: boolean
    variables?: boolean
    safelist?: UserDefinedSafelist
    blocklist?: StringRegExpArray
}

💡 Other Examples

Via custom path:

purge({
    paths: ["resources/{js,views}/**/*.{blade.php,svelte,vue,html}"],
})

Via custom paths + safe list styling: (always keep #bruh, .nice-button, and h1 styling)

purge({
    paths: ["resources/views/**/*.blade.php", "resources/{js,views}/**/*.vue"],
    safelist: ["bruh", "nice-button", "h1"],
})

Example config with fix for escaped prefixes (sm:, lg:, etc.):

purge({
    extractors: [
        {
            extractor: (content) => {
                return content.match(/[a-z-_:\/]+/g) || []
            },
            extensions: ["php", "vue", "html"],
        },
    ],
})

📚 Tutorial

https://github.com/erbelion/tutorial-vite-plugin-laravel-purgecss

👉 See Also

vite-plugin-sveltekit-purgecss

Top categories