Once all dependencies installed, view the file `./src/components/Welcome/Welcome.module.css`
I believe that there are 2 questions:
Why is the rem function highlighted and marked as unknown?
Well, I think part of the answer would be that this is not a fully supported function (see doc). Yet, the Webstorm popup states it is both “unknown” while also displaying the documentation (a bit contradictory in itself).
So, is that possible to configure the level of compatibility in Webstorm - I know that there is in Inspections/CSS the rule “Property is incompatible with selected browsers” which I have turned off, and anyway, the inspection that is triggering the warning seems to be the other one “Inspections/CSS/Invalid elements/Invalid function”.
How to get Mantine PostCSS preset supported?
The “rem” not being supported because of its experimental nature may only be a side of the story… the other side may be related to the support of the Mantine PostCSS preset, which should make functions like “light-dark” and “rem” supported, as custom functions from the preset.
It seems to me that this issue is not about standards. I also faced this problem.
Yes, indeed, now these functions are experimental. However, here we are talking about the PostCSS preset, in which these functions are defined. Despite the fact that these functions are called exactly the same as the standard ones, they are custom functions. And I would like WebStorm to be able to see them.
And I also found that there are much more such problems than those described here. Check out the example of Mantine UI developers who use the PostCSS approach everywhere (https://github.com/mantinedev/ui.mantine.dev). After downloading all the dependencies, you will find that many CSS files are broken (unknown function, cannot resolve, etc.) even if you explicitly specify the PostCSS dialect in the settings.
PostCSS is a very broad concept, it's not a standard or spec one can follow, it's a wide set of custom plugins. each introducing its own syntax and functions. JetBrains has never claimed support for each and every custom CSS extension. Please see https://plugins.jetbrains.com/plugin/8578-postcss-support for the list of supported PostCSS plugins
Where are these functions defined? Do you have a sample project you can share that reproduces the issue?
Hi Elena, I am facing the same problem.
A sample project to use to see the issue would be for example to use https://github.com/mantinedev/vite-template
Once all dependencies installed, view the file `./src/components/Welcome/Welcome.module.css`
I believe that there are 2 questions:
Why is the rem function highlighted and marked as unknown?
Well, I think part of the answer would be that this is not a fully supported function (see doc). Yet, the Webstorm popup states it is both “unknown” while also displaying the documentation (a bit contradictory in itself).
So, is that possible to configure the level of compatibility in Webstorm - I know that there is in Inspections/CSS the rule “Property is incompatible with selected browsers” which I have turned off, and anyway, the inspection that is triggering the warning seems to be the other one “Inspections/CSS/Invalid elements/Invalid function”.
How to get Mantine PostCSS preset supported?
The “rem” not being supported because of its experimental nature may only be a side of the story… the other side may be related to the support of the Mantine PostCSS preset, which should make functions like “light-dark” and “rem” supported, as custom functions from the preset.
Hopefully that will help you in helping us!
Thanks
Thanks for update!
rem()is indeed still experimental, not supported by most of the browsers according to https://developer.mozilla.org/en-US/docs/Web/CSS/remlight-dark()is even less standard, it's a part of the CSS5 draft (https://drafts.csswg.org/css-color-5/#light-dark) and is a subject to changeUsually we don't add support to new technologies until they become a living standard
It seems to me that this issue is not about standards. I also faced this problem.
Yes, indeed, now these functions are experimental. However, here we are talking about the PostCSS preset, in which these functions are defined. Despite the fact that these functions are called exactly the same as the standard ones, they are custom functions. And I would like WebStorm to be able to see them.
And I also found that there are much more such problems than those described here. Check out the example of Mantine UI developers who use the PostCSS approach everywhere (https://github.com/mantinedev/ui.mantine.dev). After downloading all the dependencies, you will find that many CSS files are broken (unknown function, cannot resolve, etc.) even if you explicitly specify the PostCSS dialect in the settings.
PostCSS is a very broad concept, it's not a standard or spec one can follow, it's a wide set of custom plugins. each introducing its own syntax and functions. JetBrains has never claimed support for each and every custom CSS extension. Please see https://plugins.jetbrains.com/plugin/8578-postcss-support for the list of supported PostCSS plugins
The functions light-dark and rem are recognized in vs code but not in webstorm. It would be nice to fix this.
PS: I have the postcss plugin and it is still not working
Please feel free to create a new feature request here: https://youtrack.jetbrains.com/issues/WEB. We’ll see if it can be implemented.
Is there anyway we can at least turn these annoying errors off?
You can suppress it with
Please see Disabling and enabling inspections | WebStorm Documentation (jetbrains.com) for instructions.
This is very upsetting. PostCSS, mixins, css vars. And nothing works in Idea!
Looks like a hard no, this is annoying especially as Mantine is one of the most popular React design frameworks at the moment.