Fix custom classnames rule with VueJS objects within list. (#359)

* fix: no-custom-classname rule with VueJS objects within list. * test: adding tests for other props * chore: remove custom npm script
francoismassart · Oct 9, 2024 · 99332c1 · 99332c1
1 parent c05d17c
commit 99332c1
Show file tree

Hide file tree

Showing 2 changed files with 95 additions and 4 deletions.
diff --git a/lib/util/ast.js b/lib/util/ast.js
@@ -121,7 +121,6 @@ function isVueValidAttributeValue(node) {
     case isArrayExpression(node): // ['tw-unknown-class']
     case isObjectExpression(node): // {'tw-unknown-class': true}
       return true;
-      break;
     default:
       return false;
   }
@@ -218,10 +217,8 @@ function extractValueFromNode(node) {
       switch (node.value.expression.type) {
         case 'ArrayExpression':
           return node.value.expression.elements;
-          break;
         case 'ObjectExpression':
           return node.value.expression.properties;
-          break;
       }
       return node.value.expression.value;
     default:
@@ -302,7 +299,7 @@ function parseNodeRecursive(rootNode, childNode, cb, skipConditional = false, is
         return;
       case 'ObjectExpression':
         childNode.properties.forEach((prop) => {
-          const isUsedByClassNamesPlugin = rootNode.callee && rootNode.callee.name === 'classnames';
+          const isUsedByClassNamesPlugin = (rootNode.callee && rootNode.callee.name === 'classnames') || rootNode.type === 'VAttribute';
 
           if (prop.type === 'SpreadElement') {
             // Ignore spread elements

diff --git a/tests/lib/rules/no-custom-classname.js b/tests/lib/rules/no-custom-classname.js
@@ -1089,6 +1089,41 @@ ruleTester.run("no-custom-classname", rule, {
       filename: "test.vue",
       parser: require.resolve("vue-eslint-parser"),
     },
+    {
+      code: `<template><div :class="[{'text-red-500': true, 'bg-transparent': false}]">Issue #319</div></template>`,
+      filename: "test.vue",
+      parser: require.resolve("vue-eslint-parser"),
+    },
+    {
+      code: `<template><div :class="['hidden',{'text-red-500': true, 'bg-transparent': false}, 'text-red-200']">Issue #319</div></template>`,
+      filename: "test.vue",
+      parser: require.resolve("vue-eslint-parser"),
+    },
+    {
+      code: `<template><div :class="[{'text-red-500': true}, 'bg-white']" :prop="['baz', true, 'foo']" :other="['val', {'baz': true, 'text-green-400': false}]">Issue #319</div></template>`,
+      filename: "test.vue",
+      parser: require.resolve("vue-eslint-parser"),
+    },
+    {
+      code: `<template><div :class="['tw-hidden',{'tw-text-red-500': true, 'tw-bg-transparent': false}, 'tw-text-red-200']">Issue #319</div></template>`,
+      filename: "test.vue",
+      parser: require.resolve("vue-eslint-parser"),
+      options: [
+        {
+          config: {
+            prefix: "tw-",
+            theme: {
+              extend: {},
+            },
+          },
+        },
+      ],
+    },
+    {
+      code: `<template><div :class="['hidden',{'text-red-500': true, 'bg-transparent': false}, {'text-green-500': true}, 'bg-white']">Issue #319</div></template>`,
+      filename: "test.vue",
+      parser: require.resolve("vue-eslint-parser"),
+    }
   ],
 
   invalid: [
@@ -1435,6 +1470,65 @@ ruleTester.run("no-custom-classname", rule, {
       filename: "test.vue",
       parser: require.resolve("vue-eslint-parser"),
     },
+    {
+      code: `
+      <script>
+      export default {
+        data() {
+          return {}
+        }
+      }
+      </script>
+      <template>
+        <span :class="['text-red-200', {'tw-unknown-class': true, 'tw-unknown-class-two': false}, 'tw-unknown-class-three', 'tw-bg-transparent']" /> 
+      </template>
+      `,
+      options: [
+        {
+          config: {
+            prefix: "tw-",
+            theme: {
+              extend: {},
+            },
+          },
+        },
+      ],
+      errors: generateErrors(
+        "text-red-200 tw-unknown-class tw-unknown-class-two tw-unknown-class-three"
+      ),
+      filename: "test.vue",
+      parser: require.resolve("vue-eslint-parser"),
+    },
+    {
+      code: `<template><div :class="[{'baz': true, 'foo': false}]">Issue #319</div></template>`,
+      filename: "test.vue",
+      parser: require.resolve("vue-eslint-parser"),
+      errors: generateErrors("baz foo"),
+    },
+    {
+      code: `<template><div :class="['unknown',{'baz': true, 'foo': false}]">Issue #319</div></template>`,
+      filename: "test.vue",
+      parser: require.resolve("vue-eslint-parser"),
+      errors: generateErrors("unknown baz foo"),
+    },
+    {
+      code: `<template><div :class="['text-red-200','unknown',{'baz': true, 'foo': false}, 'tw-unknown-class']">Issue #319</div></template>`,
+      filename: "test.vue",
+      parser: require.resolve("vue-eslint-parser"),
+      errors: generateErrors("unknown baz foo tw-unknown-class"),
+    },
+    {
+      code: `<template><div :class="['tw-hidden',{'custom': true, '🧑‍💻': false}, {'text-green-500': true}, 'bg-tw']">Issue #319</div></template>`,
+      filename: "test.vue",
+      parser: require.resolve("vue-eslint-parser"),
+      errors: generateErrors("tw-hidden custom 🧑‍💻 bg-tw"),
+    },
+    {
+      code: `<template><div :class="[{'baz': true, 'foo': false}]" :prop="['baz', true, 'foo']" :other="['val', {'baz': true, 'foo': false}]">Issue #319</div></template>`,
+      filename: "test.vue",
+      parser: require.resolve("vue-eslint-parser"),
+      errors: generateErrors("baz foo"),
+    },
     {
       code: `<div className="group-hover/edit:unknown-class">Custom group name variant with invalid class name</div>`,
       errors: generateErrors("group-hover/edit:unknown-class"),