-
-
Notifications
You must be signed in to change notification settings - Fork 24
Labels
acceptedThere is consensus among the team that this change meets the criteria for inclusionThere is consensus among the team that this change meets the criteria for inclusionbugSomething isn't workingSomething isn't working
Description
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.To pick up a draggable item, press the space bar. While dragging, use the arrow keys to move the item. Press space again to drop the item in its new position, or press escape to cancel.
Additional comments
No response
Metadata
Metadata
Assignees
Labels
acceptedThere is consensus among the team that this change meets the criteria for inclusionThere is consensus among the team that this change meets the criteria for inclusionbugSomething isn't workingSomething isn't working
Type
Projects
Status
Complete
Activity
nzakas commentedon May 30, 2025
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 commentedon May 30, 2025
It looks like for some reason
clamp()
is not being honored as part ofmath
in thefont-size
property. 🤔It should work the same as
calc()
, which is also consideredmath
. 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 commentedon May 30, 2025
No rush! I have a workaround using media queries for the time being but I'm definitely interested when this is resolved.
nzakas commentedon May 30, 2025
Looks like
min()
andmax()
also don't work. It appears CSSTree only ever implementedcalc()
. Note for myself:https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units/Using_CSS_math_functions
mgoetz-nerdery commentedon Jun 2, 2025
If I have the project right, looks like there is a similar reported issue in CSSTree: csstree/csstree#338
nzakas commentedon Jun 2, 2025
@mgoetz-nerdery yes, but we have our own fork.
fix: Upgrade @eslint/css-tree to update syntax support
fix: Upgrade @eslint/css-tree to update syntax support (#173)