eslint / eslint/css

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

Open
#434 6 comments 0 reactions 1 assignee Claimed by @DMartens View on GitHub
bug
Dominant language
JavaScript
Stars
308
Forks
44
Avg merge
2d 6h
Merged PRs (30d)
18

Description

### 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

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

```css
[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

- [x] 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_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.