vite-plugin-laravel-purgecss

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

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