feat: support TemplateLiteral + improve report

Author: Yizack

docs/rules/no-duplicate-class-names.md

@@ -31,6 +31,7 @@ This rule prevents the same class name from appearing multiple times within the
   <div class="foo foo"></div>
   <div class="foo bar foo baz bar"></div>
   <div :class="'foo foo'"></div>
+  <div :class="`foo foo`"></div>
   <div :class="{ 'foo foo': true }"></div>
   <div :class="['foo foo']"></div>
   <div :class="['foo foo', { 'bar bar baz': true }]"></div>

lib/rules/no-duplicate-class-names.js

@@ -10,18 +10,15 @@ const utils = require('../utils')
 /**
  * @param {VDirective} node
  * @param {Expression} [expression]
- * @return {IterableIterator<{
- *  node: Literal | VAttribute | VDirective,
- *  target?: VLiteral | Literal
- * }>}
+ * @return {IterableIterator<{ node: Literal | TemplateElement }>}
  */
 function* extractDuplicateNode(node, expression) {
   const nodeExpression = expression ?? node.value?.expression
   if (!nodeExpression) return
 
   switch (nodeExpression.type) {
     case 'Literal': {
-      yield { node, target: nodeExpression }
+      yield { node: nodeExpression }
       break
     }
     case 'ObjectExpression': {
@@ -51,6 +48,15 @@ function* extractDuplicateNode(node, expression) {
       yield* extractDuplicateNode(node, nodeExpression.alternate)
       break
     }
+    case 'TemplateLiteral': {
+      for (const quasi of nodeExpression.quasis) {
+        yield { node: quasi }
+      }
+      for (const expr of nodeExpression.expressions) {
+        yield* extractDuplicateNode(node, expr)
+      }
+      break
+    }
   }
 }
 
@@ -71,14 +77,17 @@ module.exports = {
   /** @param {RuleContext} context */
   create: (context) => {
     /**
-     * @param {VAttribute | VDirective | Literal} node
-     * @param {VLiteral | Literal | null} [target]
+     * @param {VAttribute | VLiteral | Literal | TemplateElement | null} node
      */
-    function reportDuplicateClasses(node, target) {
-      const fixTarget = target ?? node
+    function reportDuplicateClasses(node) {
+      const fixTarget = node
       if (!fixTarget || !fixTarget.value) return
 
-      const classList = fixTarget.value
+      const classList =
+        typeof fixTarget.value === 'object' && 'raw' in fixTarget.value
+          ? fixTarget.value.raw
+          : fixTarget.value
+
       if (typeof classList !== 'string') return
 
       const classNames = classList.split(/\s+/).filter(Boolean)
@@ -122,14 +131,14 @@ module.exports = {
       "VAttribute[directive=false][key.name='class'][value.type='VLiteral']"(
         node
       ) {
-        reportDuplicateClasses(node, node.value)
+        reportDuplicateClasses(node.value)
       },
       /** @param {VDirective} node */
       "VAttribute[directive=true][key.argument.name='class'][value.type='VExpressionContainer']"(
         node
       ) {
-        for (const { node: reportNode, target } of extractDuplicateNode(node)) {
-          reportDuplicateClasses(reportNode, target)
+        for (const { node: reportNode } of extractDuplicateNode(node)) {
+          reportDuplicateClasses(reportNode)
         }
       }
     })

tests/lib/rules/no-duplicate-class-names.js

@@ -33,6 +33,10 @@ tester.run('no-duplicate-class-names', rule, {
       filename: 'no-duplicate-class-in-directive-string.vue',
       code: `<template><div :class="'foo bar baz'"></div></template>`
     },
+    {
+      filename: 'no-duplicate-class-in-directive-literal.vue',
+      code: '<template><div :class="`foo bar baz`"></div></template>'
+    },
     {
       filename: 'no-duplicate-class-in-directive-object.vue',
       code: `<template><div :class="{ 'foo bar baz': true }"></div></template>`
@@ -66,7 +70,7 @@ tester.run('no-duplicate-class-names', rule, {
       errors: [
         {
           message: "Duplicate class name 'foo'.",
-          type: 'VAttribute'
+          type: 'VLiteral'
         }
       ]
     },
@@ -77,18 +81,29 @@ tester.run('no-duplicate-class-names', rule, {
       errors: [
         {
           message: "Duplicate class name 'foo, bar'.",
-          type: 'VAttribute'
+          type: 'VLiteral'
         }
       ]
     },
     {
-      filename: 'duplicate-class-in-directive-string-literal.vue',
+      filename: 'duplicate-class-in-directive-string.vue',
       code: `<template><div :class="'foo foo'"></div></template>`,
       output: `<template><div :class="'foo'"></div></template>`,
       errors: [
         {
           message: "Duplicate class name 'foo'.",
-          type: 'VAttribute'
+          type: 'Literal'
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-in-directive-literal.vue',
+      code: '<template><div :class="`foo foo`"></div></template>',
+      output: '<template><div :class="`foo`"></div></template>',
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          type: 'TemplateElement'
         }
       ]
     },
@@ -125,7 +140,7 @@ tester.run('no-duplicate-class-names', rule, {
       errors: [
         {
           message: "Duplicate class name 'foo'.",
-          type: 'VAttribute'
+          type: 'Literal'
         }
       ]
     },
@@ -136,11 +151,11 @@ tester.run('no-duplicate-class-names', rule, {
       errors: [
         {
           message: "Duplicate class name 'foo'.",
-          type: 'VAttribute'
+          type: 'Literal'
         },
         {
           message: "Duplicate class name 'bar'.",
-          type: 'VAttribute'
+          type: 'Literal'
         }
       ]
     },
@@ -151,7 +166,7 @@ tester.run('no-duplicate-class-names', rule, {
       errors: [
         {
           message: "Duplicate class name 'foo'.",
-          type: 'VAttribute'
+          type: 'Literal'
         },
         {
           message: "Duplicate class name 'bar'.",
@@ -166,7 +181,7 @@ tester.run('no-duplicate-class-names', rule, {
       errors: [
         {
           message: "Duplicate class name 'foo'.",
-          type: 'VAttribute'
+          type: 'Literal'
         }
       ]
     }