feat(shadcn): fix transformCssVars function (#8186)

* feat(shadcn): fix transformCssVars function

* test(shadcn): update snapshots

* chore: add changeset

---------

Co-authored-by: shadcn <[email protected]>

Author: imskyleen

.changeset/hip-pianos-fry.md

@@ -0,0 +1,5 @@
+---
+"shadcn": patch
+---
+
+fix transformCssVars function with prefix

packages/shadcn/src/utils/transformers/transform-css-vars.ts

@@ -31,13 +31,10 @@ export const transformCssVars: Transformer = async ({
   //   }
   // }
   sourceFile.getDescendantsOfKind(SyntaxKind.StringLiteral).forEach((node) => {
-    const value = node.getText()
-    if (value) {
-      const valueWithColorMapping = applyColorMapping(
-        value.replace(/"/g, ""),
-        baseColor.inlineColors
-      )
-      node.replaceWithText(`"${valueWithColorMapping.trim()}"`)
+    const raw = node.getLiteralText()
+    const mapped = applyColorMapping(raw, baseColor.inlineColors).trim()
+    if (mapped !== raw) {
+      node.setLiteralValue(mapped)
     }
   })
 

packages/shadcn/test/utils/__snapshots__/transform-css-vars.test.ts.snap

@@ -12,22 +12,22 @@ exports[`transform css vars 2`] = `
 "import * as React from "react"
 export function Foo() {
 	return <div className="bg-white hover:bg-stone-100 text-stone-50 sm:focus:text-stone-900 dark:bg-stone-950 dark:hover:bg-stone-800 dark:text-stone-900 dark:sm:focus:text-stone-50">foo</div>
-}""
+}"
     "
 `;
 
 exports[`transform css vars 3`] = `
 "import * as React from "react"
 export function Foo() {
 	return <div className={cn("bg-white hover:bg-stone-100 dark:bg-stone-950 dark:hover:bg-stone-800", true && "text-stone-50 sm:focus:text-stone-900 dark:text-stone-900 dark:sm:focus:text-stone-50")}>foo</div>
-}""
+}"
     "
 `;
 
 exports[`transform css vars 4`] = `
 "import * as React from "react"
 export function Foo() {
 	return <div className={cn("bg-white border border-stone-200 dark:bg-stone-950 dark:border-stone-800")}>foo</div>
-}""
+}"
     "
 `;

packages/shadcn/test/utils/__snapshots__/transform-tw-prefix.test.ts.snap

@@ -27,7 +27,7 @@ export function Foo() {
 exports[`transform tailwind prefix 4`] = `
 "import * as React from "react"
 export function Foo() {
-	return <div className={cn("tw:bg-background hover:tw:bg-muted", true && "tw:text-primary-foreground sm:focus:tw:text-accent-foreground")}>foo</div>
+	return <div className={cn("tw:bg-white hover:tw:bg-stone-100 dark:tw:bg-stone-950 dark:hover:tw:bg-stone-800", true && "tw:text-stone-50 sm:focus:tw:text-stone-900 dark:tw:text-stone-900 dark:sm:focus:tw:text-stone-50")}>foo</div>
 }
     "
 `;