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

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

📦 Installation

yarn

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

npm

npm i @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()
    ]
}

See more examples

🛠️ Options

Parameter	Type	Optional	Description
paths	`string[]`	yes	List of paths to be processed by PurgeCSS.
PurgeCSS Options	`Partial<UserDefinedOptions>`	yes	PurgeCSS options (see docs).
templates	`string[]`	yes	❌ deprecated (see anyway).

`paths` option

If paths option isn't specified, it will default to: resources/{js,views}/**/*.{blade.php,svelte,vue,html}

All options

type Options = {

  // plugin options
  paths?: string[]
  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 + 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