From a5122f9029c91963f493e7348ef7681dad4834e5 Mon Sep 17 00:00:00 2001
From: shadcn <m@shadcn.com>
Date: Fri, 21 Feb 2025 20:58:02 +0400
Subject: [PATCH] fix(shadcn): do not override existing vars (#6721)

* fix(shadcn): do not override existing vars

* test(shadcn): update snapshots

* chore: changeset
---
 .changeset/ninety-needles-brake.md                     |  5 +++++
 packages/shadcn/src/utils/updaters/update-css-vars.ts  | 10 +++++++---
 .../shadcn/test/utils/updaters/update-css-vars.test.ts |  8 ++++----
 3 files changed, 16 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/ninety-needles-brake.md

diff --git a/.changeset/ninety-needles-brake.md b/.changeset/ninety-needles-brake.md
new file mode 100644
index 0000000000..d138c882cc
--- /dev/null
+++ b/.changeset/ninety-needles-brake.md
@@ -0,0 +1,5 @@
+---
+"shadcn": patch
+---
+
+do not overwrite user defined vars
diff --git a/packages/shadcn/src/utils/updaters/update-css-vars.ts b/packages/shadcn/src/utils/updaters/update-css-vars.ts
index 541036e3e4..b9edf25011 100644
--- a/packages/shadcn/src/utils/updaters/update-css-vars.ts
+++ b/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)
+          }
         })
       })
     },
diff --git a/packages/shadcn/test/utils/updaters/update-css-vars.test.ts b/packages/shadcn/test/utils/updaters/update-css-vars.test.ts
index 8cd0dd877b..16f723a8c0 100644
--- a/packages/shadcn/test/utils/updaters/update-css-vars.test.ts
+++ b/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%);
               }