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

* fix(shadcn): do not override existing vars * test(shadcn): update snapshots * chore: changeset
shadcn-ui · Feb 21, 2025 · a5122f9 · a5122f9
1 parent 3b90317
commit a5122f9
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 7 deletions.
diff --git a/.changeset/ninety-needles-brake.md 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
@@ -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
@@ -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%);
               }