laravel-mix-purgecss

    6.0.0 • Public • Published

    PurgeCSS wrapper for Laravel Mix

    Software License Latest Version on NPM npm

    This package adds a purgeCss option to Laravel Mix, which installs PurgeCSS for you with a set of sensible defaults for Laravel applications.

    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

    We invest a lot of resources into creating best in class open source packages. You can support us by buying one of our paid products.

    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. We publish all received postcards on our virtual postcard wall.

    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:

    yarn add laravel-mix-purgecss --dev
    npm install laravel-mix-purgecss --save-dev

    Then install the extension by requiring the module in your Mix configuration.

    const mix = require('laravel-mix');
    require('laravel-mix-purgecss');
    
    // ...

    PurgeCSS can be enabled by calling .purgeCss() in your Mix chain.

    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.

    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()
      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();
    1. Don't use this package, and use postcss-purgecss-laravel instead
      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 to learn more about the available options.

    mix.js('resources/js/app.js', 'public/js')
       .sass('resources/sass/app.scss', 'public/css')
       .purgeCss({
           content: [path.join(__dirname, 'vendor/spatie/menu/**/*.php')],
           whitelistPatterns: [/hljs/],
       });

    Passing options will override the package defaults. If you want to extend the package defaults, wrap them in an extend object.

    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')],
               whitelistPatterns: [/hljs/],
           },
       });

    This package uses postcss-purgecss-laravel under the hood, which has the following defaults:

    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-/.:]+(?<!:)/g) || [],
        whitelistPatterns: [/-active$/, /-enter$/, /-leave-to$/, /show$/],
    }

    Changelog

    Please see CHANGELOG for more information what has changed recently.

    Contributing

    Please see CONTRIBUTING for details.

    Security

    If you discover any security related issues, please email freek@spatie.be instead of using the issue tracker.

    Postcardware

    You're free to use this package, but if it makes it to your production environment we highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using.

    Our address is: Spatie, Kruikstraat 22, 2018 Antwerp, Belgium.

    We publish all received postcards on our company website.

    Credits

    Support us

    Spatie is a webdesign agency based in Antwerp, Belgium. You'll find an overview of all our open source projects on our website.

    Does your business depend on our contributions? Reach out and support us on Patreon. All pledges will be dedicated to allocating workforce on maintenance and new awesome stuff.

    License

    The MIT License (MIT). Please see License File for more information.

    Keywords

    Install

    npm i laravel-mix-purgecss

    DownloadsWeekly Downloads

    9,206

    Version

    6.0.0

    License

    MIT

    Unpacked Size

    13.6 kB

    Total Files

    15

    Last publish

    Collaborators

    • spatie