Bug: css variable not resolved in rule "css/no-invalid-properties"

[Otlikov]

Environment

ESLint version: 9.31.0
@eslint/css version: 0.10.0
Node version: 24.4.0
npm version: 11.4.2
Operating System: macOS 15.5 (24F74)

Which language are you using?

stylesheet

What did you do?

Configuration

eslint css/no-invalid-properties: ["error"]

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

:root {
	--mySize: 80px;
	--myFontSize: calc(0.5 * var(--mySize));
}

.test {
	font-size: var(--myFontSize);
}

What did you expect to happen?

No error as variable --myFontSize is properly defined.

What actually happened?

Unknown property 'font-size' found css/no-invalid-properties

Link to Minimal Reproducible Example

none

Participation

• I am willing to submit a pull request for this issue.

Additional comments

No response

[xbinaryx]

I can reproduce this. The problem is that the custom property --myFontSize is defined as var(--mySize), and then used as font-size: var(--myFontSize);. The rule only performed a single-level variable replacement, so var(--myFontSize) was replaced with var(--mySize), but not further resolved to the actual value (80px). As a result, the linter tried to validate font-size: var(--mySize), which causes the lexer to throw Error: Matching for a tree with var() is not supported

[nzakas]

Thanks for the analysis @xbinaryx! Indeed, we'd need to recursively replace variables when using by other variables. This is likely more complicated than it seems. I'll plan on taking a look once I catch up with everything else. If anyone else would like to take a stab at it first, please feel free.

[xbinaryx]

I will take a stab.