Merge branch 'main' into main

shadcn-ui · Feb 5, 2025 · 12ba3c6 · 12ba3c6
2 parents b4b7d93 + 1e357cb
commit 12ba3c6
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 31 deletions.
diff --git a/.changeset/new-cheetahs-dance.md 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
@@ -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
@@ -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
@@ -310,7 +310,7 @@ export async function getProjectConfig(
 export async function getProjectTailwindVersionFromConfig(
   config: Config
 ): Promise<TailwindVersion> {
-  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
@@ -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
@@ -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;