From 556d4a4873d1905e9efc5a11c86c5d0257bd8959 Mon Sep 17 00:00:00 2001 From: yinonov Date: Sun, 20 Feb 2022 23:51:06 +0200 Subject: [PATCH 1/4] fix(custom-property-pattern): false positives for interpolation inside var Closes #5921 --- lib/rules/custom-property-pattern/__tests__/index.js | 6 ++++++ lib/rules/custom-property-pattern/index.js | 6 +++++- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/lib/rules/custom-property-pattern/__tests__/index.js b/lib/rules/custom-property-pattern/__tests__/index.js index e6bb4861a3..bb4c5ce721 100644 --- a/lib/rules/custom-property-pattern/__tests__/index.js +++ b/lib/rules/custom-property-pattern/__tests__/index.js @@ -19,6 +19,12 @@ testRule({ { code: ':root { --foo-sub-color: #f00; } a { color: var(--foo-color, var(--foo-sub-color)); }', }, + { + code: 'a { color: var($foo-color); }', + }, + { + code: 'a { color: var(tokens.$foo-color); }', + }, ], reject: [ diff --git a/lib/rules/custom-property-pattern/index.js b/lib/rules/custom-property-pattern/index.js index e9bc7f942a..3e90727ba9 100644 --- a/lib/rules/custom-property-pattern/index.js +++ b/lib/rules/custom-property-pattern/index.js @@ -45,7 +45,11 @@ const rule = (primary) => { const { nodes, sourceIndex } = node; - if (regexpPattern.test(nodes[0].value.slice(2))) return; + const { value: firstNodeValue } = nodes[0]; + + if (!isCustomProperty(firstNodeValue)) return; + + if (regexpPattern.test(firstNodeValue.slice(2))) return; complain(declarationValueIndex(decl) + sourceIndex, decl); }); From ba44d09f866be4af578d8aada7fb2304b16f3858 Mon Sep 17 00:00:00 2001 From: yinonov Date: Mon, 21 Feb 2022 15:13:36 +0200 Subject: [PATCH 2/4] scope postcss-scss test --- .../__tests__/index.js | 21 +++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/lib/rules/custom-property-pattern/__tests__/index.js b/lib/rules/custom-property-pattern/__tests__/index.js index bb4c5ce721..8d953c1b82 100644 --- a/lib/rules/custom-property-pattern/__tests__/index.js +++ b/lib/rules/custom-property-pattern/__tests__/index.js @@ -19,12 +19,6 @@ testRule({ { code: ':root { --foo-sub-color: #f00; } a { color: var(--foo-color, var(--foo-sub-color)); }', }, - { - code: 'a { color: var($foo-color); }', - }, - { - code: 'a { color: var(tokens.$foo-color); }', - }, ], reject: [ @@ -131,3 +125,18 @@ testRule({ }, ], }); + +testRule({ + ruleName, + customSyntax: 'postcss-scss', + config: ['$foo-color'], + + accept: [ + { + code: 'a { color: var($foo-color); }', + }, + { + code: 'a { color: var(tokens.$foo-color); }', + }, + ], +}); From 24ba95246c74355f57a634a652ac3672a1acc960 Mon Sep 17 00:00:00 2001 From: yinon Date: Mon, 21 Feb 2022 15:53:12 +0200 Subject: [PATCH 3/4] Update lib/rules/custom-property-pattern/__tests__/index.js Co-authored-by: Richard Hallows --- lib/rules/custom-property-pattern/__tests__/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/rules/custom-property-pattern/__tests__/index.js b/lib/rules/custom-property-pattern/__tests__/index.js index 8d953c1b82..3c9744523a 100644 --- a/lib/rules/custom-property-pattern/__tests__/index.js +++ b/lib/rules/custom-property-pattern/__tests__/index.js @@ -129,7 +129,7 @@ testRule({ testRule({ ruleName, customSyntax: 'postcss-scss', - config: ['$foo-color'], + config: [/foo-.+/], accept: [ { From 65053ef68db5af81842f784e52d25c0936526434 Mon Sep 17 00:00:00 2001 From: yinon Date: Mon, 21 Feb 2022 15:54:15 +0200 Subject: [PATCH 4/4] Update lib/rules/custom-property-pattern/__tests__/index.js Co-authored-by: Richard Hallows --- lib/rules/custom-property-pattern/__tests__/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/rules/custom-property-pattern/__tests__/index.js b/lib/rules/custom-property-pattern/__tests__/index.js index 3c9744523a..6eaaed257c 100644 --- a/lib/rules/custom-property-pattern/__tests__/index.js +++ b/lib/rules/custom-property-pattern/__tests__/index.js @@ -136,7 +136,7 @@ testRule({ code: 'a { color: var($foo-color); }', }, { - code: 'a { color: var(tokens.$foo-color); }', + code: 'a { color: var(tokens.$bar-color); }', }, ], });