Used color-mod() in CSS variable is not working

Consider this webpack example

webpack.config.js

module.exports = (env, options) => {
    return {
        module : {
            rules : [
                {
                    test : /\.css$/,
                    use : [
                        { loader : 'postcss-loader' },
                    ],
                },
            ],
        },
        plugins : [
        ]
    };
};

postcss.config.js

module.exports = (api) => {
    return {
        plugins : [
            ['postcss-custom-properties'],
            ['postcss-color-mod-function'],
        ], 
    }
};

file.css

:root {
 --myvar: color-mod(#1BB749 w(+10%) s(+1%));
}

.test1 { color: color-mod(#1BB749 w(+10%) s(+1%)); }
.test2 { color: var(--myvar); }

Output is

.test1 { color: hsl(137.69230769230768, 56.4140127389%, 46.1764705882%); }
.test2 { color: color-mod(#1BB749 w(+10%) s(+1%)); }

Why color-mod() in .test2 is not processed? I have correct plugins order where postcss-custom-properties firstly process variable and secondly postcss-color-mod-function should process color-mod() but it is not processed.

The solution is only to use postcss-color-mod-function in webpack plugins section not in module.rules section but it have negative performance impact to process whole bundle with postcss-color-mod-function during watch or dev server with hot reload. So I would like it works in module.rules section as expected. Thanks.