Environment

ESLint version: v10.7.0
@eslint/css version: v1.4.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?

import css from "@eslint/css";

export default [
	{
		files: ["**/*.css"],
		plugins: { css },
		language: "css/css",
		rules: {
			"css/no-invalid-properties": "error",
		},
	},
];

.a {
	padding-top: env(safe-area-inset-top);
}

.b {
	padding-top: calc(env(safe-area-inset-top) + 10px);
}

What did you expect to happen?

No errors. These are all valid declarations — env() is standard CSS and padding-top/width are obviously real properties.

What actually happened?

Both declarations are reported as an unknown property:

  2:2  error  Unknown property 'padding-top' found  css/no-invalid-properties
  6:2  error  Unknown property 'padding-top' found  css/no-invalid-properties

css-tree's lexer throws a plain Error ("Matching for a tree with env() is not supported") when the value contains env(), and the error handling in no-invalid-properties treats any non-SyntaxMatchError as an unknown property when allowUnknownVariables is false. So the "env() not supported" error ends up reported as "Unknown property".

Setting allowUnknownVariables: true works around it, but the default hits pretty common CSS (safe-area-inset padding) and the message is wrong either way. Maybe values containing env() should just skip validation, like
unresolved var() does?

Link to Minimal Reproducible Example

https://stackblitz.com/edit/stackblitz-starters-2hdjwmbx

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