diff --git a/.changeset/hip-ads-destroy.md b/.changeset/hip-ads-destroy.md new file mode 100644 index 00000000000..45277802101 --- /dev/null +++ b/.changeset/hip-ads-destroy.md @@ -0,0 +1,5 @@ +--- +"shadcn": patch +--- + +remove next.js default vars diff --git a/packages/shadcn/src/utils/updaters/update-css-vars.ts b/packages/shadcn/src/utils/updaters/update-css-vars.ts index 0006d1a288e..e4272b67c1b 100644 --- a/packages/shadcn/src/utils/updaters/update-css-vars.ts +++ b/packages/shadcn/src/utils/updaters/update-css-vars.ts @@ -183,6 +183,27 @@ function updateCssVarsPlugin( } } +function removeConflictVars(root: Rule | Root) { + const rootRule = root.nodes.find( + (node): node is Rule => node.type === "rule" && node.selector === ":root" + ) + + if (rootRule) { + const propsToRemove = ["--background", "--foreground"] + + rootRule.nodes + .filter( + (node): node is postcss.Declaration => + node.type === "decl" && propsToRemove.includes(node.prop) + ) + .forEach((node) => node.remove()) + + if (rootRule.nodes.length === 0) { + rootRule.remove() + } + } +} + function cleanupDefaultNextStylesPlugin() { return { postcssPlugin: "cleanup-default-next-styles", @@ -197,7 +218,9 @@ function cleanupDefaultNextStylesPlugin() { (node): node is postcss.Declaration => node.type === "decl" && node.prop === "color" && - node.value === "rgb(var(--foreground-rgb))" + ["rgb(var(--foreground-rgb))", "var(--foreground)"].includes( + node.value + ) ) ?.remove() @@ -208,7 +231,8 @@ function cleanupDefaultNextStylesPlugin() { node.type === "decl" && node.prop === "background" && // This is only going to run on create project, so all good. - node.value.startsWith("linear-gradient") + (node.value.startsWith("linear-gradient") || + node.value === "var(--background)") ) }) ?.remove() @@ -218,6 +242,21 @@ function cleanupDefaultNextStylesPlugin() { bodyRule.remove() } } + + removeConflictVars(root) + + const darkRootRule = root.nodes.find( + (node): node is Rule => + node.type === "atrule" && + node.params === "(prefers-color-scheme: dark)" + ) + + if (darkRootRule) { + removeConflictVars(darkRootRule) + if (darkRootRule.nodes.length === 0) { + darkRootRule.remove() + } + } }, } } diff --git a/packages/shadcn/test/utils/schema/__snapshots__/registry-resolve-items-tree.test.ts.snap b/packages/shadcn/test/utils/schema/__snapshots__/registry-resolve-items-tree.test.ts.snap index 86cf01a5c79..9bdcd791efa 100644 --- a/packages/shadcn/test/utils/schema/__snapshots__/registry-resolve-items-tree.test.ts.snap +++ b/packages/shadcn/test/utils/schema/__snapshots__/registry-resolve-items-tree.test.ts.snap @@ -251,7 +251,7 @@ const Input = React.forwardRef(