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 10/9 template assets (currently updated to laravel/laravel@10.2.9).

It purges assets only in production mode (yarn build/npm run build).

Installation

yarn

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

npm

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

Usage

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

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

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

See more examples

Options

Parameter	Type	Description
templates?	`string[]`	List of ready paths to be processed by PurgeCSS. See below.
paths?	`string[]`	List of paths to be processed by PurgeCSS.
safelist?	`UserDefinedSafelist`	Check available safelist options in PurgeCSS docs.
extractors?	`Extractors[]`	Check available extractors options in PurgeCSS docs.

Templates

Parameter	Path to be processed
blade	`resources/views/*/.blade.php`
svelte	`resources/{js,views}/*/.svelte`
vue	`resources/{js,views}/*/.vue`
react	`resources/{js,views}/*/.{tsx,ts,jsx,js,html}`
angular	`resources/{js,views}/*/.html`

You may also provide custom paths via paths option.

Other examples

Vue via template option:

purge({
    templates: ['blade', 'vue']
})

Via custom path:

purge({
    paths: ['resources/views/**/*.blade.php']
})

Via custom paths + 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({
    paths: [
        'resources/views/**/*.blade.php',
        'resources/{js,views}/**/*.vue'
    ],
    extractors: [
        {
            extractor: (content) => {
                return content.match(/[a-z-_:\/]+/g) || []
            },
            extensions: ['php', 'vue', 'html']
        }
    ]
})

Tutorial

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

Top categories