fix: handle missing declaration state in no-invalid-properties (#290)

* fix: handle missing declaration state in `no-invalid-properties`

* combine state checks into a single condition

Author: xbinaryx

src/rules/no-invalid-properties.js

@@ -343,11 +343,18 @@ export default {
 			},
 
 			Function() {
-				declStack.at(-1).functionPartsStack.push([]);
+				const state = declStack.at(-1);
+				if (!state) {
+					return;
+				}
+				state.functionPartsStack.push([]);
 			},
 
 			"Function > *:not(Function)"(node) {
 				const state = declStack.at(-1);
+				if (!state) {
+					return;
+				}
 				const parts = state.functionPartsStack.at(-1);
 				const text = sourceCode.getText(node).trim();
 				parts.push(text);
@@ -356,7 +363,7 @@ export default {
 
 			"Function:exit"(node) {
 				const state = declStack.at(-1);
-				if (state.skipValidation) {
+				if (!state || state.skipValidation) {
 					return;
 				}
 

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

@@ -164,6 +164,12 @@ ruleTester.run("no-invalid-properties", rule, {
 			code: ":root { --a: var(--c); --b: var(--a); }\na { color: var(--b); }",
 			options: [{ allowUnknownVariables: true }],
 		},
+		"@supports (color: color(display-p3 1 1 1)) { a { --my-color: oklch(73.5% 0.1192 254.8); } }",
+		"@supports not (color: color(display-p3 1 1 1)) { a { --my-color: rgb(31 120 50); } }",
+		"@supports selector(:is(a)) { a { color: red; } }",
+		"@media (color-gamut: srgb) { a { --my-color: #f4ae8a; } }",
+		"@supports (color: color(display-p3 1 1 1)) { @media (color-gamut: p3) { a { --c: oklch(50% 0.1 120); } } }",
+		"@import 'x.css' layer(theme);",
 
 		/*
 		 * CSSTree doesn't currently support custom functions properly, so leaving
@@ -427,6 +433,21 @@ ruleTester.run("no-invalid-properties", rule, {
 				},
 			],
 		},
+		{
+			code: "@supports (color: color(display-p3 1 1 1)) { a { color: var(--my-color); } }",
+			errors: [
+				{
+					messageId: "unknownVar",
+					data: {
+						var: "--my-color",
+					},
+					line: 1,
+					column: 61,
+					endLine: 1,
+					endColumn: 71,
+				},
+			],
+		},
 		{
 			code: "a { color: var(--MY-COLOR, var(--FALLBACK-COLOR)); }",
 			errors: [
@@ -566,6 +587,23 @@ ruleTester.run("no-invalid-properties", rule, {
 				},
 			],
 		},
+		{
+			code: ":root { --color: foo }\n@supports (color: color(display-p3 1 1 1)) { a { color: var(--color); } }",
+			errors: [
+				{
+					messageId: "invalidPropertyValue",
+					data: {
+						property: "color",
+						value: "foo",
+						expected: "<color>",
+					},
+					line: 2,
+					column: 57,
+					endLine: 2,
+					endColumn: 69,
+				},
+			],
+		},
 		{
 			code: "a { colorr: var(--my-color); }",
 			options: [{ allowUnknownVariables: true }],
@@ -1103,6 +1141,23 @@ ruleTester.run("no-invalid-properties", rule, {
 				},
 			],
 		},
+		{
+			code: "@supports (color: color(display-p3 1 1 1)) { a { color: foo } }",
+			errors: [
+				{
+					messageId: "invalidPropertyValue",
+					data: {
+						property: "color",
+						value: "foo",
+						expected: "<color>",
+					},
+					line: 1,
+					column: 57,
+					endLine: 1,
+					endColumn: 60,
+				},
+			],
+		},
 		{
 			code: "a { padding: calc(var(--padding-top, 1px) + 1px) 2px calc(var(--padding-bottom) + 1px); }",
 			errors: [