Repository navigation
Feature Request: relative-font-units does not report absolute units inside math functions (clamp(), calc(), min(), max()) #560
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
Metadata
Metadata
Assignees
Labels
Type
Projects
- Status
Activity
[-]Bug: relative-font-units does not report absolute units inside math functions (clamp(), calc(), min(), max())[/-][+]Feature Request: relative-font-units does not report absolute units inside math functions (clamp(), calc(), min(), max())[/+]DMartens commentedon Sep 5, 2026
I agree that this would be a good extension for the rule and would propose adding the fallback value of
var:I changed this issue to be a feature request as the documentation is explicit about what is checked (keywords, length units and percentages).
Would like additional opinions from the team.
minseonkkim commentedon Sep 6, 2026
@DMartens
Thanks! Agreed on including the
var()fallback.My original plan was to cover only math functions, but your
var()suggestion made me look at this more generally: the underlying problem is that the rule stops at anyFunctionnode and never inspects its arguments. So rather than handling math functions andvar()as two special cases, what do you think about descending into everyFunctionnode? That would coverround(),mod(), nested combinations likeclamp(1rem, calc(12px + 1vw), 2rem), andvar()/env()/attr()fallbacks in one pass, without maintaining a list of function names. I've updated the title accordingly.Here's what I'd propose once accepted:
Functionnode in the font-size position (recursively) and check anyDimension/Percentagefound inside.var()needs a bit of extra handling since its fallback is parsed asRaw; I'd follow the same re-parsing approach used inno-invalid-properties.clamp(12px, 2vw, 20px)gives one report per absolute unit.Happy to adjust if the team prefers a narrower scope.
Tanujkanti4441 commentedon Oct 12, 2026
I am in favor of reporting disallowed units in functions too, and i think for fluid typography we can also add an option that will allow some more relative units such as
vw, just for math functions, something likeallowUnitsInMathFunctions?nzakas commentedon Oct 20, 2026
The overall proposal sounds good to me.
I'd split
allowUnitsInMathFunctionsinto a separate task rather than bolting it onto this one.Tanujkanti4441 commentedon Oct 21, 2026
Sounds good. Would like to implement this option if it's fine.
feat: check units inside functions in `relative-font-units`
eslint-github-bot commentedon Nov 3, 2026
👋 Hi! This issue is being addressed in pull request #614. Thanks, @minseonkkim!