feat: support BinaryExpression + preserve spaces

Author: Yizack

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>
 ```
 

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))
         }
       })
     }

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'
+        }
+      ]
     }
   ]
 })