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 View on GitHub

@minseonkkim is already working on this.

Since Sep 5, 2026.

Assessment

This issue has not been assessed yet.

Description

enhancement
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from eslint/css

All issues in eslint/css

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.