Scan files with .css extension

Love this package, thanks so much! This is a different question from #67 (I am sending my css through postCSS, and I’m trying to not purge certain classes).

Maybe I’m missing something, but is there a way to scan for classes defined in my own .css files? Very minimal reproduction of my setup:

// webpack.mix.js

mix.postCss('resources/css/app.css', 'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
])

if (mix.inProduction()) {
    mix.purgeCss({
        extensions: ['html', 'js', 'php', 'vue', 'css']
    })
}

/* resources/css/app.css */
@import 'custom';

/* resources/css/custom.css */
.special-snowflake-class {
    @apply .block .bg-blue-500;
    height: 42px;
}

I would have thought that because I listed css in the extensions to scan, any of my own classes in my css files would be included, that’s not happening. I need .special-snowflake-class included in my build even if it doesn’t appear anywhere else in my project besides where it’s defined in custom.css. Is that possible?

Thanks!

[sebastiandedeyne]

Iirc mix.styles only concatenates css files, it doesn’t do any processing. You’ll need to use mix.postCss instead.

[btumbleson]

@bakerkretzmar Surprisingly painless and disappointed I didn’t figure that out myself. Thanks for pointing me in the right direction. In case anyone else lands here, Baker has the right approach from his comment:

mix.js('resources/assets/js/app.js', 'public/js')
    .options({
        processCssUrls: false,
        postCss: [
            require('postcss-import'),
        ]
    });

mix.postCss('resources/assets/css/client/combined.css','public/css/client-app.css')
    .purgeCss();