From e02efe994a56ac43e5f8c9d08c0fcf103c3fb5c2 Mon Sep 17 00:00:00 2001
From: Yizack Rangel <yizackr@gmail.com>
Date: Tue, 9 Sep 2025 00:20:01 +0200
Subject: [PATCH 01/23] feat: add `no-duplicate-class-names` rule

---
 docs/rules/index.md                         |   2 +
 docs/rules/no-duplicate-class-names.md      |  36 +++++
 lib/index.js                                |   1 +
 lib/rules/no-duplicate-class-names.js       | 143 ++++++++++++++++++
 tests/lib/rules/no-duplicate-class-names.js | 159 ++++++++++++++++++++
 5 files changed, 341 insertions(+)
 create mode 100644 docs/rules/no-duplicate-class-names.md
 create mode 100644 lib/rules/no-duplicate-class-names.js
 create mode 100644 tests/lib/rules/no-duplicate-class-names.js

diff --git a/docs/rules/index.md b/docs/rules/index.md
index 26542db38..3209c157d 100644
--- a/docs/rules/index.md
+++ b/docs/rules/index.md
@@ -234,6 +234,7 @@ For example:
 | [vue/no-bare-strings-in-template] | disallow the use of bare strings in `<template>` |  | :hammer: |
 | [vue/no-boolean-default] | disallow boolean defaults |  | :hammer: |
 | [vue/no-duplicate-attr-inheritance] | enforce `inheritAttrs` to be set to `false` when using `v-bind="$attrs"` |  | :hammer: |
+| [vue/no-duplicate-class-names] | disallow duplication of class names in class attributes | :wrench: | :hammer: |
 | [vue/no-empty-component-block] | disallow the `<template>` `<script>` `<style>` block to be empty | :wrench: | :hammer: |
 | [vue/no-import-compiler-macros] | disallow importing Vue compiler macros | :wrench: | :warning: |
 | [vue/no-multiple-objects-in-class] | disallow passing multiple objects in an array to class |  | :hammer: |
@@ -468,6 +469,7 @@ The following rules extend the rules provided by ESLint itself and apply them to
 [vue/no-dupe-v-else-if]: ./no-dupe-v-else-if.md
 [vue/no-duplicate-attr-inheritance]: ./no-duplicate-attr-inheritance.md
 [vue/no-duplicate-attributes]: ./no-duplicate-attributes.md
+[vue/no-duplicate-class-names]: ./no-duplicate-class-names.md
 [vue/no-empty-component-block]: ./no-empty-component-block.md
 [vue/no-empty-pattern]: ./no-empty-pattern.md
 [vue/no-export-in-script-setup]: ./no-export-in-script-setup.md
diff --git a/docs/rules/no-duplicate-class-names.md b/docs/rules/no-duplicate-class-names.md
new file mode 100644
index 000000000..790de852b
--- /dev/null
+++ b/docs/rules/no-duplicate-class-names.md
@@ -0,0 +1,36 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-duplicate-class-names
+description: disallow duplication of class names in class attributes
+---
+
+# vue/no-duplicate-class-names
+
+> disallow duplication of class names in class attributes
+
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> _**This rule has not been released yet.**_ </badge>
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule ....
+
+<eslint-code-block fix :rules="{'vue/no-duplicate-class-names': ['error']}">
+
+```vue
+<template>
+
+</template>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+Nothing.
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-duplicate-class-names.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-duplicate-class-names.js)
diff --git a/lib/index.js b/lib/index.js
index 9b006f9f9..2921a2c99 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -125,6 +125,7 @@ const plugin = {
     'no-dupe-v-else-if': require('./rules/no-dupe-v-else-if'),
     'no-duplicate-attr-inheritance': require('./rules/no-duplicate-attr-inheritance'),
     'no-duplicate-attributes': require('./rules/no-duplicate-attributes'),
+    'no-duplicate-class-names': require('./rules/no-duplicate-class-names'),
     'no-empty-component-block': require('./rules/no-empty-component-block'),
     'no-empty-pattern': require('./rules/no-empty-pattern'),
     'no-export-in-script-setup': require('./rules/no-export-in-script-setup'),
diff --git a/lib/rules/no-duplicate-class-names.js b/lib/rules/no-duplicate-class-names.js
new file mode 100644
index 000000000..eacc94ea2
--- /dev/null
+++ b/lib/rules/no-duplicate-class-names.js
@@ -0,0 +1,143 @@
+/**
+ * @fileoverview disallow duplication of class names in class attributes
+ * @author Yizack Rangel
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+
+/**
+ * @param {VDirective} node
+ * @param {Expression} [expression]
+ * @return {IterableIterator<{
+ *  node: Literal | VAttribute | VDirective,
+ *  target?: VLiteral | Literal
+ * }>}
+ */
+function* extractDuplicateNode(node, expression) {
+  const nodeExpression = expression ?? node.value?.expression
+  if (!nodeExpression) return
+
+  switch (nodeExpression.type) {
+    case 'Literal': {
+      yield { node, target: nodeExpression }
+      break
+    }
+    case 'ObjectExpression': {
+      for (const prop of nodeExpression.properties) {
+        if (
+          prop.type === 'Property' &&
+          prop.key &&
+          prop.key.type === 'Literal' &&
+          typeof prop.key.value === 'string' &&
+          prop.key.value.includes(' ')
+        ) {
+          yield { node: prop.key }
+        }
+      }
+      break
+    }
+    case 'ArrayExpression': {
+      for (const element of nodeExpression.elements) {
+        if (!element || element.type === 'SpreadElement') {
+          continue
+        }
+        yield* extractDuplicateNode(node, element)
+      }
+      break
+    }
+  }
+}
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      url: 'https://eslint.vuejs.org/rules/no-duplicate-class-names.html',
+      description: 'disallow duplication of class names in class attributes',
+      categories: undefined
+    },
+    fixable: 'code',
+    schema: [],
+    messages: {
+      duplicateClassName: "Duplicate class name '{{name}}'."
+    }
+  },
+  /** @param {RuleContext} context */
+  create: (context) => {
+    /**
+     * @param {VAttribute | VDirective | Literal} node
+     * @param {VLiteral | Literal | null} [target]
+     */
+    function reportDuplicateClasses(node, target) {
+      const fixTarget = target ?? node
+      if (!fixTarget || !fixTarget.value) return
+
+      const classList = fixTarget.value
+      if (typeof classList !== 'string') return
+
+      const classNames = classList.split(/\s+/).filter(Boolean)
+      if (classNames.length <= 1) return
+
+      const seen = new Set()
+      /** @type {string[]} */
+      const duplicates = []
+
+      for (const className of classNames) {
+        if (seen.has(className)) {
+          if (!duplicates.includes(className)) {
+            duplicates.push(className)
+          }
+        } else {
+          seen.add(className)
+        }
+      }
+
+      if (duplicates.length === 0) return
+
+      context.report({
+        node,
+        messageId: 'duplicateClassName',
+        data: { name: duplicates.join(', ') },
+        fix: (fixer) => {
+          const uniqueClasses = []
+          const seenInUnique = new Set()
+
+          for (const className of classNames) {
+            if (!seenInUnique.has(className)) {
+              uniqueClasses.push(className)
+              seenInUnique.add(className)
+            }
+          }
+
+          const unique = uniqueClasses.join(' ')
+          const sourceCode = context.getSourceCode()
+          const raw = sourceCode.text.slice(
+            fixTarget.range[0],
+            fixTarget.range[1]
+          )
+          const quote = raw[0]
+          return fixer.replaceText(fixTarget, `${quote}${unique}${quote}`)
+        }
+      })
+    }
+
+    return utils.defineTemplateBodyVisitor(context, {
+      /** @param {VAttribute} node */
+      "VAttribute[directive=false][key.name='class'][value.type='VLiteral']"(
+        node
+      ) {
+        reportDuplicateClasses(node, 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)
+        }
+      }
+    })
+  }
+}
diff --git a/tests/lib/rules/no-duplicate-class-names.js b/tests/lib/rules/no-duplicate-class-names.js
new file mode 100644
index 000000000..50f03aec7
--- /dev/null
+++ b/tests/lib/rules/no-duplicate-class-names.js
@@ -0,0 +1,159 @@
+/**
+ * @author Yizack Rangel
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/no-duplicate-class-names')
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('no-duplicate-class-names', rule, {
+  valid: [
+    {
+      filename: 'no-classes.vue',
+      code: '<template><div></div></template>'
+    },
+    {
+      filename: 'one-class.vue',
+      code: '<template><div class="foo"></div></template>'
+    },
+    {
+      filename: 'multiple-different-classes.vue',
+      code: '<template><div class="foo bar baz"></div></template>'
+    },
+    {
+      filename: 'no-duplicate-class-in-directive-string.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>`
+    },
+    {
+      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>`
+    }
+  ],
+  invalid: [
+    {
+      filename: 'duplicate-class.vue',
+      code: '<template><div class="foo foo"></div></template>',
+      output: '<template><div class="foo"></div></template>',
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          type: 'VAttribute'
+        }
+      ]
+    },
+    {
+      filename: 'multiple-duplicate-classes.vue',
+      code: '<template><div class="foo bar foo baz bar"></div></template>',
+      output: '<template><div class="foo bar baz"></div></template>',
+      errors: [
+        {
+          message: "Duplicate class name 'foo, bar'.",
+          type: 'VAttribute'
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-in-directive-string-literal.vue',
+      code: `<template><div :class="'foo foo'"></div></template>`,
+      output: `<template><div :class="'foo'"></div></template>`,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          type: 'VAttribute'
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-directive-object-key.vue',
+      code: `<template><div :class="{ 'foo foo': true }"></div></template>`,
+      output: `<template><div :class="{ 'foo': true }"></div></template>`,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          type: 'Literal'
+        }
+      ]
+    },
+    {
+      filename: 'multiple-duplicate-class-directive-object-keys.vue',
+      code: `<template><div :class="{ 'foo foo bar': true, 'bar bar baz': true }"></div></template>`,
+      output: `<template><div :class="{ 'foo bar': true, 'bar baz': true }"></div></template>`,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          type: 'Literal'
+        },
+        {
+          message: "Duplicate class name 'bar'.",
+          type: 'Literal'
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-directive-array-item.vue',
+      code: `<template><div :class="['foo foo']"></div></template>`,
+      output: `<template><div :class="['foo']"></div></template>`,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          type: 'VAttribute'
+        }
+      ]
+    },
+    {
+      filename: 'multiple-duplicate-classes-directive-array-items.vue',
+      code: `<template><div :class="['foo foo', 'bar bar baz']"></div></template>`,
+      output: `<template><div :class="['foo', 'bar baz']"></div></template>`,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          type: 'VAttribute'
+        },
+        {
+          message: "Duplicate class name 'bar'.",
+          type: 'VAttribute'
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-in-mixed-directive.vue',
+      code: `<template><div :class="['foo foo', { 'bar bar baz': true }]"></div></template>`,
+      output: `<template><div :class="['foo', { 'bar baz': true }]"></div></template>`,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          type: 'VAttribute'
+        },
+        {
+          message: "Duplicate class name 'bar'.",
+          type: 'Literal'
+        }
+      ]
+    }
+  ]
+})

From f1624935895eb74bec28ab2613be79702f07ca05 Mon Sep 17 00:00:00 2001
From: Yizack Rangel <yizackr@gmail.com>
Date: Tue, 9 Sep 2025 04:50:45 +0200
Subject: [PATCH 02/23] docs: add rule details

---
 docs/rules/no-duplicate-class-names.md | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/docs/rules/no-duplicate-class-names.md b/docs/rules/no-duplicate-class-names.md
index 790de852b..0cf0c65d3 100644
--- a/docs/rules/no-duplicate-class-names.md
+++ b/docs/rules/no-duplicate-class-names.md
@@ -14,13 +14,26 @@ description: disallow duplication of class names in class attributes
 
 ## :book: Rule Details
 
-This rule ....
+This rule prevents the same class name from appearing multiple times within the same class attribute or directive.
 
 <eslint-code-block fix :rules="{'vue/no-duplicate-class-names': ['error']}">
 
 ```vue
 <template>
-
+  <!-- ✓ GOOD -->
+  <div class="foo bar"></div>
+  <div :class="'foo bar'"></div>
+  <div :class="{ 'foo bar': true }"></div>
+  <div :class="['foo', 'bar']"></div>
+  
+  <!-- ✗ BAD -->
+  <div class="foo foo"></div>
+  <div class="foo bar foo baz bar"></div>
+  <div :class="'foo foo'"></div>
+  <div :class="{ 'foo foo': true }"></div>
+  <div :class="['foo foo']"></div>
+  <div :class="['foo foo', 'bar bar baz']"></div>
+  <div :class="['foo foo', { 'bar bar baz': true }]"></div>
 </template>
 ```
 

From 0fd19ef27787ada96a5186a3f1076f03e9974d67 Mon Sep 17 00:00:00 2001
From: Yizack Rangel <yizackr@gmail.com>
Date: Tue, 9 Sep 2025 05:13:34 +0200
Subject: [PATCH 03/23] docs: add changeset

---
 .changeset/ten-lines-fail.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/ten-lines-fail.md

diff --git a/.changeset/ten-lines-fail.md b/.changeset/ten-lines-fail.md
new file mode 100644
index 000000000..7ba93232a
--- /dev/null
+++ b/.changeset/ten-lines-fail.md
@@ -0,0 +1,5 @@
+---
+'eslint-plugin-vue': minor
+---
+
+Added new [`vue/no-duplicate-class-names`](https://eslint.vuejs.org/rules/no-duplicate-class-names.html) rule

From 2071c015de30e1b6808ed42876ba256487e7558c Mon Sep 17 00:00:00 2001
From: Yizack Rangel <yizackr@gmail.com>
Date: Tue, 9 Sep 2025 21:43:18 +0200
Subject: [PATCH 04/23] feat: report conditional expression

---
 docs/rules/no-duplicate-class-names.md      |  3 ++-
 lib/rules/no-duplicate-class-names.js       | 10 +++++++---
 tests/lib/rules/no-duplicate-class-names.js | 15 +++++++++++++++
 3 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/docs/rules/no-duplicate-class-names.md b/docs/rules/no-duplicate-class-names.md
index 0cf0c65d3..a59cc7074 100644
--- a/docs/rules/no-duplicate-class-names.md
+++ b/docs/rules/no-duplicate-class-names.md
@@ -25,6 +25,7 @@ This rule prevents the same class name from appearing multiple times within the
   <div :class="'foo bar'"></div>
   <div :class="{ 'foo bar': true }"></div>
   <div :class="['foo', 'bar']"></div>
+  <div :class="isActive ? 'foo' : 'bar'"></div>
   
   <!-- ✗ BAD -->
   <div class="foo foo"></div>
@@ -32,8 +33,8 @@ This rule prevents the same class name from appearing multiple times within the
   <div :class="'foo foo'"></div>
   <div :class="{ 'foo foo': true }"></div>
   <div :class="['foo foo']"></div>
-  <div :class="['foo foo', 'bar bar baz']"></div>
   <div :class="['foo foo', { 'bar bar baz': true }]"></div>
+  <div :class="isActive ? 'foo foo' : 'bar'"></div>
 </template>
 ```
 
diff --git a/lib/rules/no-duplicate-class-names.js b/lib/rules/no-duplicate-class-names.js
index eacc94ea2..ab1cb5088 100644
--- a/lib/rules/no-duplicate-class-names.js
+++ b/lib/rules/no-duplicate-class-names.js
@@ -40,13 +40,17 @@ function* extractDuplicateNode(node, expression) {
     }
     case 'ArrayExpression': {
       for (const element of nodeExpression.elements) {
-        if (!element || element.type === 'SpreadElement') {
-          continue
-        }
+        if (!element || element.type === 'SpreadElement') continue
+
         yield* extractDuplicateNode(node, element)
       }
       break
     }
+    case 'ConditionalExpression': {
+      yield* extractDuplicateNode(node, nodeExpression.consequent)
+      yield* extractDuplicateNode(node, nodeExpression.alternate)
+      break
+    }
   }
 }
 
