Bug: `css/no-invalid-properties` can't parse valid nested color functions

[fregante]

Environment

ESLint version: 9.39.2
@eslint/css version: 1.1.0
Node version: v24.14.1

Which language are you using?

stylesheet

What did you do?

Configuration

{
	...css.configs.recommended,
	files: ['**/*.css'],
	language: 'css/css',
	languageOptions: {
		tolerant: true,
	},
	rules: css.configs.recommended.rules,}

[data-rgh-heat='1'] {
	color: color-mix(
		in srgb,
		var(--rgh-heat-color) 100%,
		var(--fgColor-muted, var(--color-fg-muted))
	) !important;
}

What did you expect to happen?

No error. Note that the CSS is reported as valid when pasted on https://jigsaw.w3.org/css-validator/validator

What actually happened?

Error: 5:10 error Invalid value ')' for property 'color'. Expected css/no-invalid-properties

Link to Minimal Reproducible Example

please create a forkable stackblitz repo so that I don't have to setup a whole repo from scratch for every report

Participation

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

AI acknowledgment

• I did not use AI to generate this issue report.
• (If the above is not checked) I have reviewed the AI-generated content before submitting.

Additional comments

No response

[DMartens]

I am unable to reproduce this problem.
My guess is that one of the custom property values, which are omitted in the example, has a disallowed value, as defining the custom properties with hex color values works.
Can you please provide the values for the custom properties?

[fregante]

Oh got it. The properties are not available in the project, they're inherited from an external stylesheet. Linting should pass without them being available (or provide a better error)

[DMartens]

The linting does not pass for unknown custom properties.
For example for the provided snippet I get the lint error "Can't validate with unknown variable '--rgh-heat-color'.".
Can you please provide a minimal reproduction for the error?

[fregante]

That's weird, I can't repro anymore, it might have been some conflict with the svelte parser.

You can see the failed CI job here: https://github.com/refined-github/refined-github/actions/runs/25153248210/job/73729685970?pr=9275

Something fixed it in this diff: https://github.com/refined-github/refined-github/pull/9275/changes/d9887b91a9eed86d09af19841931800c3ce1ed94..ead8b51dcd37f24f07534130bb20a4442fdbee8c

Most likely this, even though somehow the error came from the CSS plugin on a .css file:

	// Svelte rules require the Svelte parser and crash on CSS files
	{
		files: ['**/*.css'],
		rules: Object.fromEntries(
			Object.keys(sveltePlugin.rules).map(rule => [`svelte/${rule}`, 'off']),
		),
	},

Anyway, closing.

[fregante]

Found a repro, this is the most minimal repro I could make:

html {
	--delta: fuchsia;

	body {
		background:
			linear-gradient(red, var(--delta)),
			var(--beta);
	}
}

Invalid value '' for property 'background'. Expected #? , .eslintcss/no-invalid-properties

'css/no-invalid-properties': ["error", {
	allowUnknownVariables: true
}],