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

[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

[nzakas]

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.

[nzakas]

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]

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

[nzakas]

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]

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

[nzakas]

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