From 890fc5ddade6322f67b0721ac54ca981582aec6f Mon Sep 17 00:00:00 2001
From: kawaguchi <30929824+kawaguchi1102@users.noreply.github.com>
Date: Mon, 7 Mar 2022 18:55:44 +0900
Subject: [PATCH] Fix false positives for interpolation in property name in
 custom-property-pattern (#5949)

Co-authored-by: Richard Hallows <jeddy3@users.noreply.github.com>
---
 .../__tests__/index.js                        | 11 +++++++-
 lib/rules/custom-property-pattern/index.js    | 25 +++++++++++--------
 2 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/lib/rules/custom-property-pattern/__tests__/index.js b/lib/rules/custom-property-pattern/__tests__/index.js
index 6eaaed257c..aba026064b 100644
--- a/lib/rules/custom-property-pattern/__tests__/index.js
+++ b/lib/rules/custom-property-pattern/__tests__/index.js
@@ -136,7 +136,16 @@ testRule({
 			code: 'a { color: var($foo-color); }',
 		},
 		{
-			code: 'a { color: var(tokens.$bar-color); }',
+			code: 'a { color: var(bar.$baz); }',
+		},
+		{
+			code: 'a { --#{$bar}: 0; }',
+		},
+		{
+			code: 'a { color: var( #{$bar} ); }',
+		},
+		{
+			code: 'a { color: var( --#{$bar} ); }',
 		},
 	],
 });
diff --git a/lib/rules/custom-property-pattern/index.js b/lib/rules/custom-property-pattern/index.js
index 3e90727ba9..3f54ed07a0 100644
--- a/lib/rules/custom-property-pattern/index.js
+++ b/lib/rules/custom-property-pattern/index.js
@@ -8,6 +8,7 @@ const validateOptions = require('../../utils/validateOptions');
 const declarationValueIndex = require('../../utils/declarationValueIndex');
 const { isRegExp, isString } = require('../../utils/validateTypes');
 const { isValueFunction } = require('../../utils/typeGuards');
+const isStandardSyntaxProperty = require('../../utils/isStandardSyntaxProperty');
 
 const ruleName = 'custom-property-pattern';
 
@@ -33,6 +34,18 @@ const rule = (primary) => {
 
 		const regexpPattern = isString(primary) ? new RegExp(primary) : primary;
 
+		/**
+		 * @param {string} property
+		 * @returns {boolean}
+		 */
+		function check(property) {
+			return (
+				!isStandardSyntaxProperty(property) ||
+				!isCustomProperty(property) ||
+				regexpPattern.test(property.slice(2))
+			);
+		}
+
 		root.walkDecls((decl) => {
 			const { prop, value } = decl;
 
@@ -47,20 +60,12 @@ const rule = (primary) => {
 
 				const { value: firstNodeValue } = nodes[0];
 
-				if (!isCustomProperty(firstNodeValue)) return;
-
-				if (regexpPattern.test(firstNodeValue.slice(2))) return;
+				if (check(firstNodeValue)) return;
 
 				complain(declarationValueIndex(decl) + sourceIndex, decl);
 			});
 
-			if (!isCustomProperty(prop)) {
-				return;
-			}
-
-			if (regexpPattern.test(prop.slice(2))) {
-				return;
-			}
+			if (check(prop)) return;
 
 			complain(0, decl);
 		});