How do I compress inline css in the webpack bundle

I have an SPA using vanilla webcomponents, and I am struggling with compressing the inline css in the bundled js webpack output. Here's the module part of my webpack config:

module: {
  rules: [
    {
      test: /\.html$/i,
      loader: "html-loader",
      exclude: path.resolve(__dirname, "./src/index.html")
    },
    {
      test: /\.css$/i,
      exclude: /node_modules/,
      loader: 'css-loader'
    }
  ],
}

In my components I import css like this:

import css from "./entityPage.css";

In my component css e.g. ./entityPage.css I refer to the "outer css" like this

@import "../../style.css";

Here is an extract of the inline css in the webpack bundle output:

c.push([e.id,"#h2puIrptVrtsTvV8FGBM{\r\n    width: 40%;\r\n    min-width: 614px; /*48 x the character w with font-size 1rem ;) */\r\n    border: solid 1px black;\r\n\r\n}\r\n\r\n#eKOgREy00yPONhrgY8Zg{\r\n    font-weight: bold;\r\n

As seen whitespace, lineshifts and even comments are preserved.

I have tried multiple combinations of mini-css-extract-plugin, css-minimizer-webpack-plugin, postcss-loader without luck, so a working example of the css rule setup in webpack config would be really appreciated. (with eventual plugins / optimization setup if appropriate)

Thx.

postcss / postcss-loader was the way to go in my context.

The webpack.config module rule for my css files looks like this:

    {
      test: /\.css$/i,
      exclude: /node_modules/,
      use: [
        {
          loader: 'css-loader',
          options: {
            importLoaders: 1,
          }
        },
        {
          loader: 'postcss-loader'
        }
      ]
    }