diff --git a/.changeset/fifty-rivers-sparkle.md b/.changeset/fifty-rivers-sparkle.md new file mode 100644 index 00000000000..599dcc320d7 --- /dev/null +++ b/.changeset/fifty-rivers-sparkle.md @@ -0,0 +1,5 @@ +--- +"shadcn": patch +--- + +support aliases longer than one char diff --git a/packages/shadcn/src/utils/get-project-info.ts b/packages/shadcn/src/utils/get-project-info.ts index 42047cf7303..997ed2ade73 100644 --- a/packages/shadcn/src/utils/get-project-info.ts +++ b/packages/shadcn/src/utils/get-project-info.ts @@ -165,7 +165,7 @@ export async function getTsConfigAliasPrefix(cwd: string) { paths.includes("./app/*") || paths.includes("./resources/js/*") // Laravel. ) { - return alias.at(0) ?? null + return alias.replace(/\/\*$/, "") ?? null } } diff --git a/packages/shadcn/src/utils/transformers/transform-import.ts b/packages/shadcn/src/utils/transformers/transform-import.ts index cb0c700bec7..825674530aa 100644 --- a/packages/shadcn/src/utils/transformers/transform-import.ts +++ b/packages/shadcn/src/utils/transformers/transform-import.ts @@ -35,8 +35,8 @@ function updateImportAliases(moduleSpecifier: string, config: Config) { // Not a registry import. if (!moduleSpecifier.startsWith("@/registry/")) { - // We fix the alias an return. - const alias = config.aliases.components.charAt(0) + // We fix the alias and return. + const alias = config.aliases.components.split("/")[0] return moduleSpecifier.replace(/^@\//, `${alias}/`) } diff --git a/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/favicon.ico b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/favicon.ico new file mode 100644 index 00000000000..718d6fea483 Binary files /dev/null and b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/favicon.ico differ diff --git a/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/globals.css b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/globals.css new file mode 100644 index 00000000000..fd81e885836 --- /dev/null +++ b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/globals.css @@ -0,0 +1,27 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +:root { + --foreground-rgb: 0, 0, 0; + --background-start-rgb: 214, 219, 220; + --background-end-rgb: 255, 255, 255; +} + +@media (prefers-color-scheme: dark) { + :root { + --foreground-rgb: 255, 255, 255; + --background-start-rgb: 0, 0, 0; + --background-end-rgb: 0, 0, 0; + } +} + +body { + color: rgb(var(--foreground-rgb)); + background: linear-gradient( + to bottom, + transparent, + rgb(var(--background-end-rgb)) + ) + rgb(var(--background-start-rgb)); +} diff --git a/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/layout.tsx b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/layout.tsx new file mode 100644 index 00000000000..ae845621236 --- /dev/null +++ b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/layout.tsx @@ -0,0 +1,22 @@ +import './globals.css' +import type { Metadata } from 'next' +import { Inter } from 'next/font/google' + +const inter = Inter({ subsets: ['latin'] }) + +export const metadata: Metadata = { + title: 'Create Next App', + description: 'Generated by create next app', +} + +export default function RootLayout({ + children, +}: { + children: React.ReactNode +}) { + return ( + + {children} + + ) +} diff --git a/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/other.css b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/other.css new file mode 100644 index 00000000000..aa1634c2550 --- /dev/null +++ b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/other.css @@ -0,0 +1,3 @@ +body { + background-color: red; +} diff --git a/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/page.tsx b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/page.tsx new file mode 100644 index 00000000000..7a8286b5768 --- /dev/null +++ b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/page.tsx @@ -0,0 +1,113 @@ +import Image from 'next/image' + +export default function Home() { + return ( +
+
+

+ Get started by editing  + app/page.tsx +

+
+ + By{' '} + Vercel Logo + +
+
+ +
+ Next.js Logo +
+ +
+ +

+ Docs{' '} + + -> + +

+

+ Find in-depth information about Next.js features and API. +

+ + + +

+ Learn{' '} + + -> + +

+

+ Learn about Next.js in an interactive course with quizzes! +

+ + + +

+ Templates{' '} + + -> + +

+

+ Explore the Next.js 13 playground. +

+ + + +

+ Deploy{' '} + + -> + +

+

+ Instantly deploy your Next.js site to a shareable URL with Vercel. +

+ +
+
+ ) +} diff --git a/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/next-env.d.ts b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/next-env.d.ts new file mode 100644 index 00000000000..4f11a03dc6c --- /dev/null +++ b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/next-env.d.ts @@ -0,0 +1,5 @@ +/// +/// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/next.config.ts b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/next.config.ts new file mode 100644 index 00000000000..767719fc4fb --- /dev/null +++ b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/next.config.ts @@ -0,0 +1,4 @@ +/** @type {import('next').NextConfig} */ +const nextConfig = {} + +module.exports = nextConfig diff --git a/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/package.json b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/package.json new file mode 100644 index 00000000000..d43fb081b9a --- /dev/null +++ b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/package.json @@ -0,0 +1,11 @@ +{ + "name": "test-cli-next-app", + "version": "0.1.0", + "private": true, + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start", + "lint": "next lint" + } +} diff --git a/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/postcss.config.js b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/postcss.config.js new file mode 100644 index 00000000000..33ad091d26d --- /dev/null +++ b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/tailwind.config.ts b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/tailwind.config.ts new file mode 100644 index 00000000000..571ebb0f90a --- /dev/null +++ b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/tailwind.config.ts @@ -0,0 +1,21 @@ +// @ts-nocheck +import type { Config } from 'tailwindcss' + +const config: Config = { + content: [ + './pages/**/*.{js,ts,jsx,tsx,mdx}', + './components/**/*.{js,ts,jsx,tsx,mdx}', + './app/**/*.{js,ts,jsx,tsx,mdx}' + ], + theme: { + extend: { + backgroundImage: { + 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', + 'gradient-conic': + 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))' + } + } + }, + plugins: [] +} +export default config diff --git a/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/tsconfig.json b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/tsconfig.json new file mode 100644 index 00000000000..0751e3ea82b --- /dev/null +++ b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/tsconfig.json @@ -0,0 +1,27 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "bundler", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true, + "plugins": [ + { + "name": "next" + } + ], + "paths": { + "@custom-alias/*": ["./*"] + } + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], + "exclude": ["node_modules"] +} diff --git a/packages/shadcn/test/utils/__snapshots__/transform-import.test.ts.snap b/packages/shadcn/test/utils/__snapshots__/transform-import.test.ts.snap index 6e1c2d033c6..75d1bd98d3c 100644 --- a/packages/shadcn/test/utils/__snapshots__/transform-import.test.ts.snap +++ b/packages/shadcn/test/utils/__snapshots__/transform-import.test.ts.snap @@ -58,3 +58,14 @@ import { Foo } from "bar" import { bar } from "~/lib/utils/bar" " `; + +exports[`transform import 6`] = ` +"import * as React from "react" +import { Foo } from "bar" + import { Button } from "@custom-alias/components/ui/button" + import { Label} from "ui/label" + import { Box } from "@custom-alias/components/box" + + import { cn } from "@custom-alias/lib/utils" + " +`; diff --git a/packages/shadcn/test/utils/get-ts-config-alias-prefix.test.ts b/packages/shadcn/test/utils/get-ts-config-alias-prefix.test.ts index af0828a5309..17acb7a5c7f 100644 --- a/packages/shadcn/test/utils/get-ts-config-alias-prefix.test.ts +++ b/packages/shadcn/test/utils/get-ts-config-alias-prefix.test.ts @@ -25,6 +25,10 @@ describe("get ts config alias prefix", async () => { name: "t3-app", prefix: "~", }, + { + name: "next-app-custom-alias", + prefix: "@custom-alias", + }, ])(`getTsConfigAliasPrefix($name) -> $prefix`, async ({ name, prefix }) => { expect( await getTsConfigAliasPrefix( diff --git a/packages/shadcn/test/utils/transform-import.test.ts b/packages/shadcn/test/utils/transform-import.test.ts index a7ad3e8306b..477c5235fbc 100644 --- a/packages/shadcn/test/utils/transform-import.test.ts +++ b/packages/shadcn/test/utils/transform-import.test.ts @@ -117,4 +117,29 @@ import { Foo } from "bar" }, }) ).toMatchSnapshot() + + expect( + await transform({ + filename: "test.ts", + raw: `import * as React from "react" +import { Foo } from "bar" + import { Button } from "@/components/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: "@custom-alias/components", + utils: "@custom-alias/lib/utils", + }, + }, + }) + ).toMatchSnapshot() })