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

[minseonkkim]

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

[DMartens]

I agree that this would be a good extension for the rule and would propose adding the fallback value of var:

.g {
	font-size: var(--font-size-medium, 16px)
}

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]

@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 any Function node and never inspects its arguments. So rather than handling math functions and var() as two special cases, what do you think about descending into every Function node? That would cover round(), mod(), nested combinations like clamp(1rem, calc(12px + 1vw), 2rem), and var() / 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:

• Descend into every Function node in the font-size position (recursively) and check any Dimension / Percentage found inside.
• var() needs a bit of extra handling since its fallback is parsed as Raw; I'd follow the same re-parsing approach used in no-invalid-properties.
• Report at the location of each offending unit, so clamp(12px, 2vw, 20px) gives one report per absolute unit.
• Update the rule docs to say that units inside function values are also checked.

Happy to adjust if the team prefers a narrower scope.