From 1e357cb20d6024b2bc9766fb15f61cb989eb7024 Mon Sep 17 00:00:00 2001 From: shadcn Date: Wed, 5 Feb 2025 21:28:49 +0400 Subject: [PATCH] (8/n) shadcn: default to new-york for v4 (#6574) * feat(shadcn): handle radius for v4 * feat(shadcn): default to new-york for v4 * chore: changeset --- .changeset/new-cheetahs-dance.md | 5 ++ packages/shadcn/src/commands/init.ts | 18 ++++-- packages/shadcn/src/registry/api.ts | 15 ++++- packages/shadcn/src/utils/get-project-info.ts | 2 +- .../src/utils/updaters/update-css-vars.ts | 8 ++- .../utils/updaters/update-css-vars.test.ts | 58 +++++++++++++------ 6 files changed, 75 insertions(+), 31 deletions(-) create mode 100644 .changeset/new-cheetahs-dance.md diff --git a/.changeset/new-cheetahs-dance.md b/.changeset/new-cheetahs-dance.md new file mode 100644 index 00000000000..31bf21a2e3a --- /dev/null +++ b/.changeset/new-cheetahs-dance.md @@ -0,0 +1,5 @@ +--- +"shadcn": minor +--- + +default for new-york for v4 diff --git a/packages/shadcn/src/commands/init.ts b/packages/shadcn/src/commands/init.ts index bd6e04ebdbf..94674f803eb 100644 --- a/packages/shadcn/src/commands/init.ts +++ b/packages/shadcn/src/commands/init.ts @@ -15,7 +15,11 @@ import { resolveConfigPaths, type Config, } from "@/src/utils/get-config" -import { getProjectConfig, getProjectInfo } from "@/src/utils/get-project-info" +import { + getProjectConfig, + getProjectInfo, + getProjectTailwindVersionFromConfig, +} from "@/src/utils/get-project-info" import { handleError } from "@/src/utils/handle-error" import { highlighter } from "@/src/utils/highlighter" import { logger } from "@/src/utils/logger" @@ -285,21 +289,23 @@ async function promptForMinimalConfig( let cssVariables = defaultConfig.tailwind.cssVariables if (!opts.defaults) { - const [styles, baseColors] = await Promise.all([ + const [styles, baseColors, tailwindVersion] = await Promise.all([ getRegistryStyles(), getRegistryBaseColors(), + getProjectTailwindVersionFromConfig(defaultConfig), ]) const options = await prompts([ { - type: "select", + type: tailwindVersion === "v4" ? null : "select", name: "style", message: `Which ${highlighter.info("style")} would you like to use?`, choices: styles.map((style) => ({ - title: style.label, + title: + style.name === "new-york" ? "New York (Recommended)" : style.label, value: style.name, })), - initial: styles.findIndex((s) => s.name === style), + initial: 0, }, { type: "select", @@ -324,7 +330,7 @@ async function promptForMinimalConfig( }, ]) - style = options.style + style = options.style ?? "new-york" baseColor = options.tailwindBaseColor cssVariables = options.tailwindCssVariables } diff --git a/packages/shadcn/src/registry/api.ts b/packages/shadcn/src/registry/api.ts index 13474692f73..2d07d839a82 100644 --- a/packages/shadcn/src/registry/api.ts +++ b/packages/shadcn/src/registry/api.ts @@ -1,6 +1,9 @@ import path from "path" import { Config, getTargetStyleFromConfig } from "@/src/utils/get-config" -import { getProjectInfo } from "@/src/utils/get-project-info" +import { + getProjectInfo, + getProjectTailwindVersionFromConfig, +} from "@/src/utils/get-project-info" import { handleError } from "@/src/utils/handle-error" import { highlighter } from "@/src/utils/highlighter" import { logger } from "@/src/utils/logger" @@ -350,7 +353,10 @@ async function resolveRegistryDependencies( } export async function registryGetTheme(name: string, config: Config) { - const baseColor = await getRegistryBaseColor(name) + const [baseColor, tailwindVersion] = await Promise.all([ + getRegistryBaseColor(name), + getProjectTailwindVersionFromConfig(config), + ]) if (!baseColor) { return null } @@ -398,6 +404,11 @@ export async function registryGetTheme(name: string, config: Config) { } } + // Update theme to be v4 compatible. + if (tailwindVersion === "v4") { + theme.cssVars.light.radius = "0.6rem" + } + return theme } diff --git a/packages/shadcn/src/utils/get-project-info.ts b/packages/shadcn/src/utils/get-project-info.ts index 1351118c591..3c1b1cacf7a 100644 --- a/packages/shadcn/src/utils/get-project-info.ts +++ b/packages/shadcn/src/utils/get-project-info.ts @@ -310,7 +310,7 @@ export async function getProjectConfig( export async function getProjectTailwindVersionFromConfig( config: Config ): Promise { - if (!config.resolvedPaths.cwd) { + if (!config.resolvedPaths?.cwd) { return "v3" } diff --git a/packages/shadcn/src/utils/updaters/update-css-vars.ts b/packages/shadcn/src/utils/updaters/update-css-vars.ts index a10e37e79df..c1335835f68 100644 --- a/packages/shadcn/src/utils/updaters/update-css-vars.ts +++ b/packages/shadcn/src/utils/updaters/update-css-vars.ts @@ -107,7 +107,9 @@ export async function transformCssVars( from: undefined, }) - let output = result.css.replace(/\/\* ---break--- \*\//g, "") + let output = result.css + + output = output.replace(/\/\* ---break--- \*\//g, "") if (options.tailwindVersion === "v4") { output = output.replace(/(\n\s*\n)+/g, "\n\n") @@ -121,7 +123,7 @@ function updateBaseLayerPlugin() { postcssPlugin: "update-base-layer", Once(root: Root) { const requiredRules = [ - { selector: "*", apply: "border-border" }, + { selector: "*", apply: "border-border outline-ring/50" }, { selector: "body", apply: "bg-background text-foreground" }, ] @@ -359,7 +361,7 @@ function updateCssVarsPluginV4( node.type === "rule" && node.selector === selector ) - if (!ruleNode) { + if (!ruleNode && Object.keys(vars).length > 0) { ruleNode = postcss.rule({ selector, nodes: [], diff --git a/packages/shadcn/test/utils/updaters/update-css-vars.test.ts b/packages/shadcn/test/utils/updaters/update-css-vars.test.ts index bc206c78218..8cd0dd877bc 100644 --- a/packages/shadcn/test/utils/updaters/update-css-vars.test.ts +++ b/packages/shadcn/test/utils/updaters/update-css-vars.test.ts @@ -47,7 +47,7 @@ describe("transformCssVars", () => { @layer base { * { - @apply border-border; + @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; @@ -110,7 +110,7 @@ describe("transformCssVars", () => { @layer base { * { - @apply border-border; + @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; @@ -176,6 +176,17 @@ describe("transformCssVars", () => { @apply bg-background text-foreground; } } + + + + @layer base { + * { + @apply border-border outline-ring/50; + } + body { + @apply bg-background text-foreground; + } + } " `) }) @@ -222,7 +233,7 @@ describe("transformCssVarsV4", () => { @layer base { * { - @apply border-border; + @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; @@ -282,7 +293,7 @@ describe("transformCssVarsV4", () => { @layer base { * { - @apply border-border; + @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; @@ -346,7 +357,7 @@ describe("transformCssVarsV4", () => { @layer base { * { - @apply border-border; + @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; @@ -413,7 +424,7 @@ describe("transformCssVarsV4", () => { @layer base { * { - @apply border-border; + @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; @@ -492,6 +503,15 @@ describe("transformCssVarsV4", () => { @apply bg-background text-foreground; } } + + @layer base { + * { + @apply border-border outline-ring/50; + } + body { + @apply bg-background text-foreground; + } + } " `) }) @@ -536,7 +556,7 @@ describe("transformCssVarsV4", () => { @layer base { * { - @apply border-border; + @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; @@ -586,7 +606,7 @@ describe("transformCssVarsV4", () => { @layer base { * { - @apply border-border; + @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; @@ -636,7 +656,7 @@ describe("transformCssVarsV4", () => { @layer base { * { - @apply border-border; + @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; @@ -684,7 +704,7 @@ describe("transformCssVarsV4", () => { @layer base { * { - @apply border-border; + @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; @@ -732,7 +752,7 @@ describe("transformCssVarsV4", () => { @layer base { * { - @apply border-border; + @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; @@ -777,7 +797,7 @@ describe("transformCssVarsV4", () => { @layer base { * { - @apply border-border; + @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; @@ -808,7 +828,7 @@ describe("transformCssVarsV4", () => { @layer base { * { - @apply border-border; + @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; @@ -846,7 +866,7 @@ describe("transformCssVarsV4", () => { @layer base { * { - @apply border-border; + @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; @@ -884,7 +904,7 @@ describe("transformCssVarsV4", () => { @layer base { * { - @apply border-border; + @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; @@ -949,7 +969,7 @@ describe("transformCssVarsV4", () => { @layer base { * { - @apply border-border; + @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; @@ -1024,7 +1044,7 @@ describe("transformCssVarsV4", () => { @layer base { * { - @apply border-border; + @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; @@ -1095,7 +1115,7 @@ describe("transformCssVarsV4", () => { @layer base { * { - @apply border-border; + @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; @@ -1168,7 +1188,7 @@ describe("transformCssVarsV4", () => { @layer base { * { - @apply border-border; + @apply border-border outline-ring/50; } body { @apply bg-background text-foreground;