fix: no-invalid-properties false positives for var() in functions

[thecalamiity]

Prerequisites checklist

• I have read the contributing guidelines.

What is the purpose of this pull request?

This PR fixes a regression in the no-invalid-properties rule where it incorrectly reports for valid CSS properties containing var() usage within functions like calc().

What changes did you make? (Give an overview)

• Updated the validation logic to properly handle CSS variables when they appear inside functions.
• Added tests to verify correct behavior for variables in functions

Related Issues

Fixes #223

Is there anything you'd like reviewers to focus on?

[nzakas]

Here we're doing a traversal on top of the traversal that is already happening in the rule, which is inefficient.

A more efficient approach would be to use the Function visitor method to do the traversal automatically. Can you take a look at that?

[thecalamiity]

I looked into using the Function visitor method here, but I don’t see a straightforward way to apply it. The code at this point isn’t just traversing—it’s reconstructing the property value as a string, including nested function names and arguments. The visitor pattern alone doesn’t provide the context needed for this reconstruction, so a manual traversal seems necessary. If you know of a way to leverage the visitor pattern for this case, I’d appreciate your input.

[nzakas]

You can start by looking at Function > * and Function > *:exit. You'd need to use a stack to keep track of the depth you're at, but otherwise, I think that should work.

[nzakas]

Can you check the test failures?

[snitin315]

Can we add the following test case as well when the variable is also using calc():

/* eslint css/no-invalid-properties: "error" */

:root { --dynamic-width: calc(20px + 10px); }
  
div { width: calc(100% - var(--dynamic-width)); }

[snitin315]

We have one false positive, can you please check?

/* eslint css/no-invalid-properties: "error" */

:root { 
    --dynamic-width: calc(20px + 10px); 
    --dynamic-width-2: calc(var(--dynamic-width) + 10px); 
}
  
.div { width: calc(100% - var(--dynamic-width)); } // ok
.div2 { width: calc(100% - var(--dynamic-width-2)); } // Error Unknown property 'width' found