After reading the documentation, I want to integrate purgeCss into my NextJS project.
The recommended configuration in the docs suggests updating the next.config.js file like this:
module.exports = withCss(withPurgeCss())
However, I am unsure where exactly I should apply my current configuration settings.
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;
},
};
As for 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"]
}
],
]
}