fix (quoted-expression): false positive in quoted-expressions (#209) (#…

…210) Allows quoted expressions in all cases which have mixed values (e.g. an expr in the middle of a string)
43081j · Jul 30, 2024 · 427627c · 427627c
1 parent 406b902
commit 427627c
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 7 deletions.
diff --git a/src/rules/quoted-expressions.ts b/src/rules/quoted-expressions.ts
@@ -37,6 +37,7 @@ const rule: Rule.RuleModule = {
   create(context): Rule.RuleListener {
     // variables should be defined here
     const alwaysQuote = context.options[0] === 'always';
+    const quotePattern = /=(["'])?$/;
 
     //----------------------------------------------------------------------
     // Helpers
@@ -57,20 +58,18 @@ const rule: Rule.RuleModule = {
             const expression = node.quasi.expressions[i];
             const previousQuasi = node.quasi.quasis[i];
             const nextQuasi = node.quasi.quasis[i + 1];
-            const isAttribute = /=["']?$/.test(previousQuasi.value.raw);
+            const quoteMatch = previousQuasi.value.raw.match(quotePattern);
 
             // don't care about non-attribute bindings
-            if (!isAttribute) {
+            if (!quoteMatch) {
               continue;
             }
 
+            const hasStartQuote = quoteMatch[1] !== undefined;
             const isQuoted =
-              (previousQuasi.value.raw.endsWith('="') &&
-                nextQuasi.value.raw.startsWith('"')) ||
-              (previousQuasi.value.raw.endsWith("='") &&
-                nextQuasi.value.raw.startsWith("'"));
+              hasStartQuote && nextQuasi.value.raw.startsWith(quoteMatch[1]);
 
-            if (alwaysQuote && !isQuoted) {
+            if (alwaysQuote && !hasStartQuote) {
               context.report({
                 node: expression,
                 messageId: 'alwaysQuote',

diff --git a/src/test/rules/quoted-expressions_test.ts b/src/test/rules/quoted-expressions_test.ts
@@ -43,6 +43,38 @@ ruleTester.run('quoted-expressions', rule, {
     {
       code: "html`<x-foo attr='${v}'></x-foo>`",
       options: ['always']
+    },
+    {
+      code: 'html`<x-foo attr="${v} foo">${expr}</x-foo>`',
+      options: ['always']
+    },
+    {
+      code: 'html`<x-foo attr="foo ${v} bar">${expr}</x-foo>`',
+      options: ['always']
+    },
+    {
+      code: 'html`<x-foo attr="foo ${v}${w} bar">${expr}</x-foo>`',
+      options: ['always']
+    },
+    {
+      code: 'html`<x-foo attr="foo ${v} bar ${w} baz">${expr}</x-foo>`',
+      options: ['always']
+    },
+    {
+      code: 'html`<x-foo attr="${v ? "foo" : "bar"} baz">${expr}</x-foo>`',
+      options: ['always']
+    },
+    {
+      code: 'html`<x-foo attr="foo ${v}">${expr}</x-foo>`',
+      options: ['always']
+    },
+    {
+      code: 'html`<p attr="${v} foo">${expr}</p>`',
+      options: ['never']
+    },
+    {
+      code: 'html`<p attr="foo ${v} bar">${expr}</p>`',
+      options: ['never']
     }
   ],