fix: report cross attribute duplicates

related to #2932 discussion

Author: Yizack

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

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

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

@@ -26,8 +26,7 @@ function* extractClassNodes(node, expression) {
         if (
           prop.type === 'Property' &&
           prop.key?.type === 'Literal' &&
-          typeof prop.key.value === 'string' &&
-          prop.key.value.includes(' ')
+          typeof prop.key.value === 'string'
         ) {
           yield { node: prop.key }
         }
@@ -66,6 +65,14 @@ function* extractClassNodes(node, expression) {
   }
 }
 
+/**
+ * @param {string} classList
+ * @returns {string[]}
+ */
+function getClassNames(classList) {
+  return classList.split(/\s+/).filter(Boolean)
+}
+
 /**
  * @param {string} raw - raw class names string including quotes
  * @returns {string}
@@ -160,7 +167,7 @@ module.exports = {
 
       if (typeof classList !== 'string') return
 
-      const classNames = classList.split(/\s+/).filter(Boolean)
+      const classNames = getClassNames(classList)
       if (classNames.length <= 1) return
 
       const seen = new Set()
@@ -199,8 +206,51 @@ module.exports = {
       "VAttribute[directive=true][key.argument.name='class'][value.type='VExpressionContainer']"(
         node
       ) {
+        const parent = node.parent
+        const attrs = parent.attributes || []
+
+        const staticAttr = attrs.find(
+          (attr) =>
+            attr.key &&
+            attr.key.name === 'class' &&
+            attr.value &&
+            attr.value.type === 'VLiteral'
+        )
+
+        /** @type {Set<string> | null} */
+        let staticClasses = null
+
+        if (
+          staticAttr &&
+          staticAttr.value &&
+          staticAttr.value.type === 'VLiteral'
+        ) {
+          staticClasses = new Set(getClassNames(String(staticAttr.value.value)))
+        }
+
         for (const { node: reportNode } of extractClassNodes(node)) {
           reportDuplicateClasses(reportNode)
+
+          if (staticClasses) {
+            const classList =
+              reportNode.value &&
+              typeof reportNode.value === 'object' &&
+              'raw' in reportNode.value
+                ? reportNode.value.raw
+                : reportNode.value
+
+            if (typeof classList !== 'string') continue
+
+            const classNames = getClassNames(classList)
+            const intersection = classNames.filter((n) => staticClasses.has(n))
+            if (intersection.length > 0 && parent) {
+              context.report({
+                node: parent,
+                messageId: 'duplicateClassName',
+                data: { name: intersection.join(', ') }
+              })
+            }
+          }
         }
       }
     })

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

@@ -41,22 +41,10 @@ tester.run('no-duplicate-class-names', rule, {
       filename: 'no-duplicate-class-in-directive-object.vue',
       code: `<template><div :class="{ 'foo bar baz': true }"></div></template>`
     },
-    {
-      filename: 'duplicate-class-and-directive.vue',
-      code: `<template><div class="foo" :class="'foo'"></div></template>`
-    },
     {
       filename: 'duplicate-class-in-different-directive-object-keys.vue',
       code: `<template><div :class="{ 'foo': true, 'foo bar': true }"></div></template>`
     },
-    {
-      filename: 'duplicate-class-in-different-directive-array-items.vue',
-      code: `<template><div :class="['foo', 'foo bar']"></div></template>`
-    },
-    {
-      filename: 'duplicate-class-in-different-directive-mixed.vue',
-      code: `<template><div :class="['foo', { 'foo bar': true }]"></div></template>`
-    },
     {
       filename: 'class-conditional-expression.vue',
       code: `<template><div :class="isActive ? 'foo' : 'bar'"></div></template>`
@@ -228,6 +216,61 @@ tester.run('no-duplicate-class-names', rule, {
           type: 'VLiteral'
         }
       ]
+    },
+    {
+      filename: 'duplicate-class-in-different-attributes.vue',
+      code: `<template><div class="foo" :class="'foo'"></div></template>`,
+      output: null,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          type: 'VStartTag'
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-different-attributes.vue',
+      code: `<template><div class="foo" :class="'foo bar'"></div></template>`,
+      output: null,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          type: 'VStartTag'
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-different-attributes-multiple-duplicates.vue',
+      code: `<template><div class="foo bar" :class="'foo bar'"></div></template>`,
+      output: null,
+      errors: [
+        {
+          message: "Duplicate class name 'foo, bar'.",
+          type: 'VStartTag'
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-different-attributes-array.vue',
+      code: `<template><div class="foo" :class="['foo', 'bar']"></div></template>`,
+      output: null,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          type: 'VStartTag'
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-different-attributes-object.vue',
+      code: `<template><div class="foo" :class="{ 'foo': true }"></div></template>`,
+      output: null,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          type: 'VStartTag'
+        }
+      ]
     }
   ]
 })