Post processing

PurgeCSS

To remove all unused CSS from Bootstrap and Hugolify, we use PurgeCSS to clean it.

Setup

config/default/config.yaml

build:
  writeStats: true

postcss.config.js

module.exports = {
    plugins: {
        autoprefixer: {},
        cssnano: {
            preset: 'default'
        },
        '@fullhuman/postcss-purgecss': {
            mode: 'all',
            content: ['./hugo_stats.json'],
            safelist: {
                standard: [
                    'show',
                    'fade',
                    /-backdrop$/,
                    /^is-/,
                    /^has-/,
                    /^js-/
                ],
                greedy: [
                    /^itemprop$/,
                    /^role$/
                ]
            },
            defaultExtractor: (content) => {
                let els = JSON.parse(content).htmlElements;
                els = els.tags.concat(els.classes);
                return els;
            }
        }
    }
};

Documentations

• https://gohugo.io/hugo-pipes/postprocess/
• https://purgecss.com/guides/hugo.html