Why do I have to restart server on every style change? - css

Question

I'm working on a NextJS application with PurgeCSS. I have to restart the server every single time I change the classname of a component.
Here are 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',
],
};
My package.json dependencies:
"dependencies": {
"date-fns": "^2.29.3",
"next": "13.1.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-icons": "^4.7.1",
"sass": "^1.57.1"
},
"devDependencies": {
"#fullhuman/postcss-purgecss": "^5.0.0",
"#types/node": "18.11.18",
"#types/react": "18.0.26",
"#types/react-dom": "18.0.10",
"#typescript-eslint/eslint-plugin": "5.48.0",
"#typescript-eslint/parser": "5.48.0",
"autoprefixer": "^10.4.13",
"eslint": "8.31.0",
"eslint-config-next": "13.1.1",
"eslint-config-prettier": "^8.6.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-next": "^0.0.0",
"eslint-plugin-react": "^7.31.11",
"eslint-plugin-react-hooks": "^4.6.0",
"husky": "^8.0.3",
"lint-staged": "13.1.0",
"next-purge-css-modules": "1.1.0",
"postcss": "^8.4.20",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-preset-env": "^7.8.3",
"prettier": "^2.8.1",
"typescript": "4.9.4"
}
I'm using global styles, not module styles, and scss instead of css.
This is my _app.tsx:
import '../styles/Global.scss';
import type { AppProps } from 'next/app';
function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />;
}
export default MyApp;
Say I have these two styles:
.bg-blue { background-color: blue; }
.bg-red { background-color: red; }
If I had bg-blue used on a div's className, and I change it to bg-red, its ruleset is missing from the stylesheet.
I'm assuming purgecss doesn't update the stylesheet and does only one purge on server start.
It's definitely not ideal, but I don't care if I can just disable the whole purge functionality. However, can't find a way for that either.
Any tips?