WebStorm CSS cannot resolve custom property

Question

In my CSS file I'm using custom CSS as can be seen from the photo. WebStorm gives errors. How can I fix it?

When hovered on it full error is here

Cannot resolve '--color-gray-1' custom property
This inspection warns about CSS custom property variable references which cannot be resolved to any valid target

works fine for me using similar syntax. Please try invalidating caches (*File | Invalidate caches, Invalidate and restart*). If it doesn't help, please create a support ticket, providing your `.css` file — lena, Dec 26 '18 at 14:05
Seems like it happens only on non-project files. There is a [youtrack issue](https://youtrack.jetbrains.com/issue/WEB-53346) filed for it (unless it was you) — AaA, Aug 15 '23 at 15:22

score 4 · Answer 1 · answered Dec 26 '18 at 21:53

Adding the property to custom CSS properties suppresses the 'Unknown CSS property' inspection; But in your screenshot I am guessing the warning comes from W3C validator. W3C Validator Inspection is based on external tool provided by W3C (online version available at http://jigsaw.w3.org/css-validator/#validate_by_input), so we can do nothing to fix such warnings. Plus w3C validator is not always up-to-date and reports errors for valid CSS, but some users still like to have it enabled.

You can only disable this inspection if you don't like these errors being displayed: hit Alt+Enter and choose 'Disable W3C CSS validation'.

This is not the case, my phpstorm was working fine until few days ago (not showing error as soon as I add them). No updates were downloaded or installed ( I have been offline for past few weeks) which means there should be some settings accidentally triggered or files corrupted, causing this to appear. — AaA, Aug 15 '23 at 11:29

score 2 · Answer 2 · answered May 07 '21 at 20:29

2

Make sure directory css file resides in is not excluded: right click on directory > Mark Directory As > Not Excluded

answered May 07 '21 at 20:29

normonds

73
4

score 1 · Answer 3 · edited Apr 30 '21 at 11:47

1

two ways you can try：

1. :root {
     --color-gray-1: #666666;
   }

2. html, body {
     --color-gray-1: #666666;
     color: var(--color-gray-1)
   }

edited Apr 30 '21 at 11:47

Leonardo Buscemi

1,111
1
15
22

answered Apr 17 '19 at 13:19

videring

19
2

2

Can you add a short description? – Rot-man Apr 17 '19 at 13:36
As you can see, he already did that, just a few lines above! – AaA Aug 15 '23 at 15:23

WebStorm CSS cannot resolve custom property

3 Answers3