vite-plugin-laravel-purgecss

A Vite plugin that integrates PurgeCSS with Laravel 9-12 template assets (currently updated up to laravel/[email protected]).

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

📦 Installation

Using pnpm:

pnpm add -D @erbelion/vite-plugin-laravel-purgecss

Using yarn:

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

Using npm:

npm i -D @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