fix(shadcn): do not override existing vars (#6721)

* fix(shadcn): do not override existing vars

* test(shadcn): update snapshots

* chore: changeset

Author: shadcn

.changeset/ninety-needles-brake.md

@@ -0,0 +1,5 @@
+---
+"shadcn": patch
+---
+
+do not overwrite user defined vars

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

@@ -392,9 +392,13 @@ function updateCssVarsPluginV4(
             (node): node is postcss.Declaration =>
               node.type === "decl" && node.prop === prop
           )
-          existingDecl
-            ? existingDecl.replaceWith(newDecl)
-            : ruleNode?.append(newDecl)
+
+          // Do not override existing declarations.
+          // We do not want new components to override existing vars.
+          // Keep user defined vars.
+          if (!existingDecl) {
+            ruleNode?.append(newDecl)
+          }
         })
       })
     },

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

@@ -274,7 +274,7 @@ describe("transformCssVarsV4", () => {
 
       @custom-variant dark (&:is(.dark *));
               :root {
-                --background: hsl(215 20.2% 65.1%);
+                --background: hsl(210 40% 98%);
                 --foreground: hsl(222.2 84% 4.9%);
                 --primary: hsl(215 20.2% 65.1%);
               }
@@ -338,7 +338,7 @@ describe("transformCssVarsV4", () => {
 
       @custom-variant dark (&:is(.dark *));
               :root {
-                --background: hsl(215 20.2% 65.1%);
+                --background: hsl(210 40% 98%);
                 --foreground: hsl(222.2 84% 4.9%);
                 --primary: hsl(215 20.2% 65.1%);
               }
@@ -403,7 +403,7 @@ describe("transformCssVarsV4", () => {
 
       @custom-variant dark (&:is(.dark *));
               :root {
-                --background: hsl(215 20.2% 65.1%);
+                --background: hsl(210 40% 98%);
                 --foreground: hsl(222.2 84% 4.9%);
                 --primary: hsl(215 20.2% 65.1%);
                 --foo: 0.5rem;
@@ -478,7 +478,7 @@ describe("transformCssVarsV4", () => {
 
       @custom-variant dark (&:is(.dark *));
               :root {
-                --background: hsl(215 20.2% 65.1%);
+                --background: hsl(210 40% 98%);
                 --foreground: hsl(222.2 84% 4.9%);
                 --primary: hsl(215 20.2% 65.1%);
               }