(4/n) shadcn: fix handling of sidebar colors (#6515)

* fix(shadcn): background, foreground and sidebar colors * chore: changeset * ci: update artifact
shadcn-ui · Jan 30, 2025 · d1eb24e · d1eb24e
1 parent 9a14c1d
commit d1eb24e
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 21 deletions.
diff --git a/.changeset/nine-llamas-sell.md b/.changeset/nine-llamas-sell.md
@@ -0,0 +1,5 @@
+---
+"shadcn": minor
+---
+
+fix handling of sidebar colors
diff --git a/.github/workflows/prerelease.yml b/.github/workflows/prerelease.yml
@@ -54,7 +54,7 @@ jobs:
           path: packages/shadcn
 
       - name: Upload packaged artifact
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: npm-package-shadcn@${{ steps.package-version.outputs.current-version }}-pr-${{ github.event.number }} # encode the PR number into the artifact name
           path: packages/shadcn/dist/index.js
diff --git a/packages/shadcn/src/utils/updaters/update-css-vars.ts b/packages/shadcn/src/utils/updaters/update-css-vars.ts
@@ -78,12 +78,19 @@ export async function transformCssVars(
 
   let plugins = [updateCssVarsPlugin(cssVars)]
 
+  if (options.cleanupDefaultNextStyles) {
+    plugins.push(cleanupDefaultNextStylesPlugin())
+  }
+
   if (options.tailwindVersion === "v4") {
-    plugins = [
-      addCustomVariant({ params: "dark (&:is(.dark *))" }),
-      updateCssVarsPluginV4(cssVars),
-      updateThemePlugin(cssVars),
-    ]
+    plugins = [addCustomVariant({ params: "dark (&:is(.dark *))" })]
+
+    if (options.cleanupDefaultNextStyles) {
+      plugins.push(cleanupDefaultNextStylesPlugin())
+    }
+
+    plugins.push(updateCssVarsPluginV4(cssVars))
+    plugins.push(updateThemePlugin(cssVars))
 
     if (options.tailwindConfig) {
       plugins.push(updateTailwindConfigPlugin(options.tailwindConfig))
@@ -92,10 +99,6 @@ export async function transformCssVars(
     }
   }
 
-  if (options.cleanupDefaultNextStyles) {
-    plugins.push(cleanupDefaultNextStylesPlugin())
-  }
-
   if (config.tailwind.cssVariables) {
     plugins.push(updateBaseLayerPlugin())
   }
@@ -367,7 +370,12 @@ function updateCssVarsPluginV4(
         }
 
         Object.entries(vars).forEach(([key, value]) => {
-          const prop = `--${key.replace(/^--/, "")}`
+          let prop = `--${key.replace(/^--/, "")}`
+
+          // Special case for sidebar-background.
+          if (prop === "--sidebar-background") {
+            prop = "--sidebar"
+          }
 
           if (isLocalHSLValue(value)) {
             value = `hsl(${value})`
@@ -450,12 +458,22 @@ function updateThemePlugin(cssVars: z.infer<typeof registryItemCssVarsSchema>) {
           break
         }
 
+        let prop =
+          isLocalHSLValue(value) || isColorValue(value)
+            ? `--color-${variable.replace(/^--/, "")}`
+            : `--${variable.replace(/^--/, "")}`
+        if (prop === "--color-sidebar-background") {
+          prop = "--color-sidebar"
+        }
+
+        let propValue = `var(--${variable})`
+        if (prop === "--color-sidebar") {
+          propValue = "var(--sidebar)"
+        }
+
         const cssVarNode = postcss.decl({
-          prop:
-            isLocalHSLValue(value) || isColorValue(value)
-              ? `--color-${variable.replace(/^--/, "")}`
-              : `--${variable.replace(/^--/, "")}`,
-          value: `var(--${variable})`,
+          prop,
+          value: propValue,
           raws: { semicolon: true },
         })
         const existingDecl = themeNode?.nodes?.find(

diff --git a/packages/shadcn/test/utils/updaters/update-css-vars.test.ts b/packages/shadcn/test/utils/updaters/update-css-vars.test.ts
@@ -729,7 +729,7 @@ describe("transformCssVarsV4", () => {
               --radius-lg: var(--radius);
               --radius-xl: calc(var(--radius) + 4px);
             }
-            
+
             @layer base {
         * {
           @apply border-border;
@@ -742,6 +742,51 @@ describe("transformCssVarsV4", () => {
     `)
   })
 
+  test("should use --sidebar for --sidebar-background", async () => {
+    expect(
+      await transformCssVars(
+        `@import "tailwindcss";
+        `,
+        {
+          light: {
+            "sidebar-background": "hsl(0 0% 98%)",
+          },
+          dark: {
+            "sidebar-background": "hsl(0 0% 10%)",
+          },
+        },
+        { tailwind: { cssVariables: true } },
+        { tailwindVersion: "v4" }
+      )
+    ).toMatchInlineSnapshot(`
+      "@import "tailwindcss";
+
+      @custom-variant dark (&:is(.dark *));
+
+      :root {
+        --sidebar: hsl(0 0% 98%);
+      }
+
+      .dark {
+        --sidebar: hsl(0 0% 10%);
+      }
+
+      @theme inline {
+        --color-sidebar: var(--sidebar);
+      }
+
+      @layer base {
+        * {
+          @apply border-border;
+        }
+        body {
+          @apply bg-background text-foreground;
+        }
+      }
+              "
+    `)
+  })
+
   test("should add plugin if not present", async () => {
     expect(
       await transformCssVars(
@@ -882,7 +927,7 @@ describe("transformCssVarsV4", () => {
       @custom-variant dark (&:is(.dark *));
 
       @theme inline {
-        
+
         @keyframes accordion-down {
           from {
             height: 0;
@@ -891,7 +936,7 @@ describe("transformCssVarsV4", () => {
             height: var(--radix-accordion-content-height);
           }
         }
-        
+
         @keyframes accordion-up {
           from {
             height: var(--radix-accordion-content-height);
@@ -1028,7 +1073,7 @@ describe("transformCssVarsV4", () => {
       @theme inline {
         --animate-accordion-down: accordion-down 0.2s ease-out;
         --animate-accordion-up: accordion-up 0.2s ease-out;
-        
+
         @keyframes accordion-down {
           from {
             height: 0;
@@ -1037,7 +1082,7 @@ describe("transformCssVarsV4", () => {
             height: var(--radix-accordion-content-height);
           }
         }
-        
+
         @keyframes accordion-up {
           from {
             height: var(--radix-accordion-content-height);