Hi guys. I just wonder if anyone is using this nice package laravel-mix-purgecss in October theme. I am creating one using tailwindcss and build with laravel-mix. I read the docs and configure the webpack.mix.js as following:

mix.setPublicPath('./themes/acme/assets');
mix.postCss('./themes/acme/assets/css/tailwind.css', 'dist/css', [
    tailwindcss
]).purgeCss({
    enabled: mix.inProduction(),
    folders: ['./themes/acme/pages', './themes/acme/partials'],
    extensions: ['htm', 'js', 'html'],
});

But it seems not working: the bundled css size is the same without purgecss. Any advices?

For some reason, I also can't make laravel-mix-purgecss package inside an October theme. Instead I've used @fullhuman/postcss-purgecss and used it on mix's postcss option.

Here's a sample config:

const mix = require('laravel-mix');

const purgeCss = require('@fullhuman/postcss-purgecss');

let postCssPlugins = [
    require('tailwindcss')
];

if (mix.inProduction()) {
    postCssPlugins.push(purgeCss({
        content: [
            'layouts/**/*.htm',
            'pages/**/*.htm',
            'partials/**/*.htm',
        ],
        defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
    }));
}
mix.setPublicPath('./')
.postCss('assets/src/css/style.css', 'assets/dist/css', postCssPlugins);

I'm using a similar config on a theme I've created using Tailwindcss and Purgecss. Hope this helps.

I have switched to gulp 4. Thanks to its plugin gulp-purgecss, everything is working now. gulp gives me more flexibility by assigning a task to every point in my frontend workflow. Here is my gulpfile.js code for purgecss.

const { task, src, dest } = require('gulp'),
        purgecss = require('gulp-purgecss'),
        pipeline = require('readable-stream').pipeline;
const cssDist = 'themes/acme/assets/css';
const dist = 'themes/acme/assets/dist/css';
const twigFiles = 'themes/**/*.htm';

task('purgecss', function () {
    return pipeline(
        src(cssDist + '/*.css'),
        purgecss({
            content: [twigFiles],
            defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
        }),
        dest(dist)
    );
});

The config options of purgecss is somewhat similar to yours, @The Bakerdev. Thank you.

Last updated 3 years ago

hi bonnis26 just lookin at gulp 4 myself but looking at your file not sure how you run the task any help as I an just learning how to intergate gulp into my project