feat: make var() regex multiline-safe in no-invalid-properties (#242)

* fix: make var() regex multiline-safe

* add test

Author: Pixel998

src/rules/no-invalid-properties.js

@@ -28,8 +28,7 @@ import { isSyntaxMatchError, isSyntaxReferenceError } from "../util.js";
 /**
  * Regex to match var() functional notation with optional fallback.
  */
-// eslint-disable-next-line regexp/no-super-linear-backtracking --  TODO: fix \s*(.+) to match newline characters
-const varFunctionPattern = /var\(\s*(--[^,\s)]+)\s*(?:,\s*(.+))?\)/iu;
+const varFunctionPattern = /var\(\s*(--[^,\s)]+)\s*(?:,([\s\S]+))?\)/iu;
 
 /**
  * Parses a var() function text and extracts the custom property name and fallback.

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

@@ -78,6 +78,11 @@ ruleTester.run("no-invalid-properties", rule, {
 		":root { --MY-COLOR: red; }\na { color: var(--my-color, blue) }",
 		":root { --FALLBACK-COLOR: blue; }\na { color: var(--MY-COLOR, var(--FALLBACK-COLOR)) }",
 		":root { --fallback-color: blue; }\na { color: VAR(--MY-COLOR, VaR(--fallback-color)) }",
+		"a { color: var(--my-color,\n  red) }",
+		":root { --my-color: red; }\na { color: var(--my-color,\n blue) }",
+		"a { color: var(--x,\n    var(--y,\n      blue\n    )\n) }",
+		"a { color: var(--x,\n    red   ) }",
+		":root { --a: var(--b,\n  10px\n); } a { padding: var(--a); }",
 		{
 			code: "a { my-custom-color: red; }",
 			languageOptions: {
@@ -975,6 +980,41 @@ ruleTester.run("no-invalid-properties", rule, {
 				},
 			],
 		},
+		{
+			code: ":root { --a: var(--b,\n red); }\na { padding-top: var(--a); }",
+			errors: [
+				{
+					messageId: "invalidPropertyValue",
+					data: {
+						property: "padding-top",
+						value: "red",
+						expected: "<length-percentage [0,∞]>",
+					},
+					line: 3,
+					column: 18,
+					endLine: 3,
+					endColumn: 26,
+				},
+			],
+		},
+		{
+			code: "a { padding-top: var(--a,\nvar(--b, red\n)\n); }",
+			options: [{ allowUnknownVariables: true }],
+			errors: [
+				{
+					messageId: "invalidPropertyValue",
+					data: {
+						property: "padding-top",
+						value: "red",
+						expected: "<length-percentage [0,∞]>",
+					},
+					line: 1,
+					column: 18,
+					endLine: 4,
+					endColumn: 2,
+				},
+			],
+		},
 		{
 			code: ":root { --a: var(--b, red); }\na { padding-top: var(--a); }",
 			errors: [