diff --git a/tests/lib/rules/no-duplicate-class-names.js b/tests/lib/rules/no-duplicate-class-names.js
index 50f03aec7..55fec10d4 100644
--- a/tests/lib/rules/no-duplicate-class-names.js
+++ b/tests/lib/rules/no-duplicate-class-names.js
@@ -52,6 +52,10 @@ tester.run('no-duplicate-class-names', rule, {
     {
       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>`
     }
   ],
   invalid: [
@@ -154,6 +158,17 @@ tester.run('no-duplicate-class-names', rule, {
           type: 'Literal'
         }
       ]
+    },
+    {
+      filename: 'duplicate-class-conditional-expression.vue',
+      code: `<template><div :class="isActive ? 'foo foo' : 'bar'"></div></template>`,
+      output: `<template><div :class="isActive ? 'foo' : 'bar'"></div></template>`,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          type: 'VAttribute'
+        }
+      ]
     }
   ]
 })

From 99139ad326b92bf744c457cf4442725c6b99ce1c Mon Sep 17 00:00:00 2001
From: Yizack Rangel <yizackr@gmail.com>
Date: Tue, 9 Sep 2025 22:13:21 +0200
Subject: [PATCH 05/23] refactor: no need for a 2nd loop

---
 lib/rules/no-duplicate-class-names.js | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/lib/rules/no-duplicate-class-names.js b/lib/rules/no-duplicate-class-names.js
index ab1cb5088..a6e0f52f6 100644
--- a/lib/rules/no-duplicate-class-names.js
+++ b/lib/rules/no-duplicate-class-names.js
@@ -105,17 +105,7 @@ module.exports = {
         messageId: 'duplicateClassName',
         data: { name: duplicates.join(', ') },
         fix: (fixer) => {
-          const uniqueClasses = []
-          const seenInUnique = new Set()
-
-          for (const className of classNames) {
-            if (!seenInUnique.has(className)) {
-              uniqueClasses.push(className)
-              seenInUnique.add(className)
-            }
-          }
-
-          const unique = uniqueClasses.join(' ')
+          const unique = [...seen].join(' ')
           const sourceCode = context.getSourceCode()
           const raw = sourceCode.text.slice(
             fixTarget.range[0],

From ba9bd9ba0e397b53be2de93d837a7f5618f13aad Mon Sep 17 00:00:00 2001
From: Yizack Rangel <yizackr@gmail.com>
Date: Wed, 10 Sep 2025 14:58:54 +0200
Subject: [PATCH 06/23] feat: support `TemplateLiteral` + improve report

---
 docs/rules/no-duplicate-class-names.md      |  1 +
 lib/rules/no-duplicate-class-names.js       | 35 +++++++++++++--------
 tests/lib/rules/no-duplicate-class-names.js | 33 +++++++++++++------
 3 files changed, 47 insertions(+), 22 deletions(-)

diff --git a/docs/rules/no-duplicate-class-names.md b/docs/rules/no-duplicate-class-names.md
index a59cc7074..4692bf852 100644
--- a/docs/rules/no-duplicate-class-names.md
+++ b/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>
diff --git a/lib/rules/no-duplicate-class-names.js b/lib/rules/no-duplicate-class-names.js
index a6e0f52f6..c396ffd26 100644
--- a/lib/rules/no-duplicate-class-names.js
+++ b/lib/rules/no-duplicate-class-names.js
@@ -10,10 +10,7 @@ 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
@@ -21,7 +18,7 @@ function* extractDuplicateNode(node, expression) {
 
   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)
         }
       }
     })
diff --git a/tests/lib/rules/no-duplicate-class-names.js b/tests/lib/rules/no-duplicate-class-names.js
index 55fec10d4..2b202bfcc 100644
--- a/tests/lib/rules/no-duplicate-class-names.js
+++ b/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'
         }
       ]
     }

From 535b73ae648c979de1418ea7df7df5ddad2603da Mon Sep 17 00:00:00 2001
From: Yizack Rangel <yizackr@gmail.com>
Date: Wed, 10 Sep 2025 15:05:15 +0200
Subject: [PATCH 07/23] chore: simplify node param

---
 lib/rules/no-duplicate-class-names.js | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/lib/rules/no-duplicate-class-names.js b/lib/rules/no-duplicate-class-names.js
index c396ffd26..b541e62e0 100644
--- a/lib/rules/no-duplicate-class-names.js
+++ b/lib/rules/no-duplicate-class-names.js
@@ -77,16 +77,15 @@ module.exports = {
   /** @param {RuleContext} context */
   create: (context) => {
     /**
-     * @param {VAttribute | VLiteral | Literal | TemplateElement | null} node
+     * @param {VLiteral | Literal | TemplateElement | null} node
      */
     function reportDuplicateClasses(node) {
-      const fixTarget = node
-      if (!fixTarget || !fixTarget.value) return
+      if (!node || !node.value) return
 
       const classList =
-        typeof fixTarget.value === 'object' && 'raw' in fixTarget.value
-          ? fixTarget.value.raw
-          : fixTarget.value
+        typeof node.value === 'object' && 'raw' in node.value
+          ? node.value.raw
+          : node.value
 
       if (typeof classList !== 'string') return
 
@@ -116,12 +115,9 @@ module.exports = {
         fix: (fixer) => {
           const unique = [...seen].join(' ')
           const sourceCode = context.getSourceCode()
-          const raw = sourceCode.text.slice(
-            fixTarget.range[0],
-            fixTarget.range[1]
-          )
+          const raw = sourceCode.text.slice(node.range[0], node.range[1])
           const quote = raw[0]
-          return fixer.replaceText(fixTarget, `${quote}${unique}${quote}`)
+          return fixer.replaceText(node, `${quote}${unique}${quote}`)
         }
       })
     }

From 1b04b2a6bd226a26a900e20e6f6797d1eff80897 Mon Sep 17 00:00:00 2001
From: Yizack Rangel <yizackr@gmail.com>
Date: Wed, 10 Sep 2025 16:46:50 +0200
Subject: [PATCH 08/23] feat: support `BinaryExpression` + preserve spaces

---
 docs/rules/no-duplicate-class-names.md      |  2 +
 lib/rules/no-duplicate-class-names.js       | 76 ++++++++++++++++++++-
 tests/lib/rules/no-duplicate-class-names.js | 44 ++++++++++++
 3 files changed, 119 insertions(+), 3 deletions(-)

diff --git a/docs/rules/no-duplicate-class-names.md b/docs/rules/no-duplicate-class-names.md
index 4692bf852..f3cc6ef27 100644
--- a/docs/rules/no-duplicate-class-names.md
+++ b/docs/rules/no-duplicate-class-names.md
@@ -26,6 +26,7 @@ This rule prevents the same class name from appearing multiple times within the
   <div :class="{ 'foo bar': true }"></div>
   <div :class="['foo', 'bar']"></div>
   <div :class="isActive ? 'foo' : 'bar'"></div>
+  <div :class="'foo ' + 'bar'"></div>
   
   <!-- ✗ BAD -->
   <div class="foo foo"></div>
@@ -36,6 +37,7 @@ This rule prevents the same class name from appearing multiple times within the
   <div :class="['foo foo']"></div>
   <div :class="['foo foo', { 'bar bar baz': true }]"></div>
   <div :class="isActive ? 'foo foo' : 'bar'"></div>
+  <div :class="'foo foo ' + 'bar'"></div>
 </template>
 ```
 
diff --git a/lib/rules/no-duplicate-class-names.js b/lib/rules/no-duplicate-class-names.js
index b541e62e0..22f894399 100644
--- a/lib/rules/no-duplicate-class-names.js
+++ b/lib/rules/no-duplicate-class-names.js
@@ -57,7 +57,79 @@ function* extractDuplicateNode(node, expression) {
       }
       break
     }
+    case 'BinaryExpression': {
+      if (nodeExpression.operator === '+') {
+        yield* extractDuplicateNode(node, nodeExpression.left)
+        yield* extractDuplicateNode(node, nodeExpression.right)
+      }
+      break
+    }
+  }
+}
+
+/**
+ * @param {string} raw - raw class names string including quotes
+ * @returns {string}
+ */
+function dedupePreserveSpaces(raw) {
+  const inner = raw.slice(1, -1)
+  const tokens = inner.split(/(\s+)/)
+
+  /** @type {string[]} */
+  const kept = []
+  const used = new Set()
+
+  for (let i = 0; i < tokens.length; i++) {
+    const token = tokens[i]
+    if (!token) continue
+
+    const isWhitespace = /^\s+$/.test(token)
+
+    if (isWhitespace) {
+      // add whitespace to the last kept item or as leading whitespace
+      if (kept.length > 0) {
+        kept[kept.length - 1] += token
+      } else {
+        kept.push(token)
+      }
+    } else if (used.has(token)) {
+      // handle duplicate class name
+      const nextToken = tokens[i + 1]
+      const hasNextWhitespace =
+        kept.length > 0 && i + 1 < tokens.length && /^\s+$/.test(nextToken)
+
+      if (hasNextWhitespace) {
+        // update spaces of the last non-whitespace item
+        for (let j = kept.length - 1; j >= 0; j--) {
+          const isNotWhitespace = !/^\s+$/.test(kept[j])
+          if (isNotWhitespace) {
+            const parts = kept[j].split(/(\s+)/)
+            kept[j] = parts[0] + nextToken
+            break
+          }
+        }
+        i++ // skip the whitespace token
+      }
+    } else {
+      kept.push(token)
+      used.add(token)
+    }
   }
+
+  // remove trailing whitespace from the last item if it's not purely whitespace
+  // unless the original string ended with whitespace
+  const endsWithSpace = /\s$/.test(inner)
+  if (kept.length > 0 && !endsWithSpace) {
+    const lastItem = kept[kept.length - 1]
+    const isLastWhitespace = /^\s+$/.test(lastItem)
+    if (!isLastWhitespace) {
+      const parts = lastItem.split(/(\s+)/)
+      kept[kept.length - 1] = parts[0]
+    }
+  }
+
+  const quote = raw[0]
+  return quote + kept.join('') + quote
 }
 
 module.exports = {
@@ -113,11 +185,9 @@ module.exports = {
         messageId: 'duplicateClassName',
         data: { name: duplicates.join(', ') },
         fix: (fixer) => {
-          const unique = [...seen].join(' ')
           const sourceCode = context.getSourceCode()
           const raw = sourceCode.text.slice(node.range[0], node.range[1])
-          const quote = raw[0]
-          return fixer.replaceText(node, `${quote}${unique}${quote}`)
+          return fixer.replaceText(node, dedupePreserveSpaces(raw))
         }
       })
     }
