How to use purgeCss with other module exports?

Question

I would like to use purgeCss in my NextJS project. In the docs it says I should change my next.config.js to be like this:

module.exports = withCss(withPurgeCss())

But where do I set my current config?

module.exports = {
    distDir: '../.next',
    webpack: config => {
        const env = Object.keys(process.env).reduce((acc, curr) => {
            acc[`process.env.${curr}`] = JSON.stringify(process.env[curr]);
            return acc;
        }, {});

        config.resolve.modules.push(path.resolve('./'));
        config.plugins.push(new webpack.DefinePlugin(env));

        return config;
    },
};

My postcss.config.js:

module.exports = {
    "plugins": [
        "postcss-flexbugs-fixes",
        [
            "postcss-preset-env",
            {
                "autoprefixer": {
                    "flexbox": "no-2009"
                },
                "stage": 3,
                "features": {
                    "custom-properties": false
                }
            }
        ],
        [
            '@fullhuman/postcss-purgecss',
            {
                content: [
                    './pages/**/*.{js,jsx,ts,tsx}',
                    './components/**/*.{js,jsx,ts,tsx}'
                ],
                defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
                safelist: ["html", "body"]
            }
        ],
    ]
}

Answer 1

Your config object goes inside the innermost plugin call.

// next.config.js

module.exports = withCss(withPurgeCss({
    distDir: '../.next',
    webpack: config => {
        const env = Object.keys(process.env).reduce((acc, curr) => {
            acc[`process.env.${curr}`] = JSON.stringify(process.env[curr]);
            return acc;
        }, {});

        config.resolve.modules.push(path.resolve('./'));
        config.plugins.push(new webpack.DefinePlugin(env));

        return config;
    },
}))

To solve your subsequent issue with the postcss.config.js, replace it with an object-based format (as indicated in Next.js documentation - it's right at the bottom of the page):

module.exports = {
    'plugins': {
        'postcss-flexbugs-fixes': {},
        'postcss-preset-env': {
            'autoprefixer': {
                'flexbox': "no-2009"
            },
            'stage': 3,
            'features': {
                'custom-properties': false
            }
        },
        '@fullhuman/postcss-purgecss': {
            'content': [
                './pages/**/*.{js,jsx,ts,tsx}',
                './components/**/*.{js,jsx,ts,tsx}'
            ],
            'defaultExtractor': content => content.match(/[\w-/:]+(?<!:)/g) || [],
            'safelist': ['html', 'body']
        },
    }
}