Bug: no-invalid-properties false positive when a custom property value contains var() inside a function #623

Environment

ESLint version: v10.14.0
@eslint/css version: 2.0.1
Node version: v26.11.1
npm version: v12.2.0
Operating System: darwin 25.6.0

Which language are you using?

stylesheet

What did you do?

import css from "@eslint/css";

export default [
	{
		files: ["**/*.css"],
		plugins: { css },
		language: "css/css",
		rules: {
			"css/no-invalid-properties": "error",
		},
	},
];

:root {
	--rgb: 255, 255, 255;
	--color: rgba(var(--rgb), 0.5);
}

a {
	color: var(--color);
}

What did you expect to happen?

No error. --color resolves to rgba(255, 255, 255, 0.5), which is a valid <color>.

Using the same value directly is not reported:

:root {
	--rgb: 255, 255, 255;
}

a {
	color: rgba(var(--rgb), 0.5);
}

What actually happened?

7:9  error  Invalid value '255' for property 'color'. Expected <color>  css/no-invalid-properties

The rule validates color: 255, 255, 255 instead of color: rgba(255, 255, 255, 0.5). The wrapping rgba(…, 0.5) is dropped.

Link to Minimal Reproducible Example

Provided above

Participation

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

AI acknowledgment

• I did not use AI to generate this issue report.
• I used AI to translate the content of this issue report.
• I used AI to understand the codebase.
• I used AI to generate content for this issue report and I reviewed the generated content.

Additional comments

In resolveVariable(), the custom property value is passed to parseVarFunction(), whose regex is not anchored, so rgba(var(--rgb), 0.5) is treated as if the whole value were var(--rgb) and the wrapping function is dropped.

Possibly a follow-up to #200 / #237.

Not a duplicate of #434: that one requires an unknown variable with allowUnknownVariables: true. Here all variables are defined and it reproduces with default options.