Fix false positives for interpolation in property name in custom-prop…

…erty-pattern (#5949)

Co-authored-by: Richard Hallows <jeddy3@users.noreply.github.com>

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} ); }',
 		},
 	],
 });

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);
 		});