I'm currently developing a NextJS application that utilizes PurgeCSS. It's quite frustrating because every time I tweak the classname of a component, I have to restart the server.
Here is a snippet from my postcss.config.js:
plugins: [
[
'@fullhuman/postcss-purgecss',
{
content: [
'./src/pages/**/*.{js,jsx,ts,tsx}',
'./src/pages/*.{js,jsx,ts,tsx}',
'./src/components/**/*.{js,jsx,ts,tsx}',
'./src/containers/**/*.{js,jsx,ts,tsx}',
],
defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
safelist: ['html', 'body'],
enableDevPurge: false,
},
],
'postcss-preset-env',
],
};
And here are the dependencies listed in my package.json:
"dependencies": {
"date-fns": "^2.29.3",
"next": "13.1.1",
...
},
"devDependencies": {
"@fullhuman/postcss-purgecss": "^5.0.0",
"@typescript-eslint/eslint-plugin": "5.48.0",
...
}
In this project, I opt for global styles using SCSS over module styles. The main stylesheet, _app.tsx, looks like this:
import '../styles/Global.scss';
import type { AppProps } from 'next/app';
function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />;
}
export default MyApp;
Let's say I have two CSS classes defined:
.bg-blue { background-color: blue; }
.bg-red { background-color: red; }
The issue arises when I switch from using bg-blue to bg-red in a div element's className; the new style doesn't reflect due to PurgeCSS seemingly not updating the stylesheet dynamically.
Although it's far from ideal, I'd be willing to disable the purge feature entirely if possible. Yet, I'm struggling to find the right approach to achieve this.
If anyone has any insights or suggestions on how to tackle this problem, please share them!