Search code examples
cssintellij-ideawebstorm

WebStorm/PhpStorm gives "Mismatched property value" error when using CSS lvh unit

Using "new" CSS units causes a "Mismatched property value" error

I just started using these more modern CSS units, lvh, svh etc. But for some reason PhpStorm gives me this error. Since its a valid unit I expected it to work out of the box. Also this doesn't look like a linting error, normally there's some option to suppress if its a lint error.

Its the 2nd project that I have this issue with. Does anyone know if there's a setting or something that i can change so that these modern units are accepted by the IDE.

Thanks, see image with my error.

enter image description here

Solution

  • You must be using an year old or even older version... because accordingly to the WEB-55824 ticket these lvh and other unites are supported since 2022.3 version (2 major versions ago, released on Dec 2022).

    I've just checked your code sample in my PhpStorm 2023.1.4 in a plain .css file and height: 100lvh; is displayed just fine for me (inside the @supports and as the actual property value).

    Please upgrade your IDE. The latest version is 2023.2.