Closed timmolendijk closed 6 years ago
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.
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.
Why do you want to use this AND duplicate some var with css modules values?
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.
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?
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.
@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?
I see that a PR to fix this @value+other-postcss-plugins conundrum issue was made, and rejected: https://github.com/webpack/css-loader/pull/263. There is another postcss plugin which claims to fix this though: https://github.com/princed/postcss-modules-values-replace
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.
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:In this example
postcss-custom-properties
fails to recognize and parse thevar(--my-red)
.