fix(cli): deduplicate classNames in applyColorMapping (#1089)

* fix(cli): deduplicate classNames in applyColorMapping

* refactor: simplify applyColorMapping return

* chore: add changeset

---------

Co-authored-by: shadcn <m@shadcn.com>

.changeset/tricky-cooks-appear.md

@@ -0,0 +1,5 @@
+---
+"shadcn-ui": patch
+---
+
+fix duplicate classnames

packages/cli/src/utils/transformers/transform-css-vars.ts

@@ -146,38 +146,38 @@ export function applyColorMapping(
 
   // Build color mappings.
   const classNames = input.split(" ")
-  const lightMode: string[] = []
-  const darkMode: string[] = []
+  const lightMode = new Set<string>()
+  const darkMode = new Set<string>()
   for (let className of classNames) {
     const [variant, value, modifier] = splitClassName(className)
     const prefix = PREFIXES.find((prefix) => value?.startsWith(prefix))
     if (!prefix) {
-      if (!lightMode.includes(className)) {
-        lightMode.push(className)
+      if (!lightMode.has(className)) {
+        lightMode.add(className)
       }
       continue
     }
 
     const needle = value?.replace(prefix, "")
     if (needle && needle in mapping.light) {
-      lightMode.push(
+      lightMode.add(
         [variant, `${prefix}${mapping.light[needle]}`]
           .filter(Boolean)
           .join(":") + (modifier ? `/${modifier}` : "")
       )
 
-      darkMode.push(
+      darkMode.add(
         ["dark", variant, `${prefix}${mapping.dark[needle]}`]
           .filter(Boolean)
           .join(":") + (modifier ? `/${modifier}` : "")
       )
       continue
     }
 
-    if (!lightMode.includes(className)) {
-      lightMode.push(className)
+    if (!lightMode.has(className)) {
+      lightMode.add(className)
     }
   }
 
-  return lightMode.join(" ") + " " + darkMode.join(" ").trim()
+  return [...Array.from(lightMode), ...Array.from(darkMode)].join(" ").trim()
 }

packages/cli/test/utils/__snapshots__/transform-css-vars.test.ts.snap

@@ -23,3 +23,11 @@ export function Foo() {
 }\\"\\"
     "
 `;
+
+exports[`transform css vars 4`] = `
+"import * as React from \\"react\\"
+export function Foo() {
+	return <div className={cn(\\"bg-white border border-stone-200 dark:bg-stone-950 dark:border-stone-800\\")}>foo</div>
+}\\"\\"
+    "
+`;

packages/cli/test/utils/apply-color-mapping.test.ts

@@ -64,7 +64,7 @@ describe("apply color mapping", async () => {
       input:
         "text-destructive border-destructive/50 dark:border-destructive [&>svg]:text-destructive text-destructive",
       output:
-        "text-red-500 border-red-500/50 dark:border-red-500 [&>svg]:text-red-500 text-red-500 dark:text-red-900 dark:border-red-900/50 dark:dark:border-red-900 dark:[&>svg]:text-red-900 dark:text-red-900",
+        "text-red-500 border-red-500/50 dark:border-red-500 [&>svg]:text-red-500 dark:text-red-900 dark:border-red-900/50 dark:dark:border-red-900 dark:[&>svg]:text-red-900",
     },
     {
       input:

packages/cli/test/utils/transform-css-vars.test.ts

@@ -56,6 +56,29 @@ export function Foo() {
       raw: `import * as React from "react"
 export function Foo() {
 	return <div className={cn("bg-background hover:bg-muted", true && "text-primary-foreground sm:focus:text-accent-foreground")}>foo</div>
+}"
+    `,
+      config: {
+        tsx: true,
+        tailwind: {
+          baseColor: "stone",
+          cssVariables: false,
+        },
+        aliases: {
+          components: "@/components",
+          utils: "@/lib/utils",
+        },
+      },
+      baseColor: stone,
+    })
+  ).toMatchSnapshot()
+
+  expect(
+    await transform({
+      filename: "test.ts",
+      raw: `import * as React from "react"
+export function Foo() {
+	return <div className={cn("bg-background border border-input")}>foo</div>
 }"
     `,
       config: {