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.

webpack.config.js、postcss.config.js、file.cssを使用して出力を再現します。module.rules、loader、pluginsの設定を追跡しながら.test1と.test2を比較します。変数を使用したcolor-mod()の出力が、バンドル全体の処理を必要とせずに直接使用した場合と一致すれば完了です。

索引モデルが issue の本文から書いたものです。