postcss-prefixwrap does not work with less files (React, webpack)

Question

Testing various options and for now I cannot make it work to add a container class to my CSS in React app. As this app is a micrfrontend, I need to encapsulate styles to protect them from leaking out or being overwritten by other microfrontends. I thought about adding a wrapping class to it using: https://www.npmjs.com/package/postcss-prefixwrap

I added a container class 'config' as instructed in the above page. Then in my webpack I did like this:

import PrefixWrap from "postcss-prefixwrap";

(...)
module: {
            rules: [
                {
                    test: /\.less$/i,
                    use: [
                        'style-loader',
                        'css-loader',
                        {
                            loader: "postcss-loader",
                            options: {
                                postcssOptions: {
                                    plugins: () => PrefixWrap(".config"),
                                },
                            },
                        },
                        {
                            loader: 'less-loader',
                            options: {
                                lessOptions: {
                                    javascriptEnabled: true,
                                    importLoaders: 1
                                },
                            },
                        },
                    ],
                },
            ]
        }

But I cannot see the styles prefixed with config class. There is answer on how to do that with older webpack, but I use webpack version 5 so the old syntax does not work: https://github.com/dbtedman/postcss-prefixwrap/issues/1

Answer 1

I solved this in this way:

                    test: /\.less$/i,
                    use: [
                        'style-loader',
                        'css-loader',
                        {
                            loader: 'postcss-loader',
                            options: {
                                postcssOptions: {
                                    plugins: [PrefixWrap('.config')]
                                },
                            },
                        },
                        {
                            loader: 'less-loader',
                            options: {
                                lessOptions: {
                                    javascriptEnabled: true,
                                },
                            },
                        },