How to remove unused CSS using purgeCSS from ghost theme?

Themes
1

Taking the example of the Casper theme, how can I remove unused CSS by using something like purgecss?

function css(done) {
    pump([
        src('assets/css/*.css', {sourcemaps: true}),
        postcss([
            easyimport,
            colorFunction(),
            autoprefixer(),
            cssnano()
        ]),
        dest('assets/built/', {sourcemaps: '.'}),
        livereload()
    ], handleError(done));

Can someone please help with the relevant modification to the above code?

2

Hi

In one of our themes, we are using purgecss as a separate task, and it looks like this:

gulp.task('purgecss', () => {
    return gulp.src('assets/built/main-min.css')
        .pipe(purgecss({
            content: ['*.hbs', 'partials/*.hbs', 'partials/icons/*.hbs', 'assets/js/main.js','assets/js/lib/splide.min.js','assets/js/lib/pagination.js','assets/js/lib/fitvids.js',,'assets/js/lib/ghost-search.js', 'assets/css/elements/*.scss'],
            safelist: ['splide__pagination','splide__pagination__page']
        }))
        .pipe(gulp.dest('assets/built/clean'))
});

We have listed all the assets and .hbs files so purgecss will know the protected words. Try it there is a lot of tweaks that you need to do and see what will work for you.

I hope that this helps

2 Likes
3

that didn’t seem to work. is there a code sandbox that I can checkout?