refactor: transform css only in component

packages/cli/package.json

@@ -49,6 +49,7 @@
     "@babel/core": "^7.22.17",
     "@babel/parser": "^7.22.16",
     "@babel/plugin-transform-typescript": "^7.22.15",
+    "@vue/compiler-sfc": "^3.3.6",
     "chalk": "5.3.0",
     "commander": "^11.0.0",
     "cosmiconfig": "^8.3.6",

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

@@ -1,5 +1,7 @@
-import { SyntaxKind } from 'ts-morph'
 import type * as z from 'zod'
+import MagicString from 'magic-string'
+import { parse, walk } from '@vue/compiler-sfc'
+import { SyntaxKind } from 'ts-morph'
 import type { registryBaseColorSchema } from '@/src/utils/registry/schema'
 import type { Transformer } from '@/src/utils/transformers'
 
@@ -9,22 +11,32 @@ export const transformCssVars: Transformer = async ({
   baseColor,
 }) => {
   // No transform if using css variables.
-  if (config.tailwind?.cssVariables || !baseColor?.inlineColors)
+  if (config.tailwind?.cssVariables || !baseColor?.inlineColors || sourceFile.getFilePath().endsWith('ts'))
+    return sourceFile
+
+  const parsed = parse(sourceFile.getText())
+  const template = parsed.descriptor.template
+
+  if (!template)
     return sourceFile
 
   sourceFile.getDescendantsOfKind(SyntaxKind.StringLiteral).forEach((node) => {
+    if (template.loc.start.offset >= node.getPos())
+      return sourceFile
+
     const value = node.getText()
 
-    if (value.includes('cn(')) {
-      const splitted = value.split('\'').map(i => applyColorMapping(i, baseColor.inlineColors))
-      node.replaceWithText(`${splitted.join('\'')}`)
+    const hasClosingDoubleQuote = value.match(/"/g)?.length === 2
+    if (value.search('\'') === -1 && hasClosingDoubleQuote) {
+      const mapped = applyColorMapping(value.replace(/"/g, ''), baseColor.inlineColors)
+      node.replaceWithText(`"${mapped}"`)
     }
-    else if (value) {
-      const valueWithColorMapping = applyColorMapping(
-        value.replace(/"/g, ''),
-        baseColor.inlineColors,
-      )
-      node.replaceWithText(`"${valueWithColorMapping.trim()}"`)
+    else {
+      const s = new MagicString(value)
+      s.replace(/'(.*?)'/g, (substring) => {
+        return `'${applyColorMapping(substring.replace(/\'/g, ''), baseColor.inlineColors)}'`
+      })
+      node.replaceWithText(s.toString())
     }
   })
 
@@ -103,6 +115,6 @@ export function applyColorMapping(
     if (!lightMode.includes(className))
       lightMode.push(className)
   }
-
-  return `${lightMode.join(' ')} ${darkMode.join(' ').trim()}`
+  const combined = `${lightMode.join(' ').replace(/\'/g, '')} ${darkMode.join(' ').trim()}`.trim()
+  return `${combined}`
 }

packages/cli/test/utils/__snapshots__/transform-cjs-to-esm.test.ts.snap

@@ -1,8 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`handle tailwind config template correctly 1`] = `
-"
-import animate from \\"tailwindcss-animate\\"
+"import animate from \\"tailwindcss-animate\\"
 
 /** @type {import('tailwindcss').Config} */
 export default {
@@ -43,9 +42,7 @@ export default {
 `;
 
 exports[`handle tailwind config template correctly 2`] = `
-"
-
-import animate from \\"tailwindcss-animate\\"
+"import animate from \\"tailwindcss-animate\\"
 
 /** @type {import('tailwindcss').Config} */
 export default {

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

@@ -17,6 +17,6 @@ exports[`transform css vars 2`] = `
 exports[`transform css vars 3`] = `
 "<script setup lang=\\"ts\\"></script>
 <template>
-<div :class=\\"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>
+<div :class=\\"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>
 </template>\\""
 `;