Skip to content

Commit 1e357cb

Browse files
shadcnshadcn
authored
(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
1 parent 6339aaa commit 1e357cb

File tree

6 files changed

+75
-31
lines changed

6 files changed

+75
-31
lines changed

‎.changeset/new-cheetahs-dance.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"shadcn": minor
3+
---
4+
5+
default for new-york for v4

‎packages/shadcn/src/commands/init.ts‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,11 @@ import {
1515
resolveConfigPaths,
1616
type Config,
1717
} from "@/src/utils/get-config"
18-
import { getProjectConfig, getProjectInfo } from "@/src/utils/get-project-info"
18+
import {
19+
getProjectConfig,
20+
getProjectInfo,
21+
getProjectTailwindVersionFromConfig,
22+
} from "@/src/utils/get-project-info"
1923
import { handleError } from "@/src/utils/handle-error"
2024
import { highlighter } from "@/src/utils/highlighter"
2125
import { logger } from "@/src/utils/logger"
@@ -285,21 +289,23 @@ async function promptForMinimalConfig(
285289
let cssVariables = defaultConfig.tailwind.cssVariables
286290

287291
if (!opts.defaults) {
288-
const [styles, baseColors] = await Promise.all([
292+
const [styles, baseColors, tailwindVersion] = await Promise.all([
289293
getRegistryStyles(),
290294
getRegistryBaseColors(),
295+
getProjectTailwindVersionFromConfig(defaultConfig),
291296
])
292297

293298
const options = await prompts([
294299
{
295-
type: "select",
300+
type: tailwindVersion === "v4" ? null : "select",
296301
name: "style",
297302
message: `Which ${highlighter.info("style")} would you like to use?`,
298303
choices: styles.map((style) => ({
299-
title: style.label,
304+
title:
305+
style.name === "new-york" ? "New York (Recommended)" : style.label,
300306
value: style.name,
301307
})),
302-
initial: styles.findIndex((s) => s.name === style),
308+
initial: 0,
303309
},
304310
{
305311
type: "select",
@@ -324,7 +330,7 @@ async function promptForMinimalConfig(
324330
},
325331
])
326332

327-
style = options.style
333+
style = options.style ?? "new-york"
328334
baseColor = options.tailwindBaseColor
329335
cssVariables = options.tailwindCssVariables
330336
}

‎packages/shadcn/src/registry/api.ts‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import path from "path"
22
import { Config, getTargetStyleFromConfig } from "@/src/utils/get-config"
3-
import { getProjectInfo } from "@/src/utils/get-project-info"
3+
import {
4+
getProjectInfo,
5+
getProjectTailwindVersionFromConfig,
6+
} from "@/src/utils/get-project-info"
47
import { handleError } from "@/src/utils/handle-error"
58
import { highlighter } from "@/src/utils/highlighter"
69
import { logger } from "@/src/utils/logger"
@@ -350,7 +353,10 @@ async function resolveRegistryDependencies(
350353
}
351354

352355
export async function registryGetTheme(name: string, config: Config) {
353-
const baseColor = await getRegistryBaseColor(name)
356+
const [baseColor, tailwindVersion] = await Promise.all([
357+
getRegistryBaseColor(name),
358+
getProjectTailwindVersionFromConfig(config),
359+
])
354360
if (!baseColor) {
355361
return null
356362
}
@@ -398,6 +404,11 @@ export async function registryGetTheme(name: string, config: Config) {
398404
}
399405
}
400406

407+
// Update theme to be v4 compatible.
408+
if (tailwindVersion === "v4") {
409+
theme.cssVars.light.radius = "0.6rem"
410+
}
411+
401412
return theme
402413
}
403414

‎packages/shadcn/src/utils/get-project-info.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -310,7 +310,7 @@ export async function getProjectConfig(
310310
export async function getProjectTailwindVersionFromConfig(
311311
config: Config
312312
): Promise<TailwindVersion> {
313-
if (!config.resolvedPaths.cwd) {
313+
if (!config.resolvedPaths?.cwd) {
314314
return "v3"
315315
}
316316

‎packages/shadcn/src/utils/updaters/update-css-vars.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,9 @@ export async function transformCssVars(
107107
from: undefined,
108108
})
109109

110-
let output = result.css.replace(/\/\* ---break--- \*\//g, "")
110+
let output = result.css
111+
112+
output = output.replace(/\/\* ---break--- \*\//g, "")
111113

112114
if (options.tailwindVersion === "v4") {
113115
output = output.replace(/(\n\s*\n)+/g, "\n\n")
@@ -121,7 +123,7 @@ function updateBaseLayerPlugin() {
121123
postcssPlugin: "update-base-layer",
122124
Once(root: Root) {
123125
const requiredRules = [
124-
{ selector: "*", apply: "border-border" },
126+
{ selector: "*", apply: "border-border outline-ring/50" },
125127
{ selector: "body", apply: "bg-background text-foreground" },
126128
]
127129

@@ -359,7 +361,7 @@ function updateCssVarsPluginV4(
359361
node.type === "rule" && node.selector === selector
360362
)
361363

362-
if (!ruleNode) {
364+
if (!ruleNode && Object.keys(vars).length > 0) {
363365
ruleNode = postcss.rule({
364366
selector,
365367
nodes: [],

‎packages/shadcn/test/utils/updaters/update-css-vars.test.ts‎

Lines changed: 39 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ describe("transformCssVars", () => {
4747
4848
@layer base {
4949
* {
50-
@apply border-border;
50+
@apply border-border outline-ring/50;
5151
}
5252
body {
5353
@apply bg-background text-foreground;
@@ -110,7 +110,7 @@ describe("transformCssVars", () => {
110110
111111
@layer base {
112112
* {
113-
@apply border-border;
113+
@apply border-border outline-ring/50;
114114
}
115115
body {
116116
@apply bg-background text-foreground;
@@ -176,6 +176,17 @@ describe("transformCssVars", () => {
176176
@apply bg-background text-foreground;
177177
}
178178
}
179+
180+
181+
182+
@layer base {
183+
* {
184+
@apply border-border outline-ring/50;
185+
}
186+
body {
187+
@apply bg-background text-foreground;
188+
}
189+
}
179190
"
180191
`)
181192
})
@@ -222,7 +233,7 @@ describe("transformCssVarsV4", () => {
222233
223234
@layer base {
224235
* {
225-
@apply border-border;
236+
@apply border-border outline-ring/50;
226237
}
227238
body {
228239
@apply bg-background text-foreground;
@@ -282,7 +293,7 @@ describe("transformCssVarsV4", () => {
282293
283294
@layer base {
284295
* {
285-
@apply border-border;
296+
@apply border-border outline-ring/50;
286297
}
287298
body {
288299
@apply bg-background text-foreground;
@@ -346,7 +357,7 @@ describe("transformCssVarsV4", () => {
346357
347358
@layer base {
348359
* {
349-
@apply border-border;
360+
@apply border-border outline-ring/50;
350361
}
351362
body {
352363
@apply bg-background text-foreground;
@@ -413,7 +424,7 @@ describe("transformCssVarsV4", () => {
413424
414425
@layer base {
415426
* {
416-
@apply border-border;
427+
@apply border-border outline-ring/50;
417428
}
418429
body {
419430
@apply bg-background text-foreground;
@@ -492,6 +503,15 @@ describe("transformCssVarsV4", () => {
492503
@apply bg-background text-foreground;
493504
}
494505
}
506+
507+
@layer base {
508+
* {
509+
@apply border-border outline-ring/50;
510+
}
511+
body {
512+
@apply bg-background text-foreground;
513+
}
514+
}
495515
"
496516
`)
497517
})
@@ -536,7 +556,7 @@ describe("transformCssVarsV4", () => {
536556
537557
@layer base {
538558
* {
539-
@apply border-border;
559+
@apply border-border outline-ring/50;
540560
}
541561
body {
542562
@apply bg-background text-foreground;
@@ -586,7 +606,7 @@ describe("transformCssVarsV4", () => {
586606
587607
@layer base {
588608
* {
589-
@apply border-border;
609+
@apply border-border outline-ring/50;
590610
}
591611
body {
592612
@apply bg-background text-foreground;
@@ -636,7 +656,7 @@ describe("transformCssVarsV4", () => {
636656
637657
@layer base {
638658
* {
639-
@apply border-border;
659+
@apply border-border outline-ring/50;
640660
}
641661
body {
642662
@apply bg-background text-foreground;
@@ -684,7 +704,7 @@ describe("transformCssVarsV4", () => {
684704
685705
@layer base {
686706
* {
687-
@apply border-border;
707+
@apply border-border outline-ring/50;
688708
}
689709
body {
690710
@apply bg-background text-foreground;
@@ -732,7 +752,7 @@ describe("transformCssVarsV4", () => {
732752
733753
@layer base {
734754
* {
735-
@apply border-border;
755+
@apply border-border outline-ring/50;
736756
}
737757
body {
738758
@apply bg-background text-foreground;
@@ -777,7 +797,7 @@ describe("transformCssVarsV4", () => {
777797
778798
@layer base {
779799
* {
780-
@apply border-border;
800+
@apply border-border outline-ring/50;
781801
}
782802
body {
783803
@apply bg-background text-foreground;
@@ -808,7 +828,7 @@ describe("transformCssVarsV4", () => {
808828
809829
@layer base {
810830
* {
811-
@apply border-border;
831+
@apply border-border outline-ring/50;
812832
}
813833
body {
814834
@apply bg-background text-foreground;
@@ -846,7 +866,7 @@ describe("transformCssVarsV4", () => {
846866
847867
@layer base {
848868
* {
849-
@apply border-border;
869+
@apply border-border outline-ring/50;
850870
}
851871
body {
852872
@apply bg-background text-foreground;
@@ -884,7 +904,7 @@ describe("transformCssVarsV4", () => {
884904
885905
@layer base {
886906
* {
887-
@apply border-border;
907+
@apply border-border outline-ring/50;
888908
}
889909
body {
890910
@apply bg-background text-foreground;
@@ -949,7 +969,7 @@ describe("transformCssVarsV4", () => {
949969
950970
@layer base {
951971
* {
952-
@apply border-border;
972+
@apply border-border outline-ring/50;
953973
}
954974
body {
955975
@apply bg-background text-foreground;
@@ -1024,7 +1044,7 @@ describe("transformCssVarsV4", () => {
10241044
10251045
@layer base {
10261046
* {
1027-
@apply border-border;
1047+
@apply border-border outline-ring/50;
10281048
}
10291049
body {
10301050
@apply bg-background text-foreground;
@@ -1095,7 +1115,7 @@ describe("transformCssVarsV4", () => {
10951115
10961116
@layer base {
10971117
* {
1098-
@apply border-border;
1118+
@apply border-border outline-ring/50;
10991119
}
11001120
body {
11011121
@apply bg-background text-foreground;
@@ -1168,7 +1188,7 @@ describe("transformCssVarsV4", () => {
11681188
11691189
@layer base {
11701190
* {
1171-
@apply border-border;
1191+
@apply border-border outline-ring/50;
11721192
}
11731193
body {
11741194
@apply bg-background text-foreground;

0 commit comments

Comments
 (0)