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