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.

Reproduce la salida usando webpack.config.js, postcss.config.js y file.css. Compare .test1 y .test2 mientras rastrea la configuración de module.rules, loader y plugins; se considera terminado cuando la salida de color-mod() basada en variables coincide con el uso directo sin requerir el procesamiento del bundle completo.

Escrito por el modelo de indexación a partir del texto del issue.