eslint / eslint/css

Bug: `no-invalid-properties` does not validate `calc()` contents

Open
#501 4 comments 0 reactions 1 assignee Claimed by @przemyslaw-zan 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.4
@eslint/css version: 1.4.0
Node version: v24.15.0
npm version: 11.12.1
Operating System: Ubuntu (within WSL)

### Which language are you using?

stylesheet

### What did you do?

Configuration

```js
import css from "@eslint/css";

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

```css
a {
width: red;
width: calc(red);
width: calc(1px+2px);
width: calc();
width: calc(1px + );
width: calc(1px ** 2px);
}
```

### What did you expect to happen?

All six declarations reported as invalid. In particular:

- `calc(red)`, `calc()`, `calc(1px + )` and `calc(1px ** 2px)` do not match the `` grammar at all.
- `calc(1px+2px)` is invalid per [CSS Values and Units](https://drafts.csswg.org/css-values-4/#calc-syntax): "White space is required on both sides of the `+` and `-` operators." (`1px+2px` tokenizes as the two dimensions `1px` and `+2px` with no operator between them.)

Browsers agree and drop all six declarations.

### What actually happened?

Only the unwrapped `width: red` is reported. Every `calc()` variant passes:

```
/home/projects/eslint-css-calc-repro/style.css
2:10 error Invalid value 'red' for property 'width'. Expected auto | | min-content | max-content | fit-content | fit-content( ) | | | stretch | <-non-standard-size> css/no-invalid-properties

✖ 1 problem (1 error, 0 warnings)
```

So wrapping an arbitrary invalid value in `calc()` bypasses validation entirely - `width: red` is flagged while `width: calc(red)` is not.

### Link to Minimal Reproducible Example

https://stackblitz.com/edit/eslint-css-calc-repro

### Participation

- [x] I am willing to submit a pull request for this issue.

### AI acknowledgment

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

### Additional comments

It looks like math function contents are treated as opaque during value matching (possibly on the `@eslint/css-tree` side), i.e. a `calc()` is accepted wherever a numeric type is expected without checking its operands or operators.

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.