Minor css errors in IDE

[Zelfapp]

Doesn't seem to be breaking anything that I can see as I demo, but in app/components/home/HomeChart.client.vue Webstorm is throwing the following errors, though the css is being applied on the HomeChart.client.vue.

This is literally the only error Webstorm is throwing for the entire dashboard.

[ratracegrad]

Hi @Zelfapp, this is a common issue with WebStorm's CSS validation system. The error occurs because WebStorm doesn't automatically recognize CSS custom properties (CSS variables) that are defined elsewhere in your application.

The warnings in WebStorm are just IDE inspections and don't affect the application's functionality. The code is working correctly, and these CSS variables are properly defined by Nuxt UI Pro. This is purely an IDE configuration issue rather than a problem with your code.

To actually resolve the WebStorm validation errors, you'll need to adjust WebStorm's inspection settings. Here's the step-by-step process:

1. Open WebStorm Settings/Preferences:

• On Mac: Press ⌘, (Command + Comma)
• On Windows/Linux: Press Ctrl+Alt+S

2. Navigate through the settings:

• Go to Editor → Inspections
• Expand "CSS" section
• Expand "Invalid elements" section
• Find "Unresolved custom property"

3. You have two options:

• Uncheck the box to completely disable the inspection
• Or change the severity level from "Error" to "Weak Warning" if you still want some indication but less prominent

4. Click "Apply" and "OK" to save your changes

This will resolve the validation errors for all CSS custom properties in your project, including the Nuxt UI Pro variables like --ui-primary, --ui-bg, etc.

NOTE: this error does not appear in VSCode or Cursor.

Hope this helps!