var(...) is not recognized or parsed when used after CSS Modules @value

[timmolendijk]

As far as I understand, CSS Modules Values syntax is designed to not break CSS.

Its main syntax (to define a value) is @value my-color: #ff0000; or @value my-color: #ff0000;. The idea is that variables can be preprocessed into these value definitions, as follows:

:root {
  --my-red: #ff0000;
}
@value my-color: var(--my-red);

In this example postcss-custom-properties fails to recognize and parse the var(--my-red).

[MoOx]

This plugins aims to allows a futur proof code according to W3C specs.
So transformation (for now) only occurs where it's relevant according to the specs (if we forget the :root limitation).
So it doesn't fail, it's just not supported.

[timmolendijk]

So no intention of parsing the CSS Modules Values syntax?

Well, that's good to know because it basically means one shouldn't try to use this plugin in combination with CSS Modules.

[MoOx]

Why do you want to use this AND duplicate some var with css modules values?

[timmolendijk]

In CSS Modules, Values are a means of exporting/importing stuff between modules. The idea is that it should be compatible with existing preprocessors.

Check the original pull request here. The last code sample of @geelen's initial post is the idea in a nutshell.

[MoOx]

I totally understand why css modules have a way to declare variables, but how is it a good idea to use both css modules values and this plugin?

[timmolendijk]

Good question :) I think everybody is still very much trying to figure these new ideas out.

Currently, Values are fairly limited in the sense that they cannot be easily used to pass values into a preprocessor function (such as postcss-color-function), because they are parsed and resolved after the preprocessor do their job (using webpack's css-loader at least).

That is clearly not ideal and is bound to change (I guess), but for now the best we can do is use preprocessed variables locally (within a Module) and create all the exports (Values) from them.

[kumarharsh]

@timmolendijk I also ran into the same problem. I am using the @value syntax of css-module for code-sharing among modules (which work like import in ES6). But the postcss-color-functions fail when I pass an @value to it. So right now, I'm duplicating the @value into a :root { --mainBg: #32235 } custom property. This is far from ideal, but is there any other way?

[kumarharsh]

I see that a PR to fix this @value+other-postcss-plugins conundrum issue was made, and rejected: webpack-contrib/css-loader#263. There is another postcss plugin which claims to fix this though: https://github.com/princed/postcss-modules-values-replace

[jonathantneal]

I’m open to a PR for functionality or something in the README, and closing this issue as it is not (yet) a supported feature.