fix(shadcn): default next styles are not completely cleared (#4922)

* fix(shadcn):  default next styles are not completely cleared

* chore: add changeset

* fix(shadcn): tests

---------

Co-authored-by: shadcn <m@shadcn.com>

.changeset/hip-ads-destroy.md

@@ -0,0 +1,5 @@
+---
+"shadcn": patch
+---
+
+remove next.js default vars

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()
+        }
+      }
     },
   }
 }

packages/shadcn/test/utils/schema/__snapshots__/registry-resolve-items-tree.test.ts.snap

@@ -251,7 +251,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         ref={ref}