How can I compute CSS modules hashes before the PostCSS run to purge unused classes with PurgeCSS?

[ldm-acn]

Summary

I'm trying to setup a project with css modules and I'd like to use PurgeCSS to clean up unused css. I setup the plugin in a postcss.config.mjs file, but while "normal" css is purged as intended css modules are not.

PurgeCSS website has an old example on how to set it up for CSS modules in CRA. I'm not really proficient in Webpack but it looks like the idea is to make sure that the CSS modules hashes are computed before PostCSS runs.

If that's the case I think it should be possibile to do it in Next, but I'm not sure how the webpack configuration should look like, the next.config.mjs below should work as far as I understand, but unused classes are not purged in "normal" CSS files nor in hashed CSS modules.

How can I make sure the CSS modules hashes are computed before the PostCSS run? and How can I setup PostCSS from the webpack option of the next config file?

Additional information

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
  ) => {
    const oneOfs = config.module.rules.find((rule) =>
      Object.keys(rule).includes("oneOf")
    ).oneOf;
    const cssOneOfs = oneOfs.filter(
      (r) => r.test instanceof RegExp && r.test.test("test.css") && !r.test.test("test.module.css")
    );
    const cssModulesOneOfs = oneOfs.filter(
      (r) => r.test instanceof RegExp && r.test.test("test.module.css")
    );

    const postcssLoader = {
      loader: require.resolve("postcss-loader"),
      options: {
        postcssOptions: {
          // ident: 'postcss',
          // syntax: 'postcss-scss',
          plugins: () => [
            require("postcss-flexbugs-fixes"),
            require("postcss-preset-env")({
              autoprefixer: {
                flexbox: "no-2009",
              },
              stage: 3,
            }),
            require("@fullhuman/postcss-purgecss")({
              // content: [ paths.appHtml, ...glob.sync(path.join(paths.appSrc, '/**/*.{js,jsx}'), { nodir: true }) ],
              content: [
                "./src/app/**/*.{js,jsx,ts,tsx}",
                "./app/**/*.{js,jsx,ts,tsx}",
                "**/*.{jsx,tsx}",
              ],
              defaultExtractor: (content) =>
                content.match(/[\w-/:]+(?<!:)/g) || [],
              safelist: ["html", "body"],
            }),
            require("postcss-normalize"),
          ],
          // sourceMap: isEnvProduction && shouldUseSourceMap
        },
      },
    };

    cssOneOfs.forEach((cssOneOf) => {
      if (Array.isArray(cssOneOf.use)) {
        cssOneOf.use.push(postcssLoader);
      } else if (typeof cssOneOf.use === "object") {
        cssOneOf.use = [cssModulesOneOfs.use, postcssLoader];
      }
    });
    cssModulesOneOfs.forEach((cssModuleOneOf) => {
      if (Array.isArray(cssModuleOneOf.use)) {
        cssModuleOneOf.use.push(postcssLoader);
      } else if (typeof cssModuleOneOf.use === "object") {
        cssModuleOneOf.use = [cssModuleOneOf.use, postcssLoader];
      }
    });

    return config;
  },
};

module.exports = nextConfig;

Example

No response

[ldm-acn]

I modified the code to append the loader for PostCSS at the back of the arrays for each interested oneOf rule. This still doesn't work, I suspect it's because the existing rules already have a loader for PostCSS that is set by Next in packages/next/src/build/webpack/config/blocks/css/loaders/modules.ts.