diff --git a/tests/lib/rules/no-duplicate-class-names.js b/tests/lib/rules/no-duplicate-class-names.js
index 2b202bfcc..ac27062e4 100644
--- a/tests/lib/rules/no-duplicate-class-names.js
+++ b/tests/lib/rules/no-duplicate-class-names.js
@@ -184,6 +184,50 @@ tester.run('no-duplicate-class-names', rule, {
           type: 'Literal'
         }
       ]
+    },
+    {
+      filename: 'duplicate-class-binary-expression.vue',
+      code: `<template><div :class="'foo foo ' + ' bar'"></div></template>`,
+      output: `<template><div :class="'foo ' + ' bar'"></div></template>`,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          type: 'Literal'
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-preserved-spaces-1.vue',
+      code: `<template><div class="foo foo     bar"></div></template>`,
+      output: `<template><div class="foo     bar"></div></template>`,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          type: 'VLiteral'
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-preserved-spaces-2.vue',
+      code: `<template><div class="foo bar    baz foo"></div></template>`,
+      output: `<template><div class="foo bar    baz"></div></template>`,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          type: 'VLiteral'
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-preserved-spaces-3.vue',
+      code: `<template><div class="foo bar foo     baz"></div></template>`,
+      output: `<template><div class="foo bar     baz"></div></template>`,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          type: 'VLiteral'
+        }
+      ]
     }
   ]
 })

From f0c52c000cde43e2634b6ca9b21a69778681fb40 Mon Sep 17 00:00:00 2001
From: Yizack Rangel <yizackr@gmail.com>
Date: Wed, 10 Sep 2025 17:00:34 +0200
Subject: [PATCH 09/23] refactor: rename functions and improve code

---
 lib/rules/no-duplicate-class-names.js | 38 ++++++++++++---------------
 1 file changed, 17 insertions(+), 21 deletions(-)

diff --git a/lib/rules/no-duplicate-class-names.js b/lib/rules/no-duplicate-class-names.js
index 22f894399..4b969bb9e 100644
--- a/lib/rules/no-duplicate-class-names.js
+++ b/lib/rules/no-duplicate-class-names.js
@@ -12,7 +12,7 @@ const utils = require('../utils')
  * @param {Expression} [expression]
  * @return {IterableIterator<{ node: Literal | TemplateElement }>}
  */
