PurgeCss not working in Nextjs 13 version

Question

I am trying to reduce size of css in my Nextjs project. I am following https://purgecss.com/guides/next.html this guide.

following are the content of my style.css

@import url('/assets/css/bootstrap.min.css');
@import url('/assets/css/fonts.css');
@import url('/assets/css/flaticon.css');
@import url('/assets/css/font-awesome.css');
@import url('/assets/css/select2.min.css');
@import url('/assets/css/nice-select.css');
@import url('/assets/css/owl.carousel.css');
@import url('/assets/css/owl.theme.default.css');
@import url('/assets/css/reset.css');
@import url('/assets/css/style.css');
@import url('/assets/css/responsive.css');

Following are the version of nextjs I am using.

"next": "13.1.1",

I have created postcss.config.js file in my root directory.

  "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"]
      }
    ],
  ]
}

I tried npm run build && npm start. And when I tried to access my website it is still requesting for all these files nothing changed.

Do I need to use following:

const withPurgeCss = require("next-purgecss");

module.exports = withCss(withPurgeCss());

But in documentation it's given we need to change in next.config only for version < 9.3. I tried this also but it's also giving error.

Already tried solution in PurgeCSS does not remove unused CSS from NextJS project but not working.

Any suggestions?

Answer 1

Maybe you want to check that the content list actually matches the folders in your project. Consider that new Next.js uses app instead of pages.

So maybe you want to change this as:

        content: [
            './app/**/*.{js,jsx,ts,tsx}',
            './components/**/*.{js,jsx,ts,tsx}'
        ],