slate icon indicating copy to clipboard operation
slate copied to clipboard

Adding PurgeCss to build process

Open fowlercraig opened this issue 5 years ago • 2 comments

Is there any guidance on how to include a plugin like PurgeCss to the build process of Slate? I've tried a couple things, but am somewhat lost.

fowlercraig avatar May 27 '19 19:05 fowlercraig

You can find more info on the Slate Configuration page

Here's my working solution:

const PostcssCssnano = require("cssnano")()
const PostcssAutoprefixer = require("autoprefixer")({ browsers: 'last 2 versions' })
const PostcssPurgeCss = require('@fullhuman/postcss-purgecss')

module.exports = {
    'webpack.postcss.plugins': (config) => {
        const plugins = [
            AnyDevPlugin,
            AnyOtherDevPlugin
        ];
        if (process.env.NODE_ENV === 'production') {
            plugins.push(
                PostcssPurgeCss({
                    content: ['./src/**/*.liquid'],
                    whitelistPatterns: [/^(is-|has-|will-|js-)/],
                    keyframes: true,
                    fontFace: true
                }),
                PostcssAutoprefixer,
                PostcssCssnano
            )
        }
        return plugins;
    }
};

I hope it helps! 👍

fcisio avatar May 30 '19 18:05 fcisio

Perfect, thank you. I've been scouring the docs, but somehow missed this page!

fowlercraig avatar May 31 '19 14:05 fowlercraig