0.2.3 • Published 6 months ago
@erbelion/vite-plugin-laravel-purgecss v0.2.3
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']
})
]
}
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