-function* extractDuplicateNode(node, expression) {
+function* extractClassNodes(node, expression) {
   const nodeExpression = expression ?? node.value?.expression
   if (!nodeExpression) return
 
@@ -25,8 +25,7 @@ function* extractDuplicateNode(node, expression) {
       for (const prop of nodeExpression.properties) {
         if (
           prop.type === 'Property' &&
-          prop.key &&
-          prop.key.type === 'Literal' &&
+          prop.key?.type === 'Literal' &&
           typeof prop.key.value === 'string' &&
           prop.key.value.includes(' ')
         ) {
@@ -39,13 +38,13 @@ function* extractDuplicateNode(node, expression) {
       for (const element of nodeExpression.elements) {
         if (!element || element.type === 'SpreadElement') continue
 
-        yield* extractDuplicateNode(node, element)
+        yield* extractClassNodes(node, element)
       }
       break
     }
     case 'ConditionalExpression': {
-      yield* extractDuplicateNode(node, nodeExpression.consequent)
-      yield* extractDuplicateNode(node, nodeExpression.alternate)
+      yield* extractClassNodes(node, nodeExpression.consequent)
+      yield* extractClassNodes(node, nodeExpression.alternate)
       break
     }
     case 'TemplateLiteral': {
@@ -53,14 +52,14 @@ function* extractDuplicateNode(node, expression) {
         yield { node: quasi }
       }
       for (const expr of nodeExpression.expressions) {
-        yield* extractDuplicateNode(node, expr)
+        yield* extractClassNodes(node, expr)
       }
       break
     }
     case 'BinaryExpression': {
       if (nodeExpression.operator === '+') {
-        yield* extractDuplicateNode(node, nodeExpression.left)
-        yield* extractDuplicateNode(node, nodeExpression.right)
+        yield* extractClassNodes(node, nodeExpression.left)
+        yield* extractClassNodes(node, nodeExpression.right)
       }
       break
     }
@@ -71,7 +70,8 @@ function* extractDuplicateNode(node, expression) {
  * @param {string} raw - raw class names string including quotes
  * @returns {string}
  */
-function dedupePreserveSpaces(raw) {
+function removeDuplicateClassNames(raw) {
+  const quote = raw[0]
   const inner = raw.slice(1, -1)
   const tokens = inner.split(/(\s+)/)
 
@@ -128,7 +128,6 @@ function dedupePreserveSpaces(raw) {
     }
   }
 
-  const quote = raw[0]
   return quote + kept.join('') + quote
 }
 
@@ -152,7 +151,7 @@ module.exports = {
      * @param {VLiteral | Literal | TemplateElement | null} node
      */
     function reportDuplicateClasses(node) {
-      if (!node || !node.value) return
+      if (!node?.value) return
 
       const classList =
         typeof node.value === 'object' && 'raw' in node.value
@@ -165,29 +164,26 @@ module.exports = {
       if (classNames.length <= 1) return
 
       const seen = new Set()
-      /** @type {string[]} */
-      const duplicates = []
+      const duplicates = new Set()
 
       for (const className of classNames) {
         if (seen.has(className)) {
-          if (!duplicates.includes(className)) {
-            duplicates.push(className)
-          }
+          duplicates.add(className)
         } else {
           seen.add(className)
         }
       }
 
-      if (duplicates.length === 0) return
+      if (duplicates.size === 0) return
 
       context.report({
         node,
         messageId: 'duplicateClassName',
-        data: { name: duplicates.join(', ') },
+        data: { name: [...duplicates].join(', ') },
         fix: (fixer) => {
           const sourceCode = context.getSourceCode()
           const raw = sourceCode.text.slice(node.range[0], node.range[1])
-          return fixer.replaceText(node, dedupePreserveSpaces(raw))
+          return fixer.replaceText(node, removeDuplicateClassNames(raw))
         }
       })
     }
@@ -203,7 +199,7 @@ module.exports = {
       "VAttribute[directive=true][key.argument.name='class'][value.type='VExpressionContainer']"(
         node
       ) {
-        for (const { node: reportNode } of extractDuplicateNode(node)) {
+        for (const { node: reportNode } of extractClassNodes(node)) {
           reportDuplicateClasses(reportNode)
         }
       }

From 7b641c0a0fb376110ffa3336a8c803377b324968 Mon Sep 17 00:00:00 2001
From: Yizack Rangel <yizackr@gmail.com>
Date: Thu, 18 Sep 2025 14:12:52 +0200
Subject: [PATCH 10/23] fix: report cross attribute duplicates

related to #2932 discussion
---
 docs/rules/no-duplicate-class-names.md      |  1 +
 lib/rules/no-duplicate-class-names.js       | 56 ++++++++++++++++-
 tests/lib/rules/no-duplicate-class-names.js | 67 +++++++++++++++++----
 3 files changed, 109 insertions(+), 15 deletions(-)

diff --git a/docs/rules/no-duplicate-class-names.md b/docs/rules/no-duplicate-class-names.md
index f3cc6ef27..49e221654 100644
--- a/docs/rules/no-duplicate-class-names.md
+++ b/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>
 ```
 
diff --git a/lib/rules/no-duplicate-class-names.js b/lib/rules/no-duplicate-class-names.js
index 4b969bb9e..79a443f0f 100644
--- a/lib/rules/no-duplicate-class-names.js
+++ b/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(', ') }
+              })
+            }
+          }
         }
       }
     })
diff --git a/tests/lib/rules/no-duplicate-class-names.js b/tests/lib/rules/no-duplicate-class-names.js
index ac27062e4..3293c04cc 100644
--- a/tests/lib/rules/no-duplicate-class-names.js
+++ b/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'
+        }
+      ]
     }
   ]
 })

From a375602b8ae43e45ebc96e9b37dabbc130f48b67 Mon Sep 17 00:00:00 2001
From: Yizack Rangel <yizackr@gmail.com>
Date: Thu, 18 Sep 2025 14:24:52 +0200
Subject: [PATCH 11/23] test: add more invalid test cases

---
 tests/lib/rules/no-duplicate-class-names.js | 33 +++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/tests/lib/rules/no-duplicate-class-names.js b/tests/lib/rules/no-duplicate-class-names.js
index 3293c04cc..22b3dc13a 100644
--- a/tests/lib/rules/no-duplicate-class-names.js
+++ b/tests/lib/rules/no-duplicate-class-names.js
@@ -271,6 +271,39 @@ tester.run('no-duplicate-class-names', rule, {
           type: 'VStartTag'
         }
       ]
+    },
+    {
+      filename: 'duplicate-class-different-attributes-mixed.vue',
+      code: `<template><div class="foo" :class="['foo', { 'bar': true }]"></div></template>`,
+      output: null,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          type: 'VStartTag'
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-different-attributes-binary.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-conditional.vue',
+      code: `<template><div class="foo" :class="isActive ? 'foo' : 'bar'"></div></template>`,
+      output: null,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          type: 'VStartTag'
+        }
+      ]
     }
   ]
 })

From 47b50650164aefabc13b7b8fbed55b3c7045ba3b Mon Sep 17 00:00:00 2001
From: Yizack Rangel <yizackr@gmail.com>
Date: Thu, 18 Sep 2025 14:31:49 +0200
Subject: [PATCH 12/23] test: rename cross-attribute tests + add literal test

---
 tests/lib/rules/no-duplicate-class-names.js | 27 +++++++++++++++------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/tests/lib/rules/no-duplicate-class-names.js b/tests/lib/rules/no-duplicate-class-names.js
index 22b3dc13a..6db6cb8bd 100644
--- a/tests/lib/rules/no-duplicate-class-names.js
+++ b/tests/lib/rules/no-duplicate-class-names.js
@@ -218,7 +218,7 @@ tester.run('no-duplicate-class-names', rule, {
       ]
     },
     {
-      filename: 'duplicate-class-in-different-attributes.vue',
+      filename: 'duplicate-class-cross-attribute-string.vue',
       code: `<template><div class="foo" :class="'foo'"></div></template>`,
       output: null,
       errors: [
@@ -229,7 +229,18 @@ tester.run('no-duplicate-class-names', rule, {
       ]
     },
     {
-      filename: 'duplicate-class-different-attributes.vue',
+      filename: 'duplicate-class-cross-attribute-literal.vue',
+      code: '<template><div class="foo" :class="`foo`"></div></template>',
+      output: null,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          type: 'VStartTag'
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-cross-attribute.vue',
       code: `<template><div class="foo" :class="'foo bar'"></div></template>`,
       output: null,
       errors: [
@@ -240,7 +251,7 @@ tester.run('no-duplicate-class-names', rule, {
       ]
     },
     {
-      filename: 'duplicate-class-different-attributes-multiple-duplicates.vue',
+      filename: 'duplicate-class-cross-attribute-multiple-duplicates.vue',
       code: `<template><div class="foo bar" :class="'foo bar'"></div></template>`,
       output: null,
       errors: [
@@ -251,7 +262,7 @@ tester.run('no-duplicate-class-names', rule, {
       ]
     },
     {
-      filename: 'duplicate-class-different-attributes-array.vue',
+      filename: 'duplicate-class-cross-attribute-array.vue',
       code: `<template><div class="foo" :class="['foo', 'bar']"></div></template>`,
       output: null,
       errors: [
@@ -262,7 +273,7 @@ tester.run('no-duplicate-class-names', rule, {
       ]
     },
     {
-      filename: 'duplicate-class-different-attributes-object.vue',
+      filename: 'duplicate-class-cross-attribute-object.vue',
       code: `<template><div class="foo" :class="{ 'foo': true }"></div></template>`,
       output: null,
       errors: [
@@ -273,7 +284,7 @@ tester.run('no-duplicate-class-names', rule, {
       ]
     },
     {
-      filename: 'duplicate-class-different-attributes-mixed.vue',
+      filename: 'duplicate-class-cross-attribute-mixed.vue',
       code: `<template><div class="foo" :class="['foo', { 'bar': true }]"></div></template>`,
       output: null,
       errors: [
@@ -284,7 +295,7 @@ tester.run('no-duplicate-class-names', rule, {
       ]
     },
     {
-      filename: 'duplicate-class-different-attributes-binary.vue',
+      filename: 'duplicate-class-cross-attribute-binary.vue',
       code: `<template><div class="foo" :class="'foo ' + 'bar'"></div></template>`,
       output: null,
       errors: [
@@ -295,7 +306,7 @@ tester.run('no-duplicate-class-names', rule, {
       ]
     },
     {
-      filename: 'duplicate-class-different-attributes-conditional.vue',
+      filename: 'duplicate-class-cross-attribute-conditional.vue',
       code: `<template><div class="foo" :class="isActive ? 'foo' : 'bar'"></div></template>`,
       output: null,
       errors: [

From c7dcaca4de96d42d3a5dedd4a36d2f1712c9d7ad Mon Sep 17 00:00:00 2001
From: Yizack Rangel <yizackr@gmail.com>
Date: Thu, 18 Sep 2025 16:20:42 +0200
Subject: [PATCH 13/23] fix: find duplicates within unconditional expression
 nodes + add comments

related to #2932 discussion
---
 docs/rules/no-duplicate-class-names.md      |   2 +
 lib/rules/no-duplicate-class-names.js       | 114 +++++++++++++-------
 tests/lib/rules/no-duplicate-class-names.js |  30 ++++++
 3 files changed, 109 insertions(+), 37 deletions(-)

diff --git a/docs/rules/no-duplicate-class-names.md b/docs/rules/no-duplicate-class-names.md
index 49e221654..e743b2461 100644
--- a/docs/rules/no-duplicate-class-names.md
+++ b/docs/rules/no-duplicate-class-names.md
@@ -39,6 +39,8 @@ This rule prevents the same class name from appearing multiple times within the
   <div :class="isActive ? 'foo foo' : 'bar'"></div>
   <div :class="'foo foo ' + 'bar'"></div>
   <div class="foo" :class="'foo'"></div>
+  <div :class="['foo', 'foo']"></div>
+  <div :class="'foo ' + 'foo'"></div>
 </template>
 ```
 
diff --git a/lib/rules/no-duplicate-class-names.js b/lib/rules/no-duplicate-class-names.js
index 79a443f0f..0da5033e4 100644
--- a/lib/rules/no-duplicate-class-names.js
+++ b/lib/rules/no-duplicate-class-names.js
@@ -10,15 +10,16 @@ const utils = require('../utils')
 /**
  * @param {VDirective} node
  * @param {Expression} [expression]
- * @return {IterableIterator<{ node: Literal | TemplateElement }>}
+ * @param {boolean} [unconditional=true] whether the expression is unconditional
+ * @return {IterableIterator<{ node: Literal | TemplateElement, unconditional: boolean }>}
  */
-function* extractClassNodes(node, expression) {
+function* extractClassNodes(node, expression, unconditional = true) {
   const nodeExpression = expression ?? node.value?.expression
   if (!nodeExpression) return
 
   switch (nodeExpression.type) {
     case 'Literal': {
-      yield { node: nodeExpression }
+      yield { node: nodeExpression, unconditional }
       break
     }
     case 'ObjectExpression': {
@@ -28,7 +29,7 @@ function* extractClassNodes(node, expression) {
           prop.key?.type === 'Literal' &&
           typeof prop.key.value === 'string'
         ) {
-          yield { node: prop.key }
+          yield { node: prop.key, unconditional: false }
         }
       }
       break
@@ -36,29 +37,28 @@ function* extractClassNodes(node, expression) {
     case 'ArrayExpression': {
       for (const element of nodeExpression.elements) {
         if (!element || element.type === 'SpreadElement') continue
-
-        yield* extractClassNodes(node, element)
+        yield* extractClassNodes(node, element, unconditional)
       }
       break
     }
     case 'ConditionalExpression': {
-      yield* extractClassNodes(node, nodeExpression.consequent)
-      yield* extractClassNodes(node, nodeExpression.alternate)
+      yield* extractClassNodes(node, nodeExpression.consequent, false)
+      yield* extractClassNodes(node, nodeExpression.alternate, false)
       break
     }
     case 'TemplateLiteral': {
       for (const quasi of nodeExpression.quasis) {
-        yield { node: quasi }
+        yield { node: quasi, unconditional }
       }
       for (const expr of nodeExpression.expressions) {
-        yield* extractClassNodes(node, expr)
+        yield* extractClassNodes(node, expr, unconditional)
       }
       break
     }
     case 'BinaryExpression': {
       if (nodeExpression.operator === '+') {
-        yield* extractClassNodes(node, nodeExpression.left)
-        yield* extractClassNodes(node, nodeExpression.right)
+        yield* extractClassNodes(node, nodeExpression.left, unconditional)
+        yield* extractClassNodes(node, nodeExpression.right, unconditional)
       }
       break
     }
@@ -138,6 +138,14 @@ function removeDuplicateClassNames(raw) {
   return quote + kept.join('') + quote
 }
 
+/** @param {VLiteral | Literal | TemplateElement | null} node */
+function getRawValue(node) {
+  if (!node?.value) return null
+  return typeof node.value === 'object' && 'raw' in node.value
+    ? node.value.raw
+    : node.value
+}
+
 module.exports = {
   meta: {
     type: 'suggestion',
@@ -160,11 +168,7 @@ module.exports = {
     function reportDuplicateClasses(node) {
       if (!node?.value) return
 
-      const classList =
-        typeof node.value === 'object' && 'raw' in node.value
-          ? node.value.raw
-          : node.value
-
+      const classList = getRawValue(node)
       if (typeof classList !== 'string') return
 
       const classNames = getClassNames(classList)
@@ -193,6 +197,8 @@ module.exports = {
           return fixer.replaceText(node, removeDuplicateClassNames(raw))
         }
       })
+
+      return duplicates
     }
 
     return utils.defineTemplateBodyVisitor(context, {
@@ -208,7 +214,6 @@ module.exports = {
       ) {
         const parent = node.parent
         const attrs = parent.attributes || []
-
         const staticAttr = attrs.find(
           (attr) =>
             attr.key &&
@@ -217,9 +222,9 @@ module.exports = {
             attr.value.type === 'VLiteral'
         )
 
+        // get static classes
         /** @type {Set<string> | null} */
         let staticClasses = null
-
         if (
           staticAttr &&
           staticAttr.value &&
@@ -228,30 +233,65 @@ module.exports = {
           staticClasses = new Set(getClassNames(String(staticAttr.value.value)))
         }
 
-        for (const { node: reportNode } of extractClassNodes(node)) {
-          reportDuplicateClasses(reportNode)
+        const reported = new Set()
+        const duplicatesInExpression = new Set()
+        /** @type {Map<string, ASTNode>} */
+        const seen = new Map()
 
-          if (staticClasses) {
-            const classList =
-              reportNode.value &&
-              typeof reportNode.value === 'object' &&
-              'raw' in reportNode.value
-                ? reportNode.value.raw
-                : reportNode.value
+        const classNodes = extractClassNodes(node)
+        for (const { node: reportNode, unconditional } of classNodes) {
+          // report fixable duplicates and collect reported class names
+          const reportedClasses = reportDuplicateClasses(reportNode)
+          if (reportedClasses) {
+            for (const classes of reportedClasses) reported.add(classes)
+          }
 
-            if (typeof classList !== 'string') continue
+          // collect duplicates within the expression nodes
+          if (unconditional) {
+            const classList = getRawValue(reportNode)
+            if (typeof classList === 'string') {
+              const classNames = getClassNames(classList)
+              for (const className of classNames) {
+                if (seen.has(className)) {
+                  duplicatesInExpression.add(className)
+                } else {
+                  seen.set(className, reportNode.parent)
+                }
+              }
+            }
+          }
 
-            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(', ') }
-              })
+          // report duplicates between static and dynamic class attributes
+          if (staticClasses) {
+            const classList = getRawValue(reportNode)
+            if (typeof classList === 'string') {
+              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(', ') }
+                })
+              }
             }
           }
         }
+
+        // report duplicates between dynamic class nodes excluding already reported
+        for (const r of reported) duplicatesInExpression.delete(r)
+        for (const className of duplicatesInExpression) {
+          const reportNode = seen.get(className)
+          if (reportNode) {
+            context.report({
+              node: reportNode,
+              messageId: 'duplicateClassName',
+              data: { name: className }
+            })
+          }
+        }
       }
     })
   }
diff --git a/tests/lib/rules/no-duplicate-class-names.js b/tests/lib/rules/no-duplicate-class-names.js
index 6db6cb8bd..323abe15f 100644
--- a/tests/lib/rules/no-duplicate-class-names.js
+++ b/tests/lib/rules/no-duplicate-class-names.js
@@ -48,6 +48,14 @@ tester.run('no-duplicate-class-names', rule, {
     {
       filename: 'class-conditional-expression.vue',
       code: `<template><div :class="isActive ? 'foo' : 'bar'"></div></template>`
+    },
+    {
+      filename: 'class-conditional-duplicate-expression-value.vue',
+      code: `<template><div :class="isActive ? 'foo' : 'foo'"></div></template>`
+    },
+    {
+      filename: 'class-object-duplicate-value.vue',
+      code: `<div :class="{ 'foo bar': isActive, 'foo': isAnotherActive }"></div>`
     }
   ],
   invalid: [
@@ -315,6 +323,28 @@ tester.run('no-duplicate-class-names', rule, {
           type: 'VStartTag'
         }
       ]
+    },
+    {
+      filename: 'duplicate-class-cross-node-array.vue',
+      code: `<template><div :class="['foo', 'foo']"></div></template>`,
+      output: null,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          type: 'ArrayExpression'
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-cross-node-binary.vue',
+      code: `<template><div :class="'foo ' + 'foo'"></div></template>`,
+      output: null,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          type: 'BinaryExpression'
+        }
+      ]
     }
   ]
 })

From d97f4d9cf0119253a735011c1490e5c1ac9f019a Mon Sep 17 00:00:00 2001
From: Yizack Rangel <yizackr@gmail.com>
Date: Thu, 18 Sep 2025 19:13:08 +0200
Subject: [PATCH 14/23] fix: mixed cross node case

---
 lib/rules/no-duplicate-class-names.js       | 72 +++++++++++++--------
 tests/lib/rules/no-duplicate-class-names.js | 11 ++++
 2 files changed, 55 insertions(+), 28 deletions(-)

diff --git a/lib/rules/no-duplicate-class-names.js b/lib/rules/no-duplicate-class-names.js
index 0da5033e4..9de76d136 100644
--- a/lib/rules/no-duplicate-class-names.js
+++ b/lib/rules/no-duplicate-class-names.js
@@ -233,11 +233,18 @@ module.exports = {
           staticClasses = new Set(getClassNames(String(staticAttr.value.value)))
         }
 
+        /** @type {Set<string>} */
         const reported = new Set()
+
+        /** @type {Set<string>} */
         const duplicatesInExpression = new Set()
+
         /** @type {Map<string, ASTNode>} */
         const seen = new Map()
 
+        /** @type {Map<string, {node: ASTNode, unconditional: boolean}>} */
+        const collected = new Map()
+
         const classNodes = extractClassNodes(node)
         for (const { node: reportNode, unconditional } of classNodes) {
           // report fixable duplicates and collect reported class names
@@ -246,44 +253,53 @@ module.exports = {
             for (const classes of reportedClasses) reported.add(classes)
           }
 
-          // collect duplicates within the expression nodes
-          if (unconditional) {
-            const classList = getRawValue(reportNode)
-            if (typeof classList === 'string') {
-              const classNames = getClassNames(classList)
-              for (const className of classNames) {
-                if (seen.has(className)) {
-                  duplicatesInExpression.add(className)
-                } else {
-                  seen.set(className, reportNode.parent)
-                }
+          // collect all class names and check for cross nodes duplicates
+          const classList = getRawValue(reportNode)
+          if (typeof classList !== 'string') continue
+          const classNames = getClassNames(classList)
+
+          for (const className of classNames) {
+            // skip if already reported by reportDuplicateClasses
+            if (reported.has(className)) continue
+            const existing = collected.get(className)
+            if (existing) {
+              // only add duplicate if at least one is unconditional
+              if (existing.unconditional || unconditional) {
+                duplicatesInExpression.add(className)
+              }
+            } else {
+              collected.set(className, {
+                node: reportNode.parent,
+                unconditional
+              })
+            }
+            // track unconditional duplicates separately for reporting
+            if (unconditional) {
+              if (seen.has(className)) {
+                duplicatesInExpression.add(className)
+              } else {
+                seen.set(className, reportNode.parent)
               }
             }
           }
 
-          // report duplicates between static and dynamic class attributes
+          // report cross attribute duplicates
           if (staticClasses) {
-            const classList = getRawValue(reportNode)
-            if (typeof classList === 'string') {
-              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(', ') }
-                })
-              }
+            const intersection = classNames.filter((n) => staticClasses.has(n))
+            if (intersection.length > 0 && parent) {
+              context.report({
+                node: parent,
+                messageId: 'duplicateClassName',
+                data: { name: intersection.join(', ') }
+              })
             }
           }
         }
 
-        // report duplicates between dynamic class nodes excluding already reported
-        for (const r of reported) duplicatesInExpression.delete(r)
+        // report cross node duplicates
         for (const className of duplicatesInExpression) {
-          const reportNode = seen.get(className)
+          const reportNode =
+            seen.get(className) || collected.get(className)?.node
           if (reportNode) {
             context.report({
               node: reportNode,
diff --git a/tests/lib/rules/no-duplicate-class-names.js b/tests/lib/rules/no-duplicate-class-names.js
index 323abe15f..03491a55f 100644
--- a/tests/lib/rules/no-duplicate-class-names.js
+++ b/tests/lib/rules/no-duplicate-class-names.js
@@ -345,6 +345,17 @@ tester.run('no-duplicate-class-names', rule, {
           type: 'BinaryExpression'
         }
       ]
+    },
+    {
+      filename: 'duplicate-class-cross-node-mixed.vue',
+      code: `<template><div :class="['foo', { 'foo': true }]"></div></template>`,
+      output: null,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          type: 'ArrayExpression'
+        }
+      ]
     }
   ]
 })

From a46ec4d9960c223763a41598130b24be96fc1fc7 Mon Sep 17 00:00:00 2001
From: Yizack Rangel <yizackr@gmail.com>
Date: Thu, 18 Sep 2025 19:14:11 +0200
Subject: [PATCH 15/23] docs: add on more bad and use isActive

---
 docs/rules/no-duplicate-class-names.md | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/docs/rules/no-duplicate-class-names.md b/docs/rules/no-duplicate-class-names.md
index e743b2461..4c9f5e2e4 100644
--- a/docs/rules/no-duplicate-class-names.md
+++ b/docs/rules/no-duplicate-class-names.md
@@ -23,7 +23,7 @@ This rule prevents the same class name from appearing multiple times within the
   <!-- ✓ GOOD -->
   <div class="foo bar"></div>
   <div :class="'foo bar'"></div>
-  <div :class="{ 'foo bar': true }"></div>
+  <div :class="{ 'foo bar': isActive }"></div>
   <div :class="['foo', 'bar']"></div>
   <div :class="isActive ? 'foo' : 'bar'"></div>
   <div :class="'foo ' + 'bar'"></div>
@@ -33,14 +33,15 @@ This rule prevents the same class name from appearing multiple times within the
   <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': isActive }"></div>
   <div :class="['foo foo']"></div>
-  <div :class="['foo foo', { 'bar bar baz': true }]"></div>
+  <div :class="['foo foo', { 'bar bar baz': isActive }]"></div>
   <div :class="isActive ? 'foo foo' : 'bar'"></div>
   <div :class="'foo foo ' + 'bar'"></div>
   <div class="foo" :class="'foo'"></div>
   <div :class="['foo', 'foo']"></div>
   <div :class="'foo ' + 'foo'"></div>
+  <div :class="['foo', { 'foo': isActive }]"></div>
 </template>
 ```
 

From 8e78e7590192aa5563f318bc42e6ed95a46ba3ea Mon Sep 17 00:00:00 2001
From: Yizack Rangel <yizackr@gmail.com>
Date: Wed, 15 Oct 2025 09:40:01 -0500
Subject: [PATCH 16/23] fix: improve error message

---
 lib/rules/no-duplicate-class-names.js       | 18 ++++---
 tests/lib/rules/no-duplicate-class-names.js | 58 ++++++++++-----------
 2 files changed, 40 insertions(+), 36 deletions(-)

diff --git a/lib/rules/no-duplicate-class-names.js b/lib/rules/no-duplicate-class-names.js
index 9de76d136..17c521836 100644
--- a/lib/rules/no-duplicate-class-names.js
+++ b/lib/rules/no-duplicate-class-names.js
@@ -157,7 +157,7 @@ module.exports = {
     fixable: 'code',
     schema: [],
     messages: {
-      duplicateClassName: "Duplicate class name '{{name}}'."
+      duplicateClassNames: 'Duplicate class names {{names}}.'
     }
   },
   /** @param {RuleContext} context */
@@ -189,8 +189,10 @@ module.exports = {
 
       context.report({
         node,
-        messageId: 'duplicateClassName',
-        data: { name: [...duplicates].join(', ') },
+        messageId: 'duplicateClassNames',
+        data: {
+          names: [...duplicates].map((name) => `'${name}'`).join(', ')
+        },
         fix: (fixer) => {
           const sourceCode = context.getSourceCode()
           const raw = sourceCode.text.slice(node.range[0], node.range[1])
@@ -289,8 +291,10 @@ module.exports = {
             if (intersection.length > 0 && parent) {
               context.report({
                 node: parent,
-                messageId: 'duplicateClassName',
-                data: { name: intersection.join(', ') }
+                messageId: 'duplicateClassNames',
+                data: {
+                  names: intersection.map((name) => `'${name}'`).join(', ')
+                }
               })
             }
           }
@@ -303,8 +307,8 @@ module.exports = {
           if (reportNode) {
             context.report({
               node: reportNode,
-              messageId: 'duplicateClassName',
-              data: { name: className }
+              messageId: 'duplicateClassNames',
+              data: { names: `'${className}'` }
             })
           }
         }
diff --git a/tests/lib/rules/no-duplicate-class-names.js b/tests/lib/rules/no-duplicate-class-names.js
index 03491a55f..16d5e4160 100644
--- a/tests/lib/rules/no-duplicate-class-names.js
+++ b/tests/lib/rules/no-duplicate-class-names.js
@@ -65,7 +65,7 @@ tester.run('no-duplicate-class-names', rule, {
       output: '<template><div class="foo"></div></template>',
       errors: [
         {
-          message: "Duplicate class name 'foo'.",
+          message: "Duplicate class names 'foo'.",
           type: 'VLiteral'
         }
       ]
@@ -76,7 +76,7 @@ tester.run('no-duplicate-class-names', rule, {
       output: '<template><div class="foo bar baz"></div></template>',
       errors: [
         {
-          message: "Duplicate class name 'foo, bar'.",
+          message: "Duplicate class names 'foo', 'bar'.",
           type: 'VLiteral'
         }
       ]
@@ -87,7 +87,7 @@ tester.run('no-duplicate-class-names', rule, {
       output: `<template><div :class="'foo'"></div></template>`,
       errors: [
         {
-          message: "Duplicate class name 'foo'.",
+          message: "Duplicate class names 'foo'.",
           type: 'Literal'
         }
       ]
@@ -98,7 +98,7 @@ tester.run('no-duplicate-class-names', rule, {
       output: '<template><div :class="`foo`"></div></template>',
       errors: [
         {
-          message: "Duplicate class name 'foo'.",
+          message: "Duplicate class names 'foo'.",
           type: 'TemplateElement'
         }
       ]
@@ -109,7 +109,7 @@ tester.run('no-duplicate-class-names', rule, {
       output: `<template><div :class="{ 'foo': true }"></div></template>`,
       errors: [
         {
-          message: "Duplicate class name 'foo'.",
+          message: "Duplicate class names 'foo'.",
           type: 'Literal'
         }
       ]
@@ -120,11 +120,11 @@ tester.run('no-duplicate-class-names', rule, {
       output: `<template><div :class="{ 'foo bar': true, 'bar baz': true }"></div></template>`,
       errors: [
         {
-          message: "Duplicate class name 'foo'.",
+          message: "Duplicate class names 'foo'.",
           type: 'Literal'
         },
         {
-          message: "Duplicate class name 'bar'.",
+          message: "Duplicate class names 'bar'.",
           type: 'Literal'
         }
       ]
@@ -135,7 +135,7 @@ tester.run('no-duplicate-class-names', rule, {
       output: `<template><div :class="['foo']"></div></template>`,
       errors: [
         {
-          message: "Duplicate class name 'foo'.",
+          message: "Duplicate class names 'foo'.",
           type: 'Literal'
         }
       ]
@@ -146,11 +146,11 @@ tester.run('no-duplicate-class-names', rule, {
       output: `<template><div :class="['foo', 'bar baz']"></div></template>`,
       errors: [
         {
-          message: "Duplicate class name 'foo'.",
+          message: "Duplicate class names 'foo'.",
           type: 'Literal'
         },
         {
-          message: "Duplicate class name 'bar'.",
+          message: "Duplicate class names 'bar'.",
           type: 'Literal'
         }
       ]
@@ -161,11 +161,11 @@ tester.run('no-duplicate-class-names', rule, {
       output: `<template><div :class="['foo', { 'bar baz': true }]"></div></template>`,
       errors: [
         {
-          message: "Duplicate class name 'foo'.",
+          message: "Duplicate class names 'foo'.",
           type: 'Literal'
         },
         {
-          message: "Duplicate class name 'bar'.",
+          message: "Duplicate class names 'bar'.",
           type: 'Literal'
         }
       ]
@@ -176,7 +176,7 @@ tester.run('no-duplicate-class-names', rule, {
       output: `<template><div :class="isActive ? 'foo' : 'bar'"></div></template>`,
       errors: [
         {
-          message: "Duplicate class name 'foo'.",
+          message: "Duplicate class names 'foo'.",
           type: 'Literal'
         }
       ]
@@ -187,7 +187,7 @@ tester.run('no-duplicate-class-names', rule, {
       output: `<template><div :class="'foo ' + ' bar'"></div></template>`,
       errors: [
         {
-          message: "Duplicate class name 'foo'.",
+          message: "Duplicate class names 'foo'.",
           type: 'Literal'
         }
       ]
@@ -198,7 +198,7 @@ tester.run('no-duplicate-class-names', rule, {
       output: `<template><div class="foo     bar"></div></template>`,
       errors: [
         {
-          message: "Duplicate class name 'foo'.",
+          message: "Duplicate class names 'foo'.",
           type: 'VLiteral'
         }
       ]
@@ -209,7 +209,7 @@ tester.run('no-duplicate-class-names', rule, {
       output: `<template><div class="foo bar    baz"></div></template>`,
       errors: [
         {
-          message: "Duplicate class name 'foo'.",
+          message: "Duplicate class names 'foo'.",
           type: 'VLiteral'
         }
       ]
@@ -220,7 +220,7 @@ tester.run('no-duplicate-class-names', rule, {
       output: `<template><div class="foo bar     baz"></div></template>`,
       errors: [
         {
-          message: "Duplicate class name 'foo'.",
+          message: "Duplicate class names 'foo'.",
           type: 'VLiteral'
         }
       ]
@@ -231,7 +231,7 @@ tester.run('no-duplicate-class-names', rule, {
       output: null,
       errors: [
         {
-          message: "Duplicate class name 'foo'.",
+          message: "Duplicate class names 'foo'.",
           type: 'VStartTag'
         }
       ]
@@ -242,7 +242,7 @@ tester.run('no-duplicate-class-names', rule, {
       output: null,
       errors: [
         {
-          message: "Duplicate class name 'foo'.",
+          message: "Duplicate class names 'foo'.",
           type: 'VStartTag'
         }
       ]
@@ -253,7 +253,7 @@ tester.run('no-duplicate-class-names', rule, {
       output: null,
       errors: [
         {
-          message: "Duplicate class name 'foo'.",
+          message: "Duplicate class names 'foo'.",
           type: 'VStartTag'
         }
       ]
@@ -264,7 +264,7 @@ tester.run('no-duplicate-class-names', rule, {
       output: null,
       errors: [
         {
-          message: "Duplicate class name 'foo, bar'.",
+          message: "Duplicate class names 'foo', 'bar'.",
           type: 'VStartTag'
         }
       ]
@@ -275,7 +275,7 @@ tester.run('no-duplicate-class-names', rule, {
       output: null,
       errors: [
         {
-          message: "Duplicate class name 'foo'.",
+          message: "Duplicate class names 'foo'.",
           type: 'VStartTag'
         }
       ]
@@ -286,7 +286,7 @@ tester.run('no-duplicate-class-names', rule, {
       output: null,
       errors: [
         {
-          message: "Duplicate class name 'foo'.",
+          message: "Duplicate class names 'foo'.",
           type: 'VStartTag'
         }
       ]
@@ -297,7 +297,7 @@ tester.run('no-duplicate-class-names', rule, {
       output: null,
       errors: [
         {
-          message: "Duplicate class name 'foo'.",
+          message: "Duplicate class names 'foo'.",
           type: 'VStartTag'
         }
       ]
@@ -308,7 +308,7 @@ tester.run('no-duplicate-class-names', rule, {
       output: null,
       errors: [
         {
-          message: "Duplicate class name 'foo'.",
+          message: "Duplicate class names 'foo'.",
           type: 'VStartTag'
         }
       ]
@@ -319,7 +319,7 @@ tester.run('no-duplicate-class-names', rule, {
       output: null,
       errors: [
         {
-          message: "Duplicate class name 'foo'.",
+          message: "Duplicate class names 'foo'.",
           type: 'VStartTag'
         }
       ]
@@ -330,7 +330,7 @@ tester.run('no-duplicate-class-names', rule, {
       output: null,
       errors: [
         {
-          message: "Duplicate class name 'foo'.",
+          message: "Duplicate class names 'foo'.",
           type: 'ArrayExpression'
         }
       ]
@@ -341,7 +341,7 @@ tester.run('no-duplicate-class-names', rule, {
       output: null,
       errors: [
         {
-          message: "Duplicate class name 'foo'.",
+          message: "Duplicate class names 'foo'.",
           type: 'BinaryExpression'
         }
       ]
@@ -352,7 +352,7 @@ tester.run('no-duplicate-class-names', rule, {
       output: null,
       errors: [
         {
-          message: "Duplicate class name 'foo'.",
+          message: "Duplicate class names 'foo'.",
           type: 'ArrayExpression'
         }
       ]

From a569c8267a3ff8f55598f17d40f0faedcfe14dad Mon Sep 17 00:00:00 2001
From: Yizack Rangel <yizackr@gmail.com>
Date: Wed, 15 Oct 2025 09:46:49 -0500
Subject: [PATCH 17/23] refactor: refactor variable name

---
 lib/rules/no-duplicate-class-names.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/lib/rules/no-duplicate-class-names.js b/lib/rules/no-duplicate-class-names.js
index 17c521836..c36027c0d 100644
--- a/lib/rules/no-duplicate-class-names.js
+++ b/lib/rules/no-duplicate-class-names.js
@@ -252,7 +252,8 @@ module.exports = {
           // report fixable duplicates and collect reported class names
           const reportedClasses = reportDuplicateClasses(reportNode)
           if (reportedClasses) {
-            for (const classes of reportedClasses) reported.add(classes)
+            for (const reportedClass of reportedClasses)
+              reported.add(reportedClass)
           }
 
           // collect all class names and check for cross nodes duplicates

From 142bd0b8df2789d0135194681d49d90a9b882be3 Mon Sep 17 00:00:00 2001
From: Yizack Rangel <yizackr@gmail.com>
Date: Wed, 15 Oct 2025 09:47:30 -0500
Subject: [PATCH 18/23] docs: pick a more common example for the last "good"
 example

---
 docs/rules/no-duplicate-class-names.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/rules/no-duplicate-class-names.md b/docs/rules/no-duplicate-class-names.md
index 4c9f5e2e4..ab0161f06 100644
--- a/docs/rules/no-duplicate-class-names.md
+++ b/docs/rules/no-duplicate-class-names.md
@@ -26,7 +26,7 @@ This rule prevents the same class name from appearing multiple times within the
   <div :class="{ 'foo bar': isActive }"></div>
   <div :class="['foo', 'bar']"></div>
   <div :class="isActive ? 'foo' : 'bar'"></div>
-  <div :class="'foo ' + 'bar'"></div>
+  <div class="foo" :class="{ bar: isActive }"></div>
   
   <!-- ✗ BAD -->
   <div class="foo foo"></div>

From 9fec4c9c648087e9be5e842880d58ae7a153a361 Mon Sep 17 00:00:00 2001
From: Yizack Rangel <yizackr@gmail.com>
Date: Wed, 15 Oct 2025 09:58:24 -0500
Subject: [PATCH 19/23] test: add `line`, `column`, `endLine` and `endColumn`

---
 tests/lib/rules/no-duplicate-class-names.js | 174 ++++++++++++++++----
 1 file changed, 145 insertions(+), 29 deletions(-)

diff --git a/tests/lib/rules/no-duplicate-class-names.js b/tests/lib/rules/no-duplicate-class-names.js
index 16d5e4160..a2ee24e94 100644
--- a/tests/lib/rules/no-duplicate-class-names.js
+++ b/tests/lib/rules/no-duplicate-class-names.js
@@ -66,7 +66,11 @@ tester.run('no-duplicate-class-names', rule, {
       errors: [
         {
           message: "Duplicate class names 'foo'.",
-          type: 'VLiteral'
+          type: 'VLiteral',
+          line: 1,
+          column: 22,
+          endLine: 1,
+          endColumn: 31
         }
       ]
     },
@@ -77,7 +81,11 @@ tester.run('no-duplicate-class-names', rule, {
       errors: [
         {
           message: "Duplicate class names 'foo', 'bar'.",
-          type: 'VLiteral'
+          type: 'VLiteral',
+          line: 1,
+          column: 22,
+          endLine: 1,
+          endColumn: 43
         }
       ]
     },
@@ -88,7 +96,11 @@ tester.run('no-duplicate-class-names', rule, {
       errors: [
         {
           message: "Duplicate class names 'foo'.",
-          type: 'Literal'
+          type: 'Literal',
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 33
         }
       ]
     },
@@ -99,7 +111,11 @@ tester.run('no-duplicate-class-names', rule, {
       errors: [
         {
           message: "Duplicate class names 'foo'.",
-          type: 'TemplateElement'
+          type: 'TemplateElement',
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 33
         }
       ]
     },
@@ -110,7 +126,11 @@ tester.run('no-duplicate-class-names', rule, {
       errors: [
         {
           message: "Duplicate class names 'foo'.",
-          type: 'Literal'
+          type: 'Literal',
+          line: 1,
+          column: 26,
+          endLine: 1,
+          endColumn: 35
         }
       ]
     },
@@ -121,11 +141,19 @@ tester.run('no-duplicate-class-names', rule, {
       errors: [
         {
           message: "Duplicate class names 'foo'.",
-          type: 'Literal'
+          type: 'Literal',
+          line: 1,
+          column: 26,
+          endLine: 1,
+          endColumn: 39
         },
         {
           message: "Duplicate class names 'bar'.",
-          type: 'Literal'
+          type: 'Literal',
+          line: 1,
+          column: 47,
+          endLine: 1,
+          endColumn: 60
         }
       ]
     },
@@ -136,7 +164,11 @@ tester.run('no-duplicate-class-names', rule, {
       errors: [
         {
           message: "Duplicate class names 'foo'.",
-          type: 'Literal'
+          type: 'Literal',
+          line: 1,
+          column: 25,
+          endLine: 1,
+          endColumn: 34
         }
       ]
     },
@@ -147,11 +179,19 @@ tester.run('no-duplicate-class-names', rule, {
       errors: [
         {
           message: "Duplicate class names 'foo'.",
-          type: 'Literal'
+          type: 'Literal',
+          line: 1,
+          column: 25,
+          endLine: 1,
+          endColumn: 34
         },
         {
           message: "Duplicate class names 'bar'.",
-          type: 'Literal'
+          type: 'Literal',
+          line: 1,
+          column: 36,
+          endLine: 1,
+          endColumn: 49
         }
       ]
     },
@@ -162,11 +202,19 @@ tester.run('no-duplicate-class-names', rule, {
       errors: [
         {
           message: "Duplicate class names 'foo'.",
-          type: 'Literal'
+          type: 'Literal',
+          line: 1,
+          column: 25,
+          endLine: 1,
+          endColumn: 34
         },
         {
           message: "Duplicate class names 'bar'.",
-          type: 'Literal'
+          type: 'Literal',
+          line: 1,
+          column: 38,
+          endLine: 1,
+          endColumn: 51
         }
       ]
     },
@@ -177,7 +225,11 @@ tester.run('no-duplicate-class-names', rule, {
       errors: [
         {
           message: "Duplicate class names 'foo'.",
-          type: 'Literal'
+          type: 'Literal',
+          line: 1,
+          column: 35,
+          endLine: 1,
+          endColumn: 44
         }
       ]
     },
@@ -188,7 +240,11 @@ tester.run('no-duplicate-class-names', rule, {
       errors: [
         {
           message: "Duplicate class names 'foo'.",
-          type: 'Literal'
+          type: 'Literal',
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 34
         }
       ]
     },
@@ -199,7 +255,11 @@ tester.run('no-duplicate-class-names', rule, {
       errors: [
         {
           message: "Duplicate class names 'foo'.",
-          type: 'VLiteral'
+          type: 'VLiteral',
+          line: 1,
+          column: 22,
+          endLine: 1,
+          endColumn: 39
         }
       ]
     },
@@ -210,7 +270,11 @@ tester.run('no-duplicate-class-names', rule, {
       errors: [
         {
           message: "Duplicate class names 'foo'.",
-          type: 'VLiteral'
+          type: 'VLiteral',
+          line: 1,
+          column: 22,
+          endLine: 1,
+          endColumn: 42
         }
       ]
     },
@@ -221,7 +285,11 @@ tester.run('no-duplicate-class-names', rule, {
       errors: [
         {
           message: "Duplicate class names 'foo'.",
-          type: 'VLiteral'
+          type: 'VLiteral',
+          line: 1,
+          column: 22,
+          endLine: 1,
+          endColumn: 43
         }
       ]
     },
@@ -232,7 +300,11 @@ tester.run('no-duplicate-class-names', rule, {
       errors: [
         {
           message: "Duplicate class names 'foo'.",
-          type: 'VStartTag'
+          type: 'VStartTag',
+          line: 1,
+          column: 11,
+          endLine: 1,
+          endColumn: 43
         }
       ]
     },
@@ -243,7 +315,11 @@ tester.run('no-duplicate-class-names', rule, {
       errors: [
         {
           message: "Duplicate class names 'foo'.",
-          type: 'VStartTag'
+          type: 'VStartTag',
+          line: 1,
+          column: 11,
+          endLine: 1,
+          endColumn: 43
         }
       ]
     },
@@ -254,7 +330,11 @@ tester.run('no-duplicate-class-names', rule, {
       errors: [
         {
           message: "Duplicate class names 'foo'.",
-          type: 'VStartTag'
+          type: 'VStartTag',
+          line: 1,
+          column: 11,
+          endLine: 1,
+          endColumn: 47
         }
       ]
     },
@@ -265,7 +345,11 @@ tester.run('no-duplicate-class-names', rule, {
       errors: [
         {
           message: "Duplicate class names 'foo', 'bar'.",
-          type: 'VStartTag'
+          type: 'VStartTag',
+          line: 1,
+          column: 11,
+          endLine: 1,
+          endColumn: 51
         }
       ]
     },
@@ -276,7 +360,11 @@ tester.run('no-duplicate-class-names', rule, {
       errors: [
         {
           message: "Duplicate class names 'foo'.",
-          type: 'VStartTag'
+          type: 'VStartTag',
+          line: 1,
+          column: 11,
+          endLine: 1,
+          endColumn: 52
         }
       ]
     },
@@ -287,7 +375,11 @@ tester.run('no-duplicate-class-names', rule, {
       errors: [
         {
           message: "Duplicate class names 'foo'.",
-          type: 'VStartTag'
+          type: 'VStartTag',
+          line: 1,
+          column: 11,
+          endLine: 1,
+          endColumn: 53
         }
       ]
     },
@@ -298,7 +390,11 @@ tester.run('no-duplicate-class-names', rule, {
       errors: [
         {
           message: "Duplicate class names 'foo'.",
-          type: 'VStartTag'
+          type: 'VStartTag',
+          line: 1,
+          column: 11,
+          endLine: 1,
+          endColumn: 62
         }
       ]
     },
@@ -309,7 +405,11 @@ tester.run('no-duplicate-class-names', rule, {
       errors: [
         {
           message: "Duplicate class names 'foo'.",
-          type: 'VStartTag'
+          type: 'VStartTag',
+          line: 1,
+          column: 11,
+          endLine: 1,
+          endColumn: 52
         }
       ]
     },
@@ -320,7 +420,11 @@ tester.run('no-duplicate-class-names', rule, {
       errors: [
         {
           message: "Duplicate class names 'foo'.",
-          type: 'VStartTag'
+          type: 'VStartTag',
+          line: 1,
+          column: 11,
+          endLine: 1,
+          endColumn: 62
         }
       ]
     },
@@ -331,7 +435,11 @@ tester.run('no-duplicate-class-names', rule, {
       errors: [
         {
           message: "Duplicate class names 'foo'.",
-          type: 'ArrayExpression'
+          type: 'ArrayExpression',
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 38
         }
       ]
     },
@@ -342,7 +450,11 @@ tester.run('no-duplicate-class-names', rule, {
       errors: [
         {
           message: "Duplicate class names 'foo'.",
-          type: 'BinaryExpression'
+          type: 'BinaryExpression',
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 38
         }
       ]
     },
@@ -353,7 +465,11 @@ tester.run('no-duplicate-class-names', rule, {
       errors: [
         {
           message: "Duplicate class names 'foo'.",
-          type: 'ArrayExpression'
+          type: 'ArrayExpression',
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 48
         }
       ]
     }

From fde5af0be0bd8ce39148ec798b79671a89c32e5c Mon Sep 17 00:00:00 2001
From: Yizack Rangel <yizackr@gmail.com>
Date: Wed, 15 Oct 2025 10:21:25 -0500
Subject: [PATCH 20/23] test: adjust error message message

---
 lib/rules/no-duplicate-class-names.js       | 13 +++--
 tests/lib/rules/no-duplicate-class-names.js | 54 ++++++++++-----------
 2 files changed, 36 insertions(+), 31 deletions(-)

diff --git a/lib/rules/no-duplicate-class-names.js b/lib/rules/no-duplicate-class-names.js
index c36027c0d..fb726d215 100644
--- a/lib/rules/no-duplicate-class-names.js
+++ b/lib/rules/no-duplicate-class-names.js
@@ -157,7 +157,7 @@ module.exports = {
     fixable: 'code',
     schema: [],
     messages: {
-      duplicateClassNames: 'Duplicate class names {{names}}.'
+      duplicateClassNames: 'Duplicate class name{{plural}} {{names}}.'
     }
   },
   /** @param {RuleContext} context */
@@ -191,7 +191,8 @@ module.exports = {
         node,
         messageId: 'duplicateClassNames',
         data: {
-          names: [...duplicates].map((name) => `'${name}'`).join(', ')
+          names: [...duplicates].map((name) => `'${name}'`).join(', '),
+          plural: duplicates.size > 1 ? 's' : ''
         },
         fix: (fixer) => {
           const sourceCode = context.getSourceCode()
@@ -294,7 +295,8 @@ module.exports = {
                 node: parent,
                 messageId: 'duplicateClassNames',
                 data: {
-                  names: intersection.map((name) => `'${name}'`).join(', ')
+                  names: intersection.map((name) => `'${name}'`).join(', '),
+                  plural: intersection.length > 1 ? 's' : ''
                 }
               })
             }
@@ -309,7 +311,10 @@ module.exports = {
             context.report({
               node: reportNode,
               messageId: 'duplicateClassNames',
-              data: { names: `'${className}'` }
+              data: {
+                names: `'${className}'`,
+                plural: ''
+              }
             })
           }
         }
diff --git a/tests/lib/rules/no-duplicate-class-names.js b/tests/lib/rules/no-duplicate-class-names.js
index a2ee24e94..c8f209788 100644
--- a/tests/lib/rules/no-duplicate-class-names.js
+++ b/tests/lib/rules/no-duplicate-class-names.js
@@ -65,7 +65,7 @@ tester.run('no-duplicate-class-names', rule, {
       output: '<template><div class="foo"></div></template>',
       errors: [
         {
-          message: "Duplicate class names 'foo'.",
+          message: "Duplicate class name 'foo'.",
           type: 'VLiteral',
           line: 1,
           column: 22,
@@ -95,7 +95,7 @@ tester.run('no-duplicate-class-names', rule, {
       output: `<template><div :class="'foo'"></div></template>`,
       errors: [
         {
-          message: "Duplicate class names 'foo'.",
+          message: "Duplicate class name 'foo'.",
           type: 'Literal',
           line: 1,
           column: 24,
@@ -110,7 +110,7 @@ tester.run('no-duplicate-class-names', rule, {
       output: '<template><div :class="`foo`"></div></template>',
       errors: [
         {
-          message: "Duplicate class names 'foo'.",
+          message: "Duplicate class name 'foo'.",
           type: 'TemplateElement',
           line: 1,
           column: 24,
@@ -125,7 +125,7 @@ tester.run('no-duplicate-class-names', rule, {
       output: `<template><div :class="{ 'foo': true }"></div></template>`,
       errors: [
         {
-          message: "Duplicate class names 'foo'.",
+          message: "Duplicate class name 'foo'.",
           type: 'Literal',
           line: 1,
           column: 26,
@@ -140,7 +140,7 @@ tester.run('no-duplicate-class-names', rule, {
       output: `<template><div :class="{ 'foo bar': true, 'bar baz': true }"></div></template>`,
       errors: [
         {
-          message: "Duplicate class names 'foo'.",
+          message: "Duplicate class name 'foo'.",
           type: 'Literal',
           line: 1,
           column: 26,
@@ -148,7 +148,7 @@ tester.run('no-duplicate-class-names', rule, {
           endColumn: 39
         },
         {
-          message: "Duplicate class names 'bar'.",
+          message: "Duplicate class name 'bar'.",
           type: 'Literal',
           line: 1,
           column: 47,
@@ -163,7 +163,7 @@ tester.run('no-duplicate-class-names', rule, {
       output: `<template><div :class="['foo']"></div></template>`,
       errors: [
         {
-          message: "Duplicate class names 'foo'.",
+          message: "Duplicate class name 'foo'.",
           type: 'Literal',
           line: 1,
           column: 25,
@@ -178,7 +178,7 @@ tester.run('no-duplicate-class-names', rule, {
       output: `<template><div :class="['foo', 'bar baz']"></div></template>`,
       errors: [
         {
-          message: "Duplicate class names 'foo'.",
+          message: "Duplicate class name 'foo'.",
           type: 'Literal',
           line: 1,
           column: 25,
@@ -186,7 +186,7 @@ tester.run('no-duplicate-class-names', rule, {
           endColumn: 34
         },
         {
-          message: "Duplicate class names 'bar'.",
+          message: "Duplicate class name 'bar'.",
           type: 'Literal',
           line: 1,
           column: 36,
@@ -201,7 +201,7 @@ tester.run('no-duplicate-class-names', rule, {
       output: `<template><div :class="['foo', { 'bar baz': true }]"></div></template>`,
       errors: [
         {
-          message: "Duplicate class names 'foo'.",
+          message: "Duplicate class name 'foo'.",
           type: 'Literal',
           line: 1,
           column: 25,
@@ -209,7 +209,7 @@ tester.run('no-duplicate-class-names', rule, {
           endColumn: 34
         },
         {
-          message: "Duplicate class names 'bar'.",
+          message: "Duplicate class name 'bar'.",
           type: 'Literal',
           line: 1,
           column: 38,
@@ -224,7 +224,7 @@ tester.run('no-duplicate-class-names', rule, {
       output: `<template><div :class="isActive ? 'foo' : 'bar'"></div></template>`,
       errors: [
         {
-          message: "Duplicate class names 'foo'.",
+          message: "Duplicate class name 'foo'.",
           type: 'Literal',
           line: 1,
           column: 35,
@@ -239,7 +239,7 @@ tester.run('no-duplicate-class-names', rule, {
       output: `<template><div :class="'foo ' + ' bar'"></div></template>`,
       errors: [
         {
-          message: "Duplicate class names 'foo'.",
+          message: "Duplicate class name 'foo'.",
           type: 'Literal',
           line: 1,
           column: 24,
@@ -254,7 +254,7 @@ tester.run('no-duplicate-class-names', rule, {
       output: `<template><div class="foo     bar"></div></template>`,
       errors: [
         {
-          message: "Duplicate class names 'foo'.",
+          message: "Duplicate class name 'foo'.",
           type: 'VLiteral',
           line: 1,
           column: 22,
@@ -269,7 +269,7 @@ tester.run('no-duplicate-class-names', rule, {
       output: `<template><div class="foo bar    baz"></div></template>`,
       errors: [
         {
-          message: "Duplicate class names 'foo'.",
+          message: "Duplicate class name 'foo'.",
           type: 'VLiteral',
           line: 1,
           column: 22,
@@ -284,7 +284,7 @@ tester.run('no-duplicate-class-names', rule, {
       output: `<template><div class="foo bar     baz"></div></template>`,
       errors: [
         {
-          message: "Duplicate class names 'foo'.",
+          message: "Duplicate class name 'foo'.",
           type: 'VLiteral',
           line: 1,
           column: 22,
@@ -299,7 +299,7 @@ tester.run('no-duplicate-class-names', rule, {
       output: null,
       errors: [
         {
-          message: "Duplicate class names 'foo'.",
+          message: "Duplicate class name 'foo'.",
           type: 'VStartTag',
           line: 1,
           column: 11,
@@ -314,7 +314,7 @@ tester.run('no-duplicate-class-names', rule, {
       output: null,
       errors: [
         {
-          message: "Duplicate class names 'foo'.",
+          message: "Duplicate class name 'foo'.",
           type: 'VStartTag',
           line: 1,
           column: 11,
@@ -329,7 +329,7 @@ tester.run('no-duplicate-class-names', rule, {
       output: null,
       errors: [
         {
-          message: "Duplicate class names 'foo'.",
+          message: "Duplicate class name 'foo'.",
           type: 'VStartTag',
           line: 1,
           column: 11,
@@ -359,7 +359,7 @@ tester.run('no-duplicate-class-names', rule, {
       output: null,
       errors: [
         {
-          message: "Duplicate class names 'foo'.",
+          message: "Duplicate class name 'foo'.",
           type: 'VStartTag',
           line: 1,
           column: 11,
@@ -374,7 +374,7 @@ tester.run('no-duplicate-class-names', rule, {
       output: null,
       errors: [
         {
-          message: "Duplicate class names 'foo'.",
+          message: "Duplicate class name 'foo'.",
           type: 'VStartTag',
           line: 1,
           column: 11,
@@ -389,7 +389,7 @@ tester.run('no-duplicate-class-names', rule, {
       output: null,
       errors: [
         {
-          message: "Duplicate class names 'foo'.",
+          message: "Duplicate class name 'foo'.",
           type: 'VStartTag',
           line: 1,
           column: 11,
@@ -404,7 +404,7 @@ tester.run('no-duplicate-class-names', rule, {
       output: null,
       errors: [
         {
-          message: "Duplicate class names 'foo'.",
+          message: "Duplicate class name 'foo'.",
           type: 'VStartTag',
           line: 1,
           column: 11,
@@ -419,7 +419,7 @@ tester.run('no-duplicate-class-names', rule, {
       output: null,
       errors: [
         {
-          message: "Duplicate class names 'foo'.",
+          message: "Duplicate class name 'foo'.",
           type: 'VStartTag',
           line: 1,
           column: 11,
@@ -434,7 +434,7 @@ tester.run('no-duplicate-class-names', rule, {
       output: null,
       errors: [
         {
-          message: "Duplicate class names 'foo'.",
+          message: "Duplicate class name 'foo'.",
           type: 'ArrayExpression',
           line: 1,
           column: 24,
@@ -449,7 +449,7 @@ tester.run('no-duplicate-class-names', rule, {
       output: null,
       errors: [
         {
-          message: "Duplicate class names 'foo'.",
+          message: "Duplicate class name 'foo'.",
           type: 'BinaryExpression',
           line: 1,
           column: 24,
@@ -464,7 +464,7 @@ tester.run('no-duplicate-class-names', rule, {
       output: null,
       errors: [
         {
-          message: "Duplicate class names 'foo'.",
+          message: "Duplicate class name 'foo'.",
           type: 'ArrayExpression',
           line: 1,
           column: 24,

From 7cdcd5df6db8c90fb13d135371947b5ab5f33829 Mon Sep 17 00:00:00 2001
From: Yizack Rangel <yizackr@gmail.com>
Date: Fri, 17 Oct 2025 03:44:40 -0500
Subject: [PATCH 21/23] fix: handle `LogicalExpression`

---
 lib/rules/no-duplicate-class-names.js       |  5 ++
 tests/lib/rules/no-duplicate-class-names.js | 90 +++++++++++++++++++++
 2 files changed, 95 insertions(+)

diff --git a/lib/rules/no-duplicate-class-names.js b/lib/rules/no-duplicate-class-names.js
index fb726d215..1c8cbbe41 100644
--- a/lib/rules/no-duplicate-class-names.js
+++ b/lib/rules/no-duplicate-class-names.js
@@ -62,6 +62,11 @@ function* extractClassNodes(node, expression, unconditional = true) {
       }
       break
     }
+    case 'LogicalExpression': {
+      yield* extractClassNodes(node, nodeExpression.left, unconditional)
+      yield* extractClassNodes(node, nodeExpression.right, unconditional)
+      break
+    }
   }
 }
 
diff --git a/tests/lib/rules/no-duplicate-class-names.js b/tests/lib/rules/no-duplicate-class-names.js
index c8f209788..d03aebc02 100644
--- a/tests/lib/rules/no-duplicate-class-names.js
+++ b/tests/lib/rules/no-duplicate-class-names.js
@@ -472,6 +472,96 @@ tester.run('no-duplicate-class-names', rule, {
           endColumn: 48
         }
       ]
+    },
+    {
+      filename: 'duplicate-class-logical-expression-and.vue',
+      code: `<template><div :class="isActive && 'foo foo'"></div></template>`,
+      output: `<template><div :class="isActive && 'foo'"></div></template>`,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          type: 'Literal',
+          line: 1,
+          column: 36,
+          endLine: 1,
+          endColumn: 45
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-logical-expression-or.vue',
+      code: `<template><div :class="isActive || 'foo foo'"></div></template>`,
+      output: `<template><div :class="isActive || 'foo'"></div></template>`,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          type: 'Literal',
+          line: 1,
+          column: 36,
+          endLine: 1,
+          endColumn: 45
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-logical-expression-nullish-coalescing.vue',
+      code: `<template><div :class="isActive ?? 'foo foo'"></div></template>`,
+      output: `<template><div :class="isActive ?? 'foo'"></div></template>`,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          type: 'Literal',
+          line: 1,
+          column: 36,
+          endLine: 1,
+          endColumn: 45
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-nested-logical-expression.vue',
+      code: `<template><div :class="isActive ?? isAnotherActive ?? 'foo foo'"></div></template>`,
+      output: `<template><div :class="isActive ?? isAnotherActive ?? 'foo'"></div></template>`,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          type: 'Literal',
+          line: 1,
+          column: 55,
+          endLine: 1,
+          endColumn: 64
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-logical-expression-in-array.vue',
+      code: `<template><div :class="['foo', isActive ?? 'foo']"></div></template>`,
+      output: null,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          type: 'ArrayExpression',
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 50
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-logical-expression-in-conditional.vue',
+      code: `<template><div :class="isActive ? 'foo foo' : 'bar'"></div></template>`,
+      output: `<template><div :class="isActive ? 'foo' : 'bar'"></div></template>`,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          type: 'Literal',
+          line: 1,
+          column: 35,
+          endLine: 1,
+          endColumn: 44
+        }
+      ]
     }
   ]
 })

From 4bb29a165b305d4ea04ece755b5fd9efdd287e47 Mon Sep 17 00:00:00 2001
From: Yizack Rangel <yizackr@gmail.com>
Date: Fri, 17 Oct 2025 03:50:26 -0500
Subject: [PATCH 22/23] test: fix
 duplicate-class-logical-expression-in-conditional

---
 tests/lib/rules/no-duplicate-class-names.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/tests/lib/rules/no-duplicate-class-names.js b/tests/lib/rules/no-duplicate-class-names.js
index d03aebc02..014307680 100644
--- a/tests/lib/rules/no-duplicate-class-names.js
+++ b/tests/lib/rules/no-duplicate-class-names.js
@@ -550,16 +550,16 @@ tester.run('no-duplicate-class-names', rule, {
     },
     {
       filename: 'duplicate-class-logical-expression-in-conditional.vue',
-      code: `<template><div :class="isActive ? 'foo foo' : 'bar'"></div></template>`,
-      output: `<template><div :class="isActive ? 'foo' : 'bar'"></div></template>`,
+      code: `<template><div :class="isAnotherActive ? isActive ?? 'foo foo' : 'bar'"></div></template>`,
+      output: `<template><div :class="isAnotherActive ? isActive ?? 'foo' : 'bar'"></div></template>`,
       errors: [
         {
           message: "Duplicate class name 'foo'.",
           type: 'Literal',
           line: 1,
-          column: 35,
+          column: 54,
           endLine: 1,
-          endColumn: 44
+          endColumn: 63
         }
       ]
     }

From d98ca006637259359ae3d5733438043a3744363e Mon Sep 17 00:00:00 2001
From: Yizack Rangel <yizackr@gmail.com>
Date: Fri, 17 Oct 2025 03:56:31 -0500
Subject: [PATCH 23/23] test: test actual logical expression duplicate in array

---
 tests/lib/rules/no-duplicate-class-names.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/tests/lib/rules/no-duplicate-class-names.js b/tests/lib/rules/no-duplicate-class-names.js
index 014307680..2384350cc 100644
--- a/tests/lib/rules/no-duplicate-class-names.js
+++ b/tests/lib/rules/no-duplicate-class-names.js
@@ -535,16 +535,16 @@ tester.run('no-duplicate-class-names', rule, {
     },
     {
       filename: 'duplicate-class-logical-expression-in-array.vue',
-      code: `<template><div :class="['foo', isActive ?? 'foo']"></div></template>`,
-      output: null,
+      code: `<template><div :class="['foo', isActive ?? 'bar bar']"></div></template>`,
+      output: `<template><div :class="['foo', isActive ?? 'bar']"></div></template>`,
       errors: [
         {
-          message: "Duplicate class name 'foo'.",
-          type: 'ArrayExpression',
+          message: "Duplicate class name 'bar'.",
+          type: 'Literal',
           line: 1,
-          column: 24,
+          column: 44,
           endLine: 1,
-          endColumn: 50
+          endColumn: 53
         }
       ]
     },