@erbelion/vite-plugin-laravel-purgecss
v0.2.3
Published
A Vite plugin that integrates PurgeCSS with Laravel template assets.
Downloads
1,493
Maintainers
Readme
vite-plugin-laravel-purgecss
A Vite plugin that integrates PurgeCSS with Laravel 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 -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']
})
]
}
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