fix: skip validating values containing env() in no-invalid-properties

src/rules/no-invalid-properties.js

@@ -7,7 +7,11 @@
 // Imports
 //-----------------------------------------------------------------------------
 
-import { isSyntaxMatchError, isSyntaxReferenceError } from "../util.js";
+import {
+	isSyntaxMatchError,
+	isSyntaxReferenceError,
+	isEnvMatchError,
+} from "../util.js";
 
 //-----------------------------------------------------------------------------
 // Type Definitions
@@ -463,7 +467,13 @@ export default /** @satisfies {NoInvalidPropertiesRuleDefinition} */ ({
 						});
 						return;
 					}
-
+					if (isEnvMatchError(error)) {
+						/*
+						 * env() values are provided by the user agent and
+						 * cannot be validated, so skip validation entirely.
+						 */
+						return;
+					}
 					if (
 						!allowUnknownVariables ||
 						isSyntaxReferenceError(error)

src/util.js

@@ -32,3 +32,13 @@ export function isSyntaxMatchError(error) {
 export function isSyntaxReferenceError(error) {
 	return typeof error.reference === "string";
 }
+
+/**
+ * Determines if an error is the lexer error thrown when a value containing
+ * `env()` cannot be matched against a syntax definition.
+ * @param {Object} error The error object to check.
+ * @returns {boolean} True if the error is the `env()` match error, false if not.
+ */
+export function isEnvMatchError(error) {
+	return error.message === "Matching for a tree with env() is not supported";
+}

tests/rules/no-invalid-properties.test.js

@@ -274,6 +274,14 @@ ruleTester.run("no-invalid-properties", rule, {
 		"main { p:has(.child) { color: red; } }",
 		"main { p:has(.child:hover) { color: red; } }",
 		"main { p:first-of-type, span { color: red; } }",
+
+		// env() values are provided by the user agent and cannot be validated
+		"a { padding-top: env(safe-area-inset-top); }",
+		"a { padding-top: env(safe-area-inset-top, 20px); }",
+		"a { padding-top: calc(env(safe-area-inset-top) + 10px); }",
+		"a { width: env(titlebar-area-width); }",
+		"a { padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom) 0; }",
+		"a { padding: env(safe-area-inset-top) red }",
 	],
 	invalid: [
 		{
@@ -1454,5 +1462,38 @@ ruleTester.run("no-invalid-properties", rule, {
 				},
 			],
 		},
+		{
+			code: "a { paddin-top: env(safe-area-inset-top); }",
+			errors: [
+				{
+					messageId: "unknownProperty",
+					data: { property: "paddin-top" },
+					line: 1,
+					column: 5,
+					endLine: 1,
+					endColumn: 15,
+				},
+			],
+		},
+
+		/*
+		 * Reporting an unknown `var()` nested inside `env()` is intentional:
+		 * this rule also checks that custom properties are resolvable, and that
+		 * check is independent of the syntax validation skipped for `env()`.
+		 * We can revisit this once the rule supports partial validation of values.
+		 */
+		{
+			code: "a { padding: env(safe-area-inset-top, var(--external-padding)); }",
+			errors: [
+				{
+					messageId: "unknownVar",
+					data: { var: "--external-padding" },
+					line: 1,
+					column: 43,
+					endLine: 1,
+					endColumn: 61,
+				},
+			],
+		},
 	],
 });