Repository: ony3000/prettier-plugin-classnames (ts)

Issue:
Vue's object-class syntax with a hyphenated key class breaks formatting (v5+)
The error happens in v5+.

When using [this syntax in Vue](https://vuejs.org/guide/essentials/class-and-style#binding-to-objects), where we can use objects to dynamically assign CSS classes, if the key of the object is a hyphenated string, it breaks Prettier's ability to format.

## Steps to reproduce
Create a component in Vue, as simple as:
```
<template>
  <div
    :class="{
        'bg-black': true
    }">Some text</div>
</template>
```

## Expected behavior
Prettier formats correctly

## Actual behavior
Formatting stops and this error is shown in the OUTPUT tab for Prettier:

![Screenshot 2024-02-15 at 8 51 51 p m](https://github.com/francoismassart/eslint-plugin-tailwindcss/assets/31573181/f3d08500-b824-48be-a55c-f26a001bad1d)

## Extra info
Been using these 3 plugins together so far `"prettier-plugin-tailwindcss", "prettier-plugin-classnames", "prettier-plugin-merge"` without issue, until I found this one.

Even if I only use `prettier-plugin-classnames`, the error happens.

If I don't use a hyphenated string as key, the error goes away. For example, this works fine:

```
<template>
  <div
    :class="{
        absolute: true
    }">Some text</div>
</template>
```

 - OS: macOS Sonoma 14.1.1
 -  VSCode 1.86.1
 -  Prettier ^3.2.5

Pull request:
Fix delimiter for certain types of short enough class names written in vue expressions
This PR closes #37.

Patch:
diff --git a/src/packages/core-parts/index.ts b/src/packages/core-parts/index.ts
index 5d8530b..a25f719 100644
--- a/src/packages/core-parts/index.ts
+++ b/src/packages/core-parts/index.ts
@@ -57,7 +57,10 @@ function getSomeKindOfQuotes(
         parser === 'vue' &&
         [
           ClassNameType.FA,
+          ClassNameType.CSL,
           ClassNameType.SLSL,
+          ClassNameType.SLOP,
+          ClassNameType.SLTO,
           ClassNameType.CTL,
           ClassNameType.TLSL,
           ClassNameType.TLOP,


Test patch:
diff --git a/tests/v2-test/vue/expression.test.ts b/tests/v2-test/vue/expression.test.ts
index 45b8388..cb3e9c6 100644
--- a/tests/v2-test/vue/expression.test.ts
+++ b/tests/v2-test/vue/expression.test.ts
@@ -382,6 +382,303 @@ import clsx from "clsx";
     <slot></slot>
   </div>
 </template>
+`,
+  },
+  {
+    name: 'issue #37 - short enough conditional class name (no error in v0.4.0, error in v0.5.0 ~ v0.6.0)',
+    input: `
+<template>
+  <div
+    :class="{
+        'bg-black': true
+    }">Some text</div>
+</template>
+`,
+    output: `<template>
+  <div
+    :class="{
+      'bg-black': true,
+    }"
+  >
+    Some text
+  </div>
+</template>
+`,
+  },
+  {
+    name: 'class name type checking (1) - short enough FA',
+    input: `
+<script setup lang="ts">
+const foo = classNames('rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4');
+</script>
+
+<template>
+  <div :class="classNames('rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4')">
+    <slot></slot>
+  </div>
+</template>
+`,
+    output: `<script setup lang="ts">
+const foo = classNames(
+  "rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4",
+);
+</script>
+
+<template>
+  <div
+    :class="
+      classNames(
+        'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4',
+      )
+    "
+  >
+    <slot></slot>
+  </div>
+</template>
+`,
+  },
+  {
+    name: 'class name type checking (2) - short enough CSL',
+    input: `
+<script setup lang="ts">
+const foo = ['rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4', 'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4'];
+</script>
+
+<template>
+  <div :class="['rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4', 'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4']">
+    <slot></slot>
+  </div>
+</template>
+`,
+    output: `<script setup lang="ts">
+const foo = [
+  "rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4",
+  "rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4",
+];
+</script>
+
+<template>
+  <div
+    :class="[
+      'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4',
+      'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4',
+    ]"
+  >
+    <slot></slot>
+  </div>
+</template>
+`,
+  },
+  {
+    name: 'class name type checking (3) - short enough SLSL',
+    input: `
+<script setup lang="ts">
+const foo = ['rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4'];
+</script>
+
+<template>
+  <div :class="['rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4']">
+    <slot></slot>
+  </div>
+</template>
+`,
+    output: `<script setup lang="ts">
+const foo = ["rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4"];
+</script>
+
+<template>
+  <div
+    :class="['rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4']"
+  >
+    <slot></slot>
+  </div>
+</template>
+`,
+  },
+  {
+    name: 'class name type checking (4) - short enough SLOP',
+    input: `
+<script setup lang="ts">
+const foo = classNames({'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4': true});
+</script>
+
+<template>
+  <div :class="{'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4': true}">
+    <slot></slot>
+  </div>
+</template>
+`,
+    output: `<script setup lang="ts">
+const foo = classNames({
+  "rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4": true,
+});
+</script>
+
+<template>
+  <div
+    :class="{
+      'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4': true,
+    }"
+  >
+    <slot></slot>
+  </div>
+</template>
+`,
+  },
+  {
+    name: 'class name type checking (5) - short enough SLTO',
+    input: `
+<script setup lang="ts">
+const foo = classNames([true ? 'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4' : 'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4']);
+</script>
+
+<template>
+  <div :class="[true ? 'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4' : 'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4']">
+    <slot></slot>
+  </div>
+</template>
+`,
+    output: `<script setup lang="ts">
+const foo = classNames([
+  true
+    ? "rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4"
+    : "rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4",
+]);
+</script>
+
+<template>
+  <div
+    :class="[
+      true
+        ? 'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4'
+        : 'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4',
+    ]"
+  >
+    <slot></slot>
+  </div>
+</template>
+`,
+  },
+  {
+    name: 'class name type checking (6) - short enough CTL',
+    input: `
+<script setup lang="ts">
+const foo = [\`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\`, \`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\`];
+</script>
+
+<template>
+  <div :class="[\`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\`, \`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\`]">
+    <slot></slot>
+  </div>
+</template>
+`,
+    output: `<script setup lang="ts">
+const foo = [
+  \`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\`,
+  \`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\`,
+];
+</script>
+
+<template>
+  <div
+    :class="[
+      'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4',
+      'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4',
+    ]"
+  >
+    <slot></slot>
+  </div>
+</template>
+`,
+  },
+  {
+    name: 'class name type checking (7) - short enough TLSL',
+    input: `
+<script setup lang="ts">
+const foo = [\`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\`];
+</script>
+
+<template>
+  <div :class="[\`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\`]">
+    <slot></slot>
+  </div>
+</template>
+`,
+    output: `<script setup lang="ts">
+const foo = [\`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\`];
+</script>
+
+<template>
+  <div
+    :class="['rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4']"
+  >
+    <slot></slot>
+  </div>
+</template>
+`,
+  },
+  {
+    name: 'class name type checking (8) - short enough TLOP',
+    input: `
+<script setup lang="ts">
+const foo = classNames({[\`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\`]: true});
+</script>
+
+<template>
+  <div :class="{[\`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\`]: true}">
+    <slot></slot>
+  </div>
+</template>
+`,
+    output: `<script setup lang="ts">
+const foo = classNames({
+  "rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4": true,
+});
+</script>
+
+<template>
+  <div
+    :class="{
+      'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4': true,
+    }"
+  >
+    <slot></slot>
+  </div>
+</template>
+`,
+  },
+  {
+    name: 'class name type checking (9) - short enough TLTO',
+    input: `
+<script setup lang="ts">
+const foo = classNames([true ? \`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\` : \`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\`]);
+</script>
+
+<template>
+  <div :class="[true ? \`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\` : \`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\`]">
+    <slot></slot>
+  </div>
+</template>
+`,
+    output: `<script setup lang="ts">
+const foo = classNames([
+  true
+    ? "rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4"
+    : "rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4",
+]);
+</script>
+
+<template>
+  <div
+    :class="[
+      true
+        ? 'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4'
+        : 'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4',
+    ]"
+  >
+    <slot></slot>
+  </div>
+</template>
 `,
   },
   {
diff --git a/tests/v3-test/vue/expression.test.ts b/tests/v3-test/vue/expression.test.ts
index 989aa69..1cacad7 100644
--- a/tests/v3-test/vue/expression.test.ts
+++ b/tests/v3-test/vue/expression.test.ts
@@ -382,6 +382,303 @@ import clsx from "clsx";
     <slot></slot>
   </div>
 </template>
+`,
+  },
+  {
+    name: 'issue #37 - short enough conditional class name (no error in v0.4.0, error in v0.5.0 ~ v0.6.0)',
+    input: `
+<template>
+  <div
+    :class="{
+        'bg-black': true
+    }">Some text</div>
+</template>
+`,
+    output: `<template>
+  <div
+    :class="{
+      'bg-black': true,
+    }"
+  >
+    Some text
+  </div>
+</template>
+`,
+  },
+  {
+    name: 'class name type checking (1) - short enough FA',
+    input: `
+<script setup lang="ts">
+const foo = classNames('rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4');
+</script>
+
+<template>
+  <div :class="classNames('rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4')">
+    <slot></slot>
+  </div>
+</template>
+`,
+    output: `<script setup lang="ts">
+const foo = classNames(
+  "rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4",
+);
+</script>
+
+<template>
+  <div
+    :class="
+      classNames(
+        'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4',
+      )
+    "
+  >
+    <slot></slot>
+  </div>
+</template>
+`,
+  },
+  {
+    name: 'class name type checking (2) - short enough CSL',
+    input: `
+<script setup lang="ts">
+const foo = ['rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4', 'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4'];
+</script>
+
+<template>
+  <div :class="['rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4', 'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4']">
+    <slot></slot>
+  </div>
+</template>
+`,
+    output: `<script setup lang="ts">
+const foo = [
+  "rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4",
+  "rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4",
+];
+</script>
+
+<template>
+  <div
+    :class="[
+      'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4',
+      'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4',
+    ]"
+  >
+    <slot></slot>
+  </div>
+</template>
+`,
+  },
+  {
+    name: 'class name type checking (3) - short enough SLSL',
+    input: `
+<script setup lang="ts">
+const foo = ['rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4'];
+</script>
+
+<template>
+  <div :class="['rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4']">
+    <slot></slot>
+  </div>
+</template>
+`,
+    output: `<script setup lang="ts">
+const foo = ["rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4"];
+</script>
+
+<template>
+  <div
+    :class="['rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4']"
+  >
+    <slot></slot>
+  </div>
+</template>
+`,
+  },
+  {
+    name: 'class name type checking (4) - short enough SLOP',
+    input: `
+<script setup lang="ts">
+const foo = classNames({'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4': true});
+</script>
+
+<template>
+  <div :class="{'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4': true}">
+    <slot></slot>
+  </div>
+</template>
+`,
+    output: `<script setup lang="ts">
+const foo = classNames({
+  "rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4": true,
+});
+</script>
+
+<template>
+  <div
+    :class="{
+      'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4': true,
+    }"
+  >
+    <slot></slot>
+  </div>
+</template>
+`,
+  },
+  {
+    name: 'class name type checking (5) - short enough SLTO',
+    input: `
+<script setup lang="ts">
+const foo = classNames([true ? 'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4' : 'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4']);
+</script>
+
+<template>
+  <div :class="[true ? 'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4' : 'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4']">
+    <slot></slot>
+  </div>
+</template>
+`,
+    output: `<script setup lang="ts">
+const foo = classNames([
+  true
+    ? "rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4"
+    : "rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4",
+]);
+</script>
+
+<template>
+  <div
+    :class="[
+      true
+        ? 'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4'
+        : 'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4',
+    ]"
+  >
+    <slot></slot>
+  </div>
+</template>
+`,
+  },
+  {
+    name: 'class name type checking (6) - short enough CTL',
+    input: `
+<script setup lang="ts">
+const foo = [\`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\`, \`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\`];
+</script>
+
+<template>
+  <div :class="[\`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\`, \`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\`]">
+    <slot></slot>
+  </div>
+</template>
+`,
+    output: `<script setup lang="ts">
+const foo = [
+  \`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\`,
+  \`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\`,
+];
+</script>
+
+<template>
+  <div
+    :class="[
+      'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4',
+      'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4',
+    ]"
+  >
+    <slot></slot>
+  </div>
+</template>
+`,
+  },
+  {
+    name: 'class name type checking (7) - short enough TLSL',
+    input: `
+<script setup lang="ts">
+const foo = [\`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\`];
+</script>
+
+<template>
+  <div :class="[\`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\`]">
+    <slot></slot>
+  </div>
+</template>
+`,
+    output: `<script setup lang="ts">
+const foo = [\`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\`];
+</script>
+
+<template>
+  <div
+    :class="['rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4']"
+  >
+    <slot></slot>
+  </div>
+</template>
+`,
+  },
+  {
+    name: 'class name type checking (8) - short enough TLOP',
+    input: `
+<script setup lang="ts">
+const foo = classNames({[\`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\`]: true});
+</script>
+
+<template>
+  <div :class="{[\`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\`]: true}">
+    <slot></slot>
+  </div>
+</template>
+`,
+    output: `<script setup lang="ts">
+const foo = classNames({
+  "rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4": true,
+});
+</script>
+
+<template>
+  <div
+    :class="{
+      'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4': true,
+    }"
+  >
+    <slot></slot>
+  </div>
+</template>
+`,
+  },
+  {
+    name: 'class name type checking (9) - short enough TLTO',
+    input: `
+<script setup lang="ts">
+const foo = classNames([true ? \`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\` : \`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\`]);
+</script>
+
+<template>
+  <div :class="[true ? \`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\` : \`rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4\`]">
+    <slot></slot>
+  </div>
+</template>
+`,
+    output: `<script setup lang="ts">
+const foo = classNames([
+  true
+    ? "rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4"
+    : "rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4",
+]);
+</script>
+
+<template>
+  <div
+    :class="[
+      true
+        ? 'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4'
+        : 'rounded-xl border border-zinc-400/30 bg-gray-100/50 px-4 py-4',
+    ]"
+  >
+    <slot></slot>
+  </div>
+</template>
 `,
   },
   {