Not autoprefixing the files with webpack

[GamzeeRakoon]

I have a webpack config that calls postcss and then autoprefixer, it should then autoprefix my css files. but it doesnt i get the normal minified css.

this is my webpack config

import path from 'path';
import url from 'url';
import webpack from 'webpack';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';

const __dirname = path.dirname(url.fileURLToPath(import.meta.url));

export default {
    mode: "production",
    entry: {
        main: [
            "./src/js/index.js"
        ]
    },
    output: {
        filename: "app.min.js",
        path: path.resolve("./../wwwroot/dist"),
        assetModuleFilename: 'images/[name].[hash].[ext]'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        loader: "css-loader"
                    },
                    {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions: {
                                path: path.resolve(__dirname, "postcss.config.js")
                            }
                        }
                    },
                    {
                        loader: "sass-loader"
                    }
                ]
            },
            {
                test: /\.(png|jpe?g|gif)$/,
                type: "asset/resource"
            }
        ]
    },
    optimization: {
        minimizer: [
            `...`,
            new CssMinimizerPlugin()
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({filename: "app.min.css"}),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })
    ],
    performance : {
        hints : false
    }
};

postcss.config.js

import autoprefixer from 'autoprefixer';

export default {
    plugins: [
        autoprefixer()
    ]
};

some example css which should be getting prefixed based on the websites example https://autoprefixer.github.io/

body {
    font-size: 72px;
    background: linear-gradient(#eee, #333);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transform: none;
}

the css i get after using running the config:

body{-webkit-text-fill-color:transparent;background:linear-gradient(#eee,#333);background-clip:text;font-size:72px;transform:none}

[GamzeeRakoon]

i found a work around to make it work by putting the plugin straight in to the webpack plugin like this,

import path from 'path';
import webpack from 'webpack';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';

export default {
    mode: "production",
    entry: {
        main: [
            "./src/js/index.js"
        ]
    },
    output: {
        filename: "app.min.js",
        path: path.resolve("./../wwwroot/dist"),
        assetModuleFilename: 'images/[name].[hash].[ext]'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    {
                        loader: "postcss-loader",
                        options: {
                          postcssOptions: {
                            plugins: [
                                "autoprefixer"
                            ],
                          },
                        }
                    },
                    "sass-loader"
                ],
            },
            {
                test: /\.(png|jpe?g|gif)$/,
                type: "asset/resource"
            }
        ]
    },
    optimization: {
        minimizer: [
            `...`,
            new CssMinimizerPlugin()
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({filename: "app.min.css"}),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })
    ],
    performance : {
        hints : false
    }
};

[ai]

You need to open an issue in postcss-loader done they are using own way to load plugins