Feature Request: relative-font-units does not report absolute units inside math functions (clamp(), calc(), min(), max())
@minseonkkim is already working on this.
Since Sep 5, 2026.
Assessment
This issue has not been assessed yet.
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
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
/* 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
- 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
Disclosure: I'm a participant of open source contribution program OSSCA
- Dominant language
- JavaScript
- Stars
- 308
- Forks
- 44
- Avg merge
- 2d 6h
- Merged PRs (30d)
- 18
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from eslint/css
-
accepted enhancement
-
feature
-
feature
-
feature
-
enhancement
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 88/100
HarperFast/skills#96 ·
-
[Block] Latest Posts [Type] Bug
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
Automattic/studio#4908 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 86/100
sugarlabs/musicblocks#8847 ·