diff --git a/docs/rules/no-invalid-properties.md b/docs/rules/no-invalid-properties.md
index def5eb2f..767a1010 100644
--- a/docs/rules/no-invalid-properties.md
+++ b/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.
diff --git a/src/rules/no-invalid-properties.js b/src/rules/no-invalid-properties.js
index 3f9f3436..74e8f0b6 100644
--- a/src/rules/no-invalid-properties.js
+++ b/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: {
diff --git a/tests/rules/no-invalid-properties.test.js b/tests/rules/no-invalid-properties.test.js
index 9ceced73..22005a88 100644
--- a/tests/rules/no-invalid-properties.test.js
+++ b/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: [
 		{