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

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

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?

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)

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?

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.

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
}],

Thank you for the reproduction.
I'll work on a fix.

Navigation Menu

Repository navigation

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

Environment

Which language are you using?

What did you do?

What did you expect to happen?

What actually happened?

Link to Minimal Reproducible Example

Participation

AI acknowledgment

Additional comments

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Environment

Which language are you using?

What did you do?

What did you expect to happen?

What actually happened?

Link to Minimal Reproducible Example

Participation

AI acknowledgment

Additional comments

Activity

DMartens commented on Apr 30, 2026

fregante commented on Apr 30, 2026

DMartens commented on Apr 30, 2026

fregante commented on May 1, 2026

fregante commented on Jun 15, 2026

DMartens commented on Jun 15, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

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