A Vite plugin that integrates PurgeCSS with Laravel 11/10/9 template assets (currently updated to laravel/laravel@11.3.2).
It purges assets only in production mode (yarn build
/npm run build
).
yarn
yarn add @erbelion/vite-plugin-laravel-purgecss
npm
npm i @erbelion/vite-plugin-laravel-purgecss
Use plugin in your Vite config (vite.config.ts
)
import purge from '@erbelion/vite-plugin-laravel-purgecss'
export default {
plugins: [
laravel(...),
purge()
]
}
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
optionIf paths
option isn't specified, it will default to:
resources/{js,views}/**/*.{blade.php,svelte,vue,html}
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
}
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']
}
]
})
https://github.com/erbelion/tutorial-vite-plugin-laravel-purgecss