Combined files are not supported

[cmizzi]

I'm currently combined two CSS files (font-awesome with a custom CSS) but font-awesome selectors are not trimmed

mix
    .version()
    .options({
        postCss : [
            require('precss')(),
            require('tailwindcss')('./tailwind.js'),
            require('autoprefixer'),
            require('postcss-nested'),
        ]
    })
    .postCss('resources/assets/sass/app.css', 'public/css')
    .combine([
        'node_modules/@fortawesome/fontawesome-free-webfonts/css/fontawesome.css',
        'node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-brands.css',
        'node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-regular.css',
        'node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-solid.css',
        'public/css/app.css',
    ], 'public/css/app.css')
    .purgeCss({
        only : ['css/app.css'],
        fontFaces : true,
        keyframes : true,
        whitelistPatternsChildren : [
            /^(dpe|ges)/
        ]
    })

I think that the combine is called after the purgecss in the pipeline. Any suggestion ?

[sebastiandedeyne]

What package versions are installed?

[cmizzi]

I've downgrade them because purgecss was not applied on any file (#22)

├─ laravel-mix-purgecss@1.0.5
├─ laravel-mix@2.0.0

[sebastiandedeyne]

Did some digging in Mix's source code and I'm afraid we won't be able to support this.

The combine function creates a new mix "task" that get run after Webpack, while Purgecss is a Webpack plugin.

I'd recommend not using combine at all, and importing those assets in your css/sass file directly.

[JCarlosR]

Thank you @sebastiandedeyne.

Before I was using something like this:

mix
    // ...
    .styles([
        'resources/assets/css/vendor/1.min.css',
        'resources/assets/css/vendor/2.min.css'
    ], 'public/css/app.css')
    .purgeCss()
;

And the app.css was not purged at all. I thought it was not looking correctly for the blade/php/html files and tried adding config parameters with no luck.

After creating a sass/app.scss file (and moving the fonts and images required by them):

@import "../css/vendor/1.min.css";
@import "../css/vendor/2.min.css";

I finally got it working:

mix
    // ...
    .sass('resources/assets/sass/app.scss', 'public/css')
    .purgeCss()
;

It's unbelievable that the css file was reduced to less than the 3rd part of the original size and the app still looks the same. I will need to navigate between the sections before publishing.