How to combine values with custom CSS properties?

[ertrzyiks]

Hey, is it possible to reference the values variables in the custom CSS properties?

@value mycolor: #fff;

:root {
  --first-color: mycolor;
}

I see mycolor persisted as it is, I would expect it to be evaluated to #fff instead.

[IgorSzymanski]

I know this is an old issue, but maybe it might help someone in the future. It looks like you have a problem with PostCSS, and not css-modules, therefore you should use stack overflow for such questions. I do not use PostCSS, but I would assume you have to use string interpolation for it to work.

@value mycolor: #fff;

:root {
  --first-color: $(mycolor);
}

[ertrzyiks]

Can I use values without PostCSS? I found the reference in this repo https://github.com/css-modules/css-modules/blob/master/docs/values-variables.md

I will check if that syntax works but from what I understand $ would help only with a variable created within postcss like

$mycolor: #fff;

[IgorSzymanski]

Yes, sorry, my bad.

$mycolor: #fff;

:root {
  --first-color: $mycolor;
}

And if you also need to import them somewhere else, postcss-import looks like a solution.