feat: report conditional expression

Author: Yizack

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

@@ -25,15 +25,16 @@ 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>
   <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>
+  <div :class="isActive ? 'foo foo' : 'bar'"></div>
 </template>
 ```
 

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

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