Skip to content

Bug: font-size: clamp() reported as error incorrectly #159

@mgoetz-nerdery

Description

@mgoetz-nerdery

Environment

ESLint version: 9.25.0
@eslint/css version: 0.8.1
Node version: 22.13.1
npm version: 10.9.2
Operating System: Mac OS 15

Which language are you using?

stylesheet

What did you do?

Configuration
import js from "@eslint/js";
import globals from "globals";
import reactHooks from "eslint-plugin-react-hooks";
import reactRefresh from "eslint-plugin-react-refresh";
import tseslint from "typescript-eslint";
import css from "@eslint/css";

export default tseslint.config(
  { ignores: ["dist"] },
  {
    extends: [js.configs.recommended, ...tseslint.configs.recommended],
    files: ["**/*.{ts,tsx}"],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
    plugins: {
      "react-hooks": reactHooks,
      "react-refresh": reactRefresh,
    },
    rules: {
      ...reactHooks.configs.recommended.rules,
      "react-refresh/only-export-components": [
        "warn",
        { allowConstantExport: true },
      ],
    },
  },
  {
    files: ["**/*.css"],
    language: "css/css",
    ...css.configs.recommended,
  },
);
  .fluidHeading {
    font-size: clamp(2.1rem, calc(7.2vw - 0.2rem), 2.5rem);
  }

What did you expect to happen?

I expected that this would lint with no errors.

What actually happened?

3:16 error Invalid value 'clamp(2.1rem,calc(7.2vw - 0.2rem),2.5rem)' for property 'font-size'. Expected | | <length-percentage [0,∞]> | math css/no-invalid-properties

✖ 1 problem (1 error, 0 warning)

Link to Minimal Reproducible Example

https://stackblitz.com/edit/vitejs-vite-du8wqxzy?file=src%2Fstyle.css

Participation

  • I am willing to submit a pull request for this issue.

Additional comments

No response

Activity

added
acceptedThere is consensus among the team that this change meets the criteria for inclusion
on May 30, 2025
moved this from Needs Triage to Ready to Implement in Triageon May 30, 2025
nzakas

nzakas commented on May 30, 2025

@nzakas
Member

Thanks for the reproduction case, I can reproduce this. This is most likely related to the syntax definitions coming from CSSTree. I'll look into that.

self-assigned this
on May 30, 2025
nzakas

nzakas commented on May 30, 2025

@nzakas
Member

It looks like for some reason clamp() is not being honored as part of math in the font-size property. 🤔

It should work the same as calc(), which is also considered math. So this works: font-size: calc(7.2vw - 0.2rem);.

I'm not familiar with how CSSTree is implementing math functions so it might take me a bit to figure out what's going on.

mgoetz-nerdery

mgoetz-nerdery commented on May 30, 2025

@mgoetz-nerdery
Author

No rush! I have a workaround using media queries for the time being but I'm definitely interested when this is resolved.

nzakas

nzakas commented on May 30, 2025

@nzakas
Member

Looks like min() and max() also don't work. It appears CSSTree only ever implemented calc(). Note for myself:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units/Using_CSS_math_functions

mgoetz-nerdery

mgoetz-nerdery commented on Jun 2, 2025

@mgoetz-nerdery
Author

If I have the project right, looks like there is a similar reported issue in CSSTree: csstree/csstree#338

nzakas

nzakas commented on Jun 2, 2025

@nzakas
Member

@mgoetz-nerdery yes, but we have our own fork.

added a commit that references this issue on Jun 11, 2025
33fefdc
added a commit that references this issue on Jun 12, 2025
8909277
moved this from Ready to Implement to Complete in Triageon Jun 12, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

acceptedThere is consensus among the team that this change meets the criteria for inclusionbugSomething isn't working

Type

No type

Projects

Status

Complete

Milestone

No milestone

Relationships

None yet

    Participants

    @nzakas@mgoetz-nerdery

    Issue actions

      Bug: font-size: clamp() reported as error incorrectly · Issue #159 · eslint/css