How can I use webpack5 and postcss7 with es6 import syntax

Question

I have a website built using TS and SASS then compiled down to vanilla es6 JS "typw:module" and CSS. The compiled code then gets built into a compressed production ready version, using webpack, I want to use webpack to remove unused css with uncss, and some additional formating with autoprefixer and cssnano.

The problem is there isn't very clear information on configuring webpack with es6 modules, mostly commonJS. Currently I don't have any errors, but whenever I run my webpack build script nothing changes between the compiled code and the production code, all other parts of my webpack config work fine, except this portion.

//webpack.config.js

import cssnano from "cssnano";
import autoprefixer from "autoprefixer";
import uncss from "postcss-uncss";

const config = {
  mode: "production",
  entry: { index: path.resolve("public/scripts/index.js") },
  output: {
    path: path.resolve("dist"),
    filename: "[name][contenthash].js",
    clean: true,
    assetModuleFilename: "[name][ext]",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "style-loader",
          },
          {
            loader: "css-loader",
            options: {
              importLoaders: 3,
            },
          },
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                config: path.resolve(
                  fileURLToPath(import.meta.url),
                  "/postcss.config.js"
                ),
                plugins: [
                  [autoprefixer, { browsers: ["last 2 versions", "> 5%"] }],
                  [cssnano, { preset: "default" }],
                  [
                    uncss,
                    {
                      html: path.resolve(
                        fileURLToPath(import.meta.url + "/dist/*.html")
                      ),
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
}

export default config;

I also tried using an external config for postcss when doing it in the webpack.config wasn't working

//postcss.config.js

import cssnano from "cssnano";
import autoprefixer from "autoprefixer";
import uncss from "postcss-uncss";

const plugins = {
  plugins: [
    cssnano({
      preset: "default",
    }),
    autoprefixer({
      browsers: ["last 2 versions", "> 5%"],
    }),
    uncss({
      html: ["./*.html"],
    }),
  ],
};

export default plugins;

my goal is to remove all unused css based on the applied classes in my html, how can i accomplish this

I already tried different combinations of configs from the github postcss-webpack repo.

I also tried using the default configs using require and using the .cjs file extension, but that resulted in my getting this error.

You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.

so I presumed that it wasn't picking up the .cjs extension.

Before adding postcss I was setting up webpack config with the required syntax and using .cjs and it worked fine, but doing the same with postcss.config.cjs didn't seem to work, and switching back to .js worked by threw a different error. This is probably a skill issue, but yea, this is where we are.