csstools/postcss-color-mod-function
Used color-mod() in CSS variable is not working
Offen
#41 geöffnet am 02.12.2021
bughelp wanted
Repository-Metriken
- Stars
- (95 Sterne)
- PR-Merge-Metriken
- (Keine gemergten PRs in 30 T)
Beschreibung
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.