eslint / eslint/css

Feature Request: relative-font-units does not report absolute units inside math functions (clamp(), calc(), min(), max())

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

Description

### Environment

ESLint version: v10.10.0
@eslint/css version: v2.0.0
Node version: v22.15.0
npm version: v11.12.1
Operating System: Windows 11

### Which language are you using?

stylesheet

### What did you do?

`eslint.config.js`

```js
import css from "@eslint/css";
import { defineConfig } from "eslint/config";

export default defineConfig([
{
files: ["**/*.css"],
plugins: { css },
language: "css/css",
rules: { "css/relative-font-units": "error" },
},
]);
```

`test.css`

```css
/* reported (expected) */
.a {
font-size: 12px;
}
.b {
font: 12px Arial;
}

/* not reported (unexpected) */
.c {
font-size: clamp(12px, 2vw, 20px);
}
.d {
font-size: calc(12px + 1rem);
}
.e {
font-size: min(12px, 1rem);
}
.f {
font: clamp(12px, 2vw, 20px) Arial;
}
```

```
npx eslint test.css
```

### What did you expect to happen?

The `12px` inside `clamp()`, `calc()`, and `min()` in `.c`–`.f` should be reported. The rule exists to disallow absolute font-size units, and `font-size: clamp(12px, 2vw, 20px)` still uses `px`. Fluid typography with `clamp()` is a very common pattern, so this is a significant gap.

### What actually happened?

Only `.a` and `.b` are reported. Every declaration whose value is a math function (`.c`–`.f`) passes silently, even though each one contains `12px`.

```
test.css
3:14 error Use only allowed relative units for 'font-size' - rem css/relative-font-units
6:9 error Use only allowed relative units for 'font-size' - rem css/relative-font-units

✖ 2 problems (2 errors, 0 warnings)
```

### Link to Minimal Reproducible Example

https://stackblitz.com/edit/stackblitz-starters-8rrnybj4?file=eslint.config.js

### Participation

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

Disclosure: I'm a participant of [open source contribution program OSSCA](https://github.com/eslint-ossca)

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.