Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/spatie/laravel-mix-purgecss
Zero-config Purgecss for Laravel Mix
https://github.com/spatie/laravel-mix-purgecss
laravel-mix purgecss purgecss-wrapper
Last synced: 6 days ago
JSON representation
Zero-config Purgecss for Laravel Mix
- Host: GitHub
- URL: https://github.com/spatie/laravel-mix-purgecss
- Owner: spatie
- License: mit
- Created: 2018-01-10T13:29:48.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2022-03-21T13:01:56.000Z (almost 3 years ago)
- Last Synced: 2024-12-29T09:02:43.464Z (13 days ago)
- Topics: laravel-mix, purgecss, purgecss-wrapper
- Language: JavaScript
- Homepage: https://spatie.be/en/opensource
- Size: 574 KB
- Stars: 874
- Watchers: 10
- Forks: 38
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome - spatie/laravel-mix-purgecss - Zero-config Purgecss for Laravel Mix (JavaScript)
README
[
](https://supportukrainenow.org)
# PurgeCSS wrapper for Laravel Mix
[](LICENSE.md)
[](https://npmjs.com/package/laravel-mix-purgecss)
[](https://www.npmjs.com/package/laravel-mix-purgecss)
This package adds a `purgeCss` option to Laravel Mix, which installs PurgeCSS for you with a set of sensible defaults for Laravel applications.
```js
const mix = require('laravel-mix');
require('laravel-mix-purgecss');
// ...
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.purgeCss();
```
## Support us
[
](https://spatie.be/github-ad-click/laravel-mix-purgecss)
We invest a lot of resources into creating [best in class open source packages](https://spatie.be/open-source). You can support us by [buying one of our paid products](https://spatie.be/open-source/support-us).
We highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using. You'll find our address on [our contact page](https://spatie.be/about-us). We publish all received postcards on [our virtual postcard wall](https://spatie.be/open-source/postcards).
## Installation
Before you get started, make sure you're using `laravel-mix` version 5.0.0 or higher.
You can install the package with yarn or npm:
```bash
yarn add laravel-mix-purgecss --dev
```
```bash
npm install laravel-mix-purgecss --save-dev
```
Then install the extension by requiring the module in your Mix configuration.
```js
const mix = require('laravel-mix');
require('laravel-mix-purgecss');
// ...
```
PurgeCSS can be enabled by calling `.purgeCss()` in your Mix chain.
```js
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.purgeCss();
```
By default, PurgeCSS only works when building assets for production. You can override this behaviour by specifying the `enabled` option.
```js
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.purgeCss({
enabled: true,
});
```
### Important notice for `mix.postCss` or `postcss.config.js` users
When you use `mix.postCss()` or a seperate `postcss.config.js` file, Mix _overrides_ all other PostCSS plugins, including the PurgeCSS instance added by this plugin.
To work around this issue, either:
1) Include your PostCSS plugins with `mix.options()`
```diff
const mix = require('laravel-mix');
require('laravel-mix-purgecss');
mix.js('resources/js/app.js', 'public/js')
- .postCss('resources/sass/app.css', 'public/css', [
- require('tailwindcss')(),
- ])
+ .postCss('resources/sass/app.css', 'public/css')
+ .options({
+ postCss: [require('tailwindcss')]
+ })
.purgeCss();
```
2) Don't use this package, and use [`postcss-purgecss-laravel`](https://github.com/spatie/postcss-purgecss-laravel) instead
```diff
const mix = require('laravel-mix');
- require('laravel-mix-purgecss');
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/sass/app.css', 'public/css', [
require('tailwindcss')(),
+ require('postcss-purgecss-laravel')({ /* ... */ }),
])
.purgeCss();
```
## PurgeCSS customization
Custom options can be passed when calling PurgeCSS if necessary. Visit PurgeCSS' [docs](https://purgecss.com/configuration.html#options) to learn more about the available options.
```js
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.purgeCss({
content: [path.join(__dirname, 'vendor/spatie/menu/**/*.php')],
safelist: { deep: [/hljs/] },
});
```
Passing options will _override_ the package defaults. If you want to _extend_ the package defaults, wrap them in an `extend` object.
```js
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.purgeCss({
extend: {
content: [path.join(__dirname, 'vendor/spatie/menu/**/*.php')],
safelist: { deep: [/hljs/] },
},
});
```
This package uses [`postcss-purgecss-laravel`](https://github.com/spatie/postcss-purgecss-laravel) under the hood, which has the following defaults:
```js
const defaultConfig = {
content: [
"app/**/*.php",
"resources/**/*.html",
"resources/**/*.js",
"resources/**/*.jsx",
"resources/**/*.ts",
"resources/**/*.tsx",
"resources/**/*.php",
"resources/**/*.vue",
"resources/**/*.twig",
],
defaultExtractor: (content) => content.match(/[\w-/.:]+(?