rayan/shadcn-ui
1
0
Fork 0
mirror of https://github.com/shadcn-ui/ui.git synced 2026-07-09 06:55:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* fix(shadcn): do not override existing vars

* test(shadcn): update snapshots

* chore: changeset
This commit is contained in:
shadcn
2025-02-21 20:58:02 +04:00
committed by GitHub
parent 3b90317e3c
commit a5122f9029
3 changed files with 16 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/ninety-needles-brake.md Normal file
View File

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

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

@@ -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)
}
})
})
},

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

@@ -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%);
}