diff --git a/src/rules/no-invalid-properties.js b/src/rules/no-invalid-properties.js index 6360df0..fcc97c6 100644 --- a/src/rules/no-invalid-properties.js +++ b/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; } diff --git a/tests/rules/no-invalid-properties.test.js b/tests/rules/no-invalid-properties.test.js index a8a3b00..5850db3 100644 --- a/tests/rules/no-invalid-properties.test.js +++ b/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: "", + }, + 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: "", + }, + line: 1, + column: 57, + endLine: 1, + endColumn: 60, + }, + ], + }, { code: "a { padding: calc(var(--padding-top, 1px) + 1px) 2px calc(var(--padding-bottom) + 1px); }", errors: [