Why 'css-minimizer-webpack-plugin' or 'postcss-csso' is truncating comma from font shorthand assignment?

Question

I am using mini-css-extract-plugin, css-minimizer-webpack-plugin and postcss-csso for my CSS minification.

Here is my package.json:

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "serve": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.22.5",
    "@babel/preset-env": "^7.22.5",
    "@babel/preset-react": "^7.22.5",
    "autoprefixer": "^10.4.14",
    "babel-loader": "^9.1.2",
    "css-loader": "^6.8.1",
    "css-minimizer-webpack-plugin": "^5.0.1",
    "html-webpack-plugin": "^5.5.3",
    "mini-css-extract-plugin": "^2.7.6",
    "postcss": "^8.4.24",
    "postcss-csso": "^6.0.1",
    "postcss-loader": "^7.3.3",
    "resolve-url-loader": "^5.0.0",
    "sass": "^1.63.4",
    "sass-loader": "^13.3.2",
    "style-loader": "^3.3.3",
    "url-loader": "^4.1.1",
    "webpack": "^5.87.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  }
}

Here is my webpack.config.js:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  entry: {
    main: './src/index.js'
  },
  output: {
    path: path.join(__dirname, '/dist'), // the bundle output path
    filename: '[name].js' // the name of the bundle
  },
  devtool: 'source-map',
  resolve: {
    extensions: ['.js', '.jsx', '.json']
  },
  optimization: {
    minimize: true,
    minimizer: [new CssMinimizerPlugin()]
  },
  plugins: [
    new MiniCssExtractPlugin(),
    new HtmlWebpackPlugin({
      template: 'src/index.html' // to import index.html file inside index.js
    }),
    new CssMinimizerPlugin()
  ],
  devServer: {
    port: 3030 // you can change the port
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/, // .js and .jsx files
        exclude: /node_modules/, // excluding the node_modules folder
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.s?css$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader', //we need to upgrade this loader to version 6
            options: {
              // Enables/Disables or setups number of loaders applied before CSS loader.
              importLoaders: 3
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: ['autoprefixer']
              }
            }
          },
          {
            loader: 'resolve-url-loader'
          },
          {
            loader: 'sass-loader'
          }
        ]
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg)$/, // to import images and fonts
        loader: 'url-loader',
        options: { limit: false }
      }
    ]
  }
};

Here is my postcss.config.js:

module.exports = {
    plugins: [
        require('postcss-csso'),
        require('autoprefixer')
    ]
};

Here is my app.css:

body {
    font: 400 1.4rem/2.1rem 'Fira Sans', sans-serif;
}

h1 {
  color: #ff0000;
  font: 400 1.4rem/2.1rem 'Fira Sans', sans-serif, arial, verdana;
}

In minified CSS comma is truncated after first font 'Fira Sans':

body{font:400 1.4rem/2.1rem"Fira Sans"sans-serif}h1{color:red;font:400 1.4rem/2.1rem"Fira Sans"sans-serif,arial,verdana}

Seems minified CSS is automatically truncating comma from first font name. Consecutive commas are present in my minified CSS.

Please guide me how to fix this issue.