fix(cli): monorepo cn import (#6530)

* fix monorepo cn import * chore: changeset * style(shadcn): format --------- Co-authored-by: shadcn <[email protected]>
shadcn-ui · Feb 20, 2025 · d615902 · d615902
1 parent b0774b0
commit d615902
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 12 deletions.
diff --git a/.changeset/orange-papayas-relax.md b/.changeset/orange-papayas-relax.md
@@ -0,0 +1,5 @@
+---
+"shadcn": patch
+---
+
+fix cn import bug in monorepo
diff --git a/packages/shadcn/src/utils/transformers/transform-import.ts b/packages/shadcn/src/utils/transformers/transform-import.ts
@@ -1,16 +1,14 @@
 import { Config } from "@/src/utils/get-config"
 import { Transformer } from "@/src/utils/transformers"
 
-const COMMON_CN_IMPORTS = {
-  "@/lib/utils": /^@\/lib\/utils/,
-  "@workspace/lib/utils": /^@workspace\/lib\/utils/,
-}
-
 export const transformImport: Transformer = async ({
   sourceFile,
   config,
   isRemote,
 }) => {
+  const workspaceAlias = config.aliases?.utils?.split("/")[0]?.slice(1)
+  const utilsImport = `@${workspaceAlias}/lib/utils`
+
   const importDeclarations = sourceFile.getImportDeclarations()
 
   for (const importDeclaration of importDeclarations) {
@@ -23,17 +21,12 @@ export const transformImport: Transformer = async ({
     importDeclaration.setModuleSpecifier(moduleSpecifier)
 
     // Replace `import { cn } from "@/lib/utils"`
-    if (COMMON_CN_IMPORTS[moduleSpecifier as keyof typeof COMMON_CN_IMPORTS]) {
+    if (utilsImport === moduleSpecifier) {
       const namedImports = importDeclaration.getNamedImports()
       const cnImport = namedImports.find((i) => i.getName() === "cn")
       if (cnImport) {
         importDeclaration.setModuleSpecifier(
-          moduleSpecifier.replace(
-            COMMON_CN_IMPORTS[
-              moduleSpecifier as keyof typeof COMMON_CN_IMPORTS
-            ],
-            config.aliases.utils
-          )
+          moduleSpecifier.replace(utilsImport, config.aliases.utils)
         )
       }
     }

diff --git a/packages/shadcn/test/utils/__snapshots__/transform-import.test.ts.snap b/packages/shadcn/test/utils/__snapshots__/transform-import.test.ts.snap
@@ -69,3 +69,25 @@ import { Foo } from "bar"
     import { cn } from "@custom-alias/lib/utils"
     "
 `;
+
+exports[`transform import for monorepo 1`] = `
+"import * as React from "react"
+import { Foo } from "bar"
+    import { Button } from "@workspace/ui/components/ui/button"
+    import { Label} from "ui/label"
+    import { Box } from "@workspace/ui/components/box"
+
+    import { cn } from "@workspace/ui/lib/utils"
+    "
+`;
+
+exports[`transform import for monorepo 2`] = `
+"import * as React from "react"
+import { Foo } from "bar"
+    import { Button } from "@repo/ui/components/ui/button"
+    import { Label} from "ui/label"
+    import { Box } from "@repo/ui/components/box"
+
+    import { cn } from "@repo/ui/lib/utils"
+    "
+`;
diff --git a/packages/shadcn/test/utils/transform-import.test.ts b/packages/shadcn/test/utils/transform-import.test.ts
@@ -143,3 +143,56 @@ import { Foo } from "bar"
     })
   ).toMatchSnapshot()
 })
+
+
+test("transform import for monorepo", async () => {
+  expect(
+    await transform({
+      filename: "test.ts",
+      raw: `import * as React from "react"
+import { Foo } from "bar"
+    import { Button } from "@/registry/new-york/ui/button"
+    import { Label} from "ui/label"
+    import { Box } from "@/registry/new-york/box"
+
+    import { cn } from "@/lib/utils"
+    `,
+      config: {
+        tsx: true,
+        tailwind: {
+          baseColor: "neutral",
+          cssVariables: true,
+        },
+        aliases: {
+          components: "@workspace/ui/components",
+          utils: "@workspace/ui/lib/utils",
+        },
+      },
+    })
+  ).toMatchSnapshot()
+
+  expect(
+    await transform({
+      filename: "test.ts",
+      raw: `import * as React from "react"
+import { Foo } from "bar"
+    import { Button } from "@/registry/new-york/ui/button"
+    import { Label} from "ui/label"
+    import { Box } from "@/registry/new-york/box"
+
+    import { cn } from "@/lib/utils"
+    `,
+      config: {
+        tsx: true,
+        tailwind: {
+          baseColor: "neutral",
+          cssVariables: true,
+        },
+        aliases: {
+          components: "@repo/ui/components",
+          utils: "@repo/ui/lib/utils",
+        },
+      },
+    })
+  ).toMatchSnapshot()
+})