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.

Reproduziere die Ausgabe mit webpack.config.js, postcss.config.js und file.css. Vergleiche .test1 und .test2, während du die Konfiguration von module.rules, loader und plugins nachverfolgst; abgeschlossen ist es, wenn die auf Variablen basierende color-mod()-Ausgabe mit der direkten Verwendung übereinstimmt, ohne eine Verarbeitung des gesamten Bundles zu erfordern.

Vom Indexierungsmodell aus dem Issue-Text verfasst.