fix: Suppress var() validation errors

docs/rules/no-invalid-properties.md

@@ -42,6 +42,10 @@ body {
 }
 ```
 
+### Limitations
+
+This rule uses the lexer from [CSSTree](https://github.com/csstree/csstree), which does not support validation of property values that contain variable references (i.e., `var(--bg-color)`). The lexer throws an error when it comes across a variable reference, and rather than displaying that error, this rule ignores it. This unfortunately means that this rule cannot properly validate properties values that contain variable references. We'll continue to work towards a solution for this.
+
 ## When Not to Use It
 
 If you aren't concerned with invalid properties, then you can safely disable this rule.

src/rules/no-invalid-properties.js

@@ -56,6 +56,18 @@ export default {
 						return;
 					}
 
+					/*
+					 * There's no current way to get lexing to work when a
+					 * `var()` is present in a value. Rather than blowing up,
+					 * we'll just ignore it.
+					 *
+					 * https://github.com/csstree/csstree/issues/317
+					 */
+
+					if (error.message.endsWith("var() is not supported")) {
+						return;
+					}
+
 					// unknown property
 					context.report({
 						loc: {

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

@@ -32,6 +32,7 @@ ruleTester.run("no-invalid-properties", rule, {
 		"a { color: red; -moz-transition: bar }",
 		"@font-face { font-weight: 100 400 }",
 		'@property --foo { syntax: "*"; inherits: false; }',
+		"a { --my-color: red; color: var(--my-color) }",
 	],
 	invalid: [
 		{