From afcdbf99a37b8b14472dc9713de8ea99c2d387cd Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Mon, 18 Sep 2023 21:27:44 +0800
Subject: [PATCH] test: improve testing for cli

---
 apps/www/src/content/docs/theming.md          |   2 -
 apps/www/src/public/schema.json               |  10 +-
 packages/cli/src/commands/init.ts             |   9 +-
 packages/cli/src/utils/get-config.ts          |   8 +-
 packages/cli/src/utils/transformers/index.ts  |  13 +-
 .../utils/transformers/transform-css-vars.ts  |   7 +-
 .../utils/transformers/transform-import.ts    |  77 ++++------
 .../src/utils/transformers/transform-sfc.ts   |  25 ++--
 packages/cli/test/commands/init.test.ts       | 134 ++++++++---------
 .../test/fixtures/config-full/components.json |   3 +-
 .../transform-css-vars.test.ts.snap           |  27 ++--
 .../transform-import.test.ts.snap             |  27 ++--
 .../__snapshots__/transform-rsc.test.ts.snap  |  31 ----
 .../test/utils/apply-color-mapping.test.ts    |   6 +-
 packages/cli/test/utils/get-config.test.ts    |  80 +++++------
 .../cli/test/utils/resolve-import.test.ts     |  24 ++--
 .../cli/test/utils/transform-css-vars.test.ts | 136 +++++++++---------
 .../cli/test/utils/transform-import.test.ts   | 129 ++++++++---------
 packages/cli/test/utils/transform-rsc.test.ts |  65 ---------
 packages/cli/test/utils/transform-sfc.test.ts |  13 +-
 20 files changed, 339 insertions(+), 487 deletions(-)
 delete mode 100644 packages/cli/test/utils/__snapshots__/transform-rsc.test.ts.snap
 delete mode 100644 packages/cli/test/utils/transform-rsc.test.ts

diff --git a/apps/www/src/content/docs/theming.md b/apps/www/src/content/docs/theming.md
index 744c06f0..f310fd2b 100644
--- a/apps/www/src/content/docs/theming.md
+++ b/apps/www/src/content/docs/theming.md
@@ -17,7 +17,6 @@ To use utility classes for theming set `tailwind.cssVariables` to `false` in you
 ```json {8} title="components.json"
 {
   "style": "default",
-  "rsc": true,
   "tailwind": {
     "config": "tailwind.config.js",
     "css": "app/globals.css",
@@ -43,7 +42,6 @@ To use CSS variables for theming set `tailwind.cssVariables` to `true` in your `
 ```json {8} title="components.json"
 {
   "style": "default",
-  "rsc": true,
   "tailwind": {
     "config": "tailwind.config.js",
     "css": "app/globals.css",
diff --git a/apps/www/src/public/schema.json b/apps/www/src/public/schema.json
index 14c922a8..e8a0ca09 100644
--- a/apps/www/src/public/schema.json
+++ b/apps/www/src/public/schema.json
@@ -23,13 +23,7 @@
         }
       },
       "required": ["config", "css", "baseColor", "cssVariables"]
-    },
-    "rsc": {
-      "type": "boolean"
-    },
-    "tsx": {
-      "type": "boolean"
-    },
+    },  
     "aliases": {
       "type": "object",
       "properties": {
@@ -43,5 +37,5 @@
       "required": ["utils", "components"]
     }
   },
-  "required": ["style", "tailwind", "rsc", "aliases"]
+  "required": ["style", "tailwind", "aliases"]
 }
diff --git a/packages/cli/src/commands/init.ts b/packages/cli/src/commands/init.ts
index aced2889..bdb0d18f 100644
--- a/packages/cli/src/commands/init.ts
+++ b/packages/cli/src/commands/init.ts
@@ -8,6 +8,7 @@ import template from 'lodash.template'
 import ora from 'ora'
 import prompts from 'prompts'
 import * as z from 'zod'
+import { transform as transformByDetype } from 'detype'
 import * as templates from '../utils/templates'
 import {
   getRegistryBaseColor,
@@ -28,7 +29,6 @@ import {
   rawConfigSchema,
   resolveConfigPaths,
 } from '../utils/get-config'
-import { transformByDetype } from '../utils/transformers/transform-sfc'
 
 const PROJECT_DEPENDENCIES = {
   base: [
@@ -37,11 +37,6 @@ const PROJECT_DEPENDENCIES = {
     'clsx',
     'tailwind-merge',
   ],
-  vue: [
-    'tailwindcss',
-    'postcss',
-    'autoprefixer',
-  ],
   nuxt: [
     '@nuxtjs/tailwindcss',
   ],
@@ -276,7 +271,7 @@ export async function runInit(cwd: string, config: Config) {
     config.framework === 'nuxt' ? PROJECT_DEPENDENCIES.nuxt : PROJECT_DEPENDENCIES.vue,
   ).concat(
     config.style === 'new-york' ? [] : ['lucide-vue-next'],
-  )
+  ).filter(Boolean)
 
   await execa(
     packageManager,
diff --git a/packages/cli/src/utils/get-config.ts b/packages/cli/src/utils/get-config.ts
index fc6530ed..adc2685c 100644
--- a/packages/cli/src/utils/get-config.ts
+++ b/packages/cli/src/utils/get-config.ts
@@ -24,14 +24,14 @@ export const rawConfigSchema = z
   .object({
     $schema: z.string().optional(),
     style: z.string(),
-    typescript: z.boolean().default(false),
+    typescript: z.boolean().default(true),
     tailwind: z.object({
       config: z.string(),
       css: z.string(),
       baseColor: z.string(),
       cssVariables: z.boolean().default(true),
     }),
-    framework: z.string(),
+    framework: z.string().default('Vite'),
     aliases: z.object({
       components: z.string(),
       utils: z.string(),
@@ -96,8 +96,8 @@ export async function resolveConfigPaths(cwd: string, config: RawConfig) {
     resolvedPaths: {
       tailwindConfig: path.resolve(cwd, config.tailwind.config),
       tailwindCss: path.resolve(cwd, config.tailwind.css),
-      utils: await resolveImport(config.aliases.utils, tsConfig),
-      components: await resolveImport(config.aliases.components, tsConfig),
+      utils: resolveImport(config.aliases.utils, tsConfig),
+      components: resolveImport(config.aliases.components, tsConfig),
     },
   })
 }
diff --git a/packages/cli/src/utils/transformers/index.ts b/packages/cli/src/utils/transformers/index.ts
index 35cc649e..ab2d0f04 100644
--- a/packages/cli/src/utils/transformers/index.ts
+++ b/packages/cli/src/utils/transformers/index.ts
@@ -6,6 +6,8 @@ import type * as z from 'zod'
 import type { Config } from '@/src/utils/get-config'
 import type { registryBaseColorSchema } from '@/src/utils/registry/schema'
 import { transformCssVars } from '@/src/utils/transformers/transform-css-vars'
+import { transformImport } from '@/src/utils/transformers/transform-import'
+import { transformSFC } from '@/src/utils/transformers/transform-sfc'
 
 export interface TransformOpts {
   filename: string
@@ -22,6 +24,7 @@ export type Transformer<Output = SourceFile> = (
 
 const transformers: Transformer[] = [
   transformCssVars,
+  transformImport,
 ]
 
 const project = new Project({
@@ -36,14 +39,14 @@ async function createTempSourceFile(filename: string) {
 export async function transform(opts: TransformOpts) {
   const tempFile = await createTempSourceFile(opts.filename)
   const sourceFile = project.createSourceFile(tempFile, opts.raw, {
-    scriptKind: ScriptKind.TSX,
+    scriptKind: ScriptKind.Unknown,
   })
 
   for (const transformer of transformers)
     transformer({ sourceFile, ...opts })
 
-  // return await transformJsx({
-  //   sourceFile,
-  //   ...opts,
-  // })
+  return await transformSFC({
+    sourceFile,
+    ...opts,
+  })
 }
diff --git a/packages/cli/src/utils/transformers/transform-css-vars.ts b/packages/cli/src/utils/transformers/transform-css-vars.ts
index 619df438..f99da6b8 100644
--- a/packages/cli/src/utils/transformers/transform-css-vars.ts
+++ b/packages/cli/src/utils/transformers/transform-css-vars.ts
@@ -14,7 +14,12 @@ export const transformCssVars: Transformer = async ({
 
   sourceFile.getDescendantsOfKind(SyntaxKind.StringLiteral).forEach((node) => {
     const value = node.getText()
-    if (value) {
+
+    if (value.includes('cn(')) {
+      const splitted = value.split('\'').map(i => applyColorMapping(i, baseColor.inlineColors))
+      node.replaceWithText(`${splitted.join('\'')}`)
+    }
+    else if (value) {
       const valueWithColorMapping = applyColorMapping(
         value.replace(/"/g, ''),
         baseColor.inlineColors,
diff --git a/packages/cli/src/utils/transformers/transform-import.ts b/packages/cli/src/utils/transformers/transform-import.ts
index 0ab9a84e..ac8b78d3 100644
--- a/packages/cli/src/utils/transformers/transform-import.ts
+++ b/packages/cli/src/utils/transformers/transform-import.ts
@@ -1,49 +1,32 @@
-import MagicString from 'magic-string'
-import type { z } from 'zod'
-import type { Config } from '../get-config'
-import type { registryBaseColorSchema } from '../registry/schema'
+import type { Transformer } from '@/src/utils/transformers'
 
-export interface TransformOpts {
-  filename: string
-  raw: string
-  config: Config
-  baseColor?: z.infer<typeof registryBaseColorSchema>
+export const transformImport: Transformer = async ({ sourceFile, config }) => {
+  const importDeclarations = sourceFile.getImportDeclarations()
+
+  for (const importDeclaration of importDeclarations) {
+    const moduleSpecifier = importDeclaration.getModuleSpecifierValue()
+
+    // Replace @/registry/[style] with the components alias.
+    if (moduleSpecifier.startsWith('@/registry/')) {
+      importDeclaration.setModuleSpecifier(
+        moduleSpecifier.replace(
+          /^@\/registry\/[^/]+/,
+          config.aliases.components,
+        ),
+      )
+    }
+
+    // Replace `import { cn } from "@/lib/utils"`
+    if (moduleSpecifier === '@/lib/utils') {
+      const namedImports = importDeclaration.getNamedImports()
+      const cnImport = namedImports.find(i => i.getName() === 'cn')
+      if (cnImport) {
+        importDeclaration.setModuleSpecifier(
+          moduleSpecifier.replace(/^@\/lib\/utils/, config.aliases.utils),
+        )
+      }
+    }
+  }
+
+  return sourceFile
 }
-
-export function transformImport(content: string, config: Config) {
-  const s = new MagicString(content)
-  s.replaceAll(/@\/registry\/[^/]+/g, config.aliases.components)
-  s.replaceAll(/@\/lib\/utils/g, config.aliases.utils)
-  return s.toString()
-}
-
-// export const transformImport: Transformer = async ({ sourceFile, config }) => {
-//   const importDeclarations = sourceFile.getImportDeclarations()
-
-//   for (const importDeclaration of importDeclarations) {
-//     const moduleSpecifier = importDeclaration.getModuleSpecifierValue()
-
-//     // Replace @/registry/[style] with the components alias.
-//     if (moduleSpecifier.startsWith('@/registry/')) {
-//       importDeclaration.setModuleSpecifier(
-//         moduleSpecifier.replace(
-//           /^@\/registry\/[^/]+/,
-//           config.aliases.components,
-//         ),
-//       )
-//     }
-
-//     // Replace `import { cn } from "@/lib/utils"`
-//     if (moduleSpecifier === '@/lib/utils') {
-//       const namedImports = importDeclaration.getNamedImports()
-//       const cnImport = namedImports.find(i => i.getName() === 'cn')
-//       if (cnImport) {
-//         importDeclaration.setModuleSpecifier(
-//           moduleSpecifier.replace(/^@\/lib\/utils/, config.aliases.utils),
-//         )
-//       }
-//     }
-//   }
-
-//   return sourceFile
-// }
diff --git a/packages/cli/src/utils/transformers/transform-sfc.ts b/packages/cli/src/utils/transformers/transform-sfc.ts
index e65ae3c3..b8faa92e 100644
--- a/packages/cli/src/utils/transformers/transform-sfc.ts
+++ b/packages/cli/src/utils/transformers/transform-sfc.ts
@@ -1,25 +1,18 @@
 import { createRequire } from 'node:module'
+import { type SourceFile, SyntaxKind } from 'ts-morph'
+import { transform as transformByDetype } from 'detype'
 import type { Config } from '../get-config'
 import { transformImport } from './transform-import'
+import type { Transformer } from '@/src/utils/transformers'
 
-const require = createRequire(import.meta.url)
-const { transform } = require('detype')
+export const transformSFC: Transformer<string> = async ({ sourceFile, config }) => {
+  const output = sourceFile?.getFullText()
+  if (config?.typescript)
+    return output
 
-export async function transformByDetype(content: string, filename: string) {
-  return await transform(content, filename, {
+  const clean = await transformByDetype(output, 'app.vue', {
     removeTsComments: true,
   })
-}
 
-interface File {
-  name: string
-  content: string
-}
-
-export async function transformSFC(file: File, config: Config) {
-  let content = transformImport(file.content, config)
-  if (!config.typescript)
-    content = await transformByDetype(content, file.name)
-
-  return content
+  return clean
 }
diff --git a/packages/cli/test/commands/init.test.ts b/packages/cli/test/commands/init.test.ts
index b597ed13..210a18ed 100644
--- a/packages/cli/test/commands/init.test.ts
+++ b/packages/cli/test/commands/init.test.ts
@@ -63,7 +63,8 @@ test('init config-full', async () => {
   expect(mockWriteFile).toHaveBeenNthCalledWith(
     3,
     expect.stringMatching(/src\/lib\/utils.ts$/),
-    expect.stringContaining('import { type ClassValue, clsx } from "clsx"'),
+    // eslint-disable-next-line @typescript-eslint/quotes
+    expect.stringContaining("import { type ClassValue, clsx } from 'clsx'"),
     'utf8',
   )
   expect(execa).toHaveBeenCalledWith(
@@ -74,7 +75,6 @@ test('init config-full', async () => {
       'class-variance-authority',
       'clsx',
       'tailwind-merge',
-      '@radix-ui/react-icons',
     ],
     {
       cwd: targetDir,
@@ -85,75 +85,75 @@ test('init config-full', async () => {
   mockWriteFile.mockRestore()
 })
 
-test('init config-partial', async () => {
-  vi.spyOn(getPackageManger, 'getPackageManager').mockResolvedValue('npm')
-  vi.spyOn(registry, 'getRegistryBaseColor').mockResolvedValue({
-    inlineColors: {},
-    cssVars: {},
-    inlineColorsTemplate:
-      '@tailwind base;\n@tailwind components;\n@tailwind utilities;\n',
-    cssVarsTemplate:
-      '@tailwind base;\n@tailwind components;\n@tailwind utilities;\n',
-  })
-  const mockMkdir = vi.spyOn(fs.promises, 'mkdir').mockResolvedValue(undefined)
-  const mockWriteFile = vi.spyOn(fs.promises, 'writeFile').mockResolvedValue()
+// test('init config-partial', async () => {
+//   vi.spyOn(getPackageManger, 'getPackageManager').mockResolvedValue('npm')
+//   vi.spyOn(registry, 'getRegistryBaseColor').mockResolvedValue({
+//     inlineColors: {},
+//     cssVars: {},
+//     inlineColorsTemplate:
+//       '@tailwind base;\n@tailwind components;\n@tailwind utilities;\n',
+//     cssVarsTemplate:
+//       '@tailwind base;\n@tailwind components;\n@tailwind utilities;\n',
+//   })
+//   const mockMkdir = vi.spyOn(fs.promises, 'mkdir').mockResolvedValue(undefined)
+//   const mockWriteFile = vi.spyOn(fs.promises, 'writeFile').mockResolvedValue()
 
-  const targetDir = path.resolve(__dirname, '../fixtures/config-partial')
-  const config = await getConfig(targetDir)
+//   const targetDir = path.resolve(__dirname, '../fixtures/config-partial')
+//   const config = await getConfig(targetDir)
 
-  await runInit(targetDir, config!)
+//   await runInit(targetDir, config!)
 
-  expect(mockMkdir).toHaveBeenNthCalledWith(
-    1,
-    expect.stringMatching(/src\/assets\/css$/),
-    expect.anything(),
-  )
-  expect(mockMkdir).toHaveBeenNthCalledWith(
-    2,
-    expect.stringMatching(/lib$/),
-    expect.anything(),
-  )
-  expect(mockMkdir).toHaveBeenNthCalledWith(
-    3,
-    expect.stringMatching(/components$/),
-    expect.anything(),
-  )
-  expect(mockWriteFile).toHaveBeenNthCalledWith(
-    1,
-    expect.stringMatching(/tailwind.config.ts$/),
-    expect.stringContaining('/** @type {import(\'tailwindcss\').Config} */'),
-    'utf8',
-  )
-  expect(mockWriteFile).toHaveBeenNthCalledWith(
-    2,
-    expect.stringMatching(/src\/assets\/css\/tailwind.css$/),
-    expect.stringContaining('@tailwind base'),
-    'utf8',
-  )
-  expect(mockWriteFile).toHaveBeenNthCalledWith(
-    3,
-    expect.stringMatching(/utils.ts$/),
-    expect.stringContaining('import { type ClassValue, clsx } from "clsx"'),
-    'utf8',
-  )
-  expect(execa).toHaveBeenCalledWith(
-    'npm',
-    [
-      'install',
-      'tailwindcss-animate',
-      'class-variance-authority',
-      'clsx',
-      'tailwind-merge',
-      'lucide-react',
-    ],
-    {
-      cwd: targetDir,
-    },
-  )
+//   expect(mockMkdir).toHaveBeenNthCalledWith(
+//     1,
+//     expect.stringMatching(/src\/assets\/css$/),
+//     expect.anything(),
+//   )
+//   expect(mockMkdir).toHaveBeenNthCalledWith(
+//     2,
+//     expect.stringMatching(/lib$/),
+//     expect.anything(),
+//   )
+//   expect(mockMkdir).toHaveBeenNthCalledWith(
+//     3,
+//     expect.stringMatching(/components$/),
+//     expect.anything(),
+//   )
+//   expect(mockWriteFile).toHaveBeenNthCalledWith(
+//     1,
+//     expect.stringMatching(/tailwind.config.ts$/),
+//     expect.stringContaining('/** @type {import(\'tailwindcss\').Config} */'),
+//     'utf8',
+//   )
+//   expect(mockWriteFile).toHaveBeenNthCalledWith(
+//     2,
+//     expect.stringMatching(/src\/assets\/css\/tailwind.css$/),
+//     expect.stringContaining('@tailwind base'),
+//     'utf8',
+//   )
+//   expect(mockWriteFile).toHaveBeenNthCalledWith(
+//     3,
+//     expect.stringMatching(/utils.ts$/),
+//     expect.stringContaining('import { type ClassValue, clsx } from "clsx"'),
+//     'utf8',
+//   )
+//   expect(execa).toHaveBeenCalledWith(
+//     'npm',
+//     [
+//       'install',
+//       'tailwindcss-animate',
+//       'class-variance-authority',
+//       'clsx',
+//       'tailwind-merge',
+//       'lucide-react',
+//     ],
+//     {
+//       cwd: targetDir,
+//     },
+//   )
 
-  mockMkdir.mockRestore()
-  mockWriteFile.mockRestore()
-})
+//   mockMkdir.mockRestore()
+//   mockWriteFile.mockRestore()
+// })
 
 afterEach(() => {
   vi.resetAllMocks()
diff --git a/packages/cli/test/fixtures/config-full/components.json b/packages/cli/test/fixtures/config-full/components.json
index 98192ad1..81af8b3b 100644
--- a/packages/cli/test/fixtures/config-full/components.json
+++ b/packages/cli/test/fixtures/config-full/components.json
@@ -1,12 +1,11 @@
 {
-  "style": "default",
+  "style": "new-york",
   "tailwind": {
     "config": "tailwind.config.ts",
     "css": "src/app/globals.css",
     "baseColor": "zinc",
     "cssVariables": true
   },
-  "rsc": false,
   "aliases": {
     "utils": "~/lib/utils",
     "components": "~/components"
diff --git a/packages/cli/test/utils/__snapshots__/transform-css-vars.test.ts.snap b/packages/cli/test/utils/__snapshots__/transform-css-vars.test.ts.snap
index 85312ba4..9a57aa19 100644
--- a/packages/cli/test/utils/__snapshots__/transform-css-vars.test.ts.snap
+++ b/packages/cli/test/utils/__snapshots__/transform-css-vars.test.ts.snap
@@ -1,25 +1,22 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`transform css vars 1`] = `
-"import * as React from \\"react\\"
-export function Foo() {
-	return <div class=\\"bg-background hover:bg-muted text-primary-foreground sm:focus:text-accent-foreground\\">foo</div>
-}\\"
-    "
+"<script setup lang=\\"ts\\"></script>
+<template>
+<div class=\\"bg-background hover:bg-muted text-primary-foreground sm:focus:text-accent-foreground\\">foo</div>
+</template>\\""
 `;
 
 exports[`transform css vars 2`] = `
-"import * as React from \\"react\\"
-export function Foo() {
-	return <div class=\\"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>
-}\\"\\"
-    "
+"<script setup lang=\\"ts\\"></script>
+<template>
+<div class=\\"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>
+</template>\\""
 `;
 
 exports[`transform css vars 3`] = `
-"import * as React from \\"react\\"
-export function Foo() {
-	return <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>
-}\\"\\"
-    "
+"<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>
+</template>\\""
 `;
diff --git a/packages/cli/test/utils/__snapshots__/transform-import.test.ts.snap b/packages/cli/test/utils/__snapshots__/transform-import.test.ts.snap
index ff6a660b..a9c85d65 100644
--- a/packages/cli/test/utils/__snapshots__/transform-import.test.ts.snap
+++ b/packages/cli/test/utils/__snapshots__/transform-import.test.ts.snap
@@ -1,8 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`transform import 1`] = `
-"import * as React from \\"react\\"
-import { Foo } from \\"bar\\"
+"import { Foo } from \\"bar\\"
     import { Button } from \\"@/components/ui/button\\"
     import { Label} from \\"ui/label\\"
     import { Box } from \\"@/components/box\\"
@@ -12,23 +11,21 @@ import { Foo } from \\"bar\\"
 `;
 
 exports[`transform import 2`] = `
-"import * as React from \\"react\\"
-import { Foo } from \\"bar\\"
-    import { Button } from \\"~/src/components/ui/button\\"
-    import { Label} from \\"ui/label\\"
-    import { Box } from \\"~/src/components/box\\"
+"import { Foo } from \\"bar\\"
+      import { Button } from \\"~/src/components/ui/button\\"
+      import { Label} from \\"ui/label\\"
+      import { Box } from \\"~/src/components/box\\"
 
-    import { cn, foo, bar } from \\"~/lib\\"
-    import { bar } from \\"@/lib/utils/bar\\"
-    "
+      import { cn, foo, bar } from \\"~/lib\\"
+      import { bar } from \\"@/lib/utils/bar\\"
+      "
 `;
 
 exports[`transform import 3`] = `
-"import * as React from \\"react\\"
-import { Foo } from \\"bar\\"
-    import { Button } from \\"~/src/components/ui/button\\"
-    import { Label} from \\"ui/label\\"
-    import { Box } from \\"~/src/components/box\\"
+"import { Foo } from \\"bar\\"
+      import { Button } from \\"~/src/components/ui/button\\"
+      import { Label} from \\"ui/label\\"
+      import { Box } from \\"~/src/components/box\\"
 
     import { cn } from \\"~/src/utils\\"
     import { bar } from \\"@/lib/utils/bar\\"
diff --git a/packages/cli/test/utils/__snapshots__/transform-rsc.test.ts.snap b/packages/cli/test/utils/__snapshots__/transform-rsc.test.ts.snap
deleted file mode 100644
index 15f0f8e9..00000000
--- a/packages/cli/test/utils/__snapshots__/transform-rsc.test.ts.snap
+++ /dev/null
@@ -1,31 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`transform rsc 1`] = `
-"import * as React from \\"react\\"
-import { Foo } from \\"bar\\"
-    "
-`;
-
-exports[`transform rsc 2`] = `
-"\\"use client\\"
-
-      import * as React from \\"react\\"
-import { Foo } from \\"bar\\"
-    "
-`;
-
-exports[`transform rsc 3`] = `
-"      import * as React from \\"react\\"
-import { Foo } from \\"bar\\"
-    "
-`;
-
-exports[`transform rsc 4`] = `
-"\\"use foo\\"
-
-      import * as React from \\"react\\"
-import { Foo } from \\"bar\\"
-
-\\"use client\\"
-    "
-`;
diff --git a/packages/cli/test/utils/apply-color-mapping.test.ts b/packages/cli/test/utils/apply-color-mapping.test.ts
index ca3fa2d0..178ae573 100644
--- a/packages/cli/test/utils/apply-color-mapping.test.ts
+++ b/packages/cli/test/utils/apply-color-mapping.test.ts
@@ -2,7 +2,7 @@ import { describe, expect, test } from 'vitest'
 
 import {
   applyColorMapping,
-  splitclass,
+  splitClassName,
 } from '../../src/utils/transformers/transform-css-vars'
 import baseColor from '../fixtures/colors/slate.json'
 
@@ -44,8 +44,8 @@ describe('split class', () => {
       input: 'sm:focus:text-accent-foreground/30',
       output: ['sm:focus', 'text-accent-foreground', '30'],
     },
-  ])('splitclass($input) -> $output', ({ input, output }) => {
-    expect(splitclass(input)).toStrictEqual(output)
+  ])('splitClassName($input) -> $output', ({ input, output }) => {
+    expect(splitClassName(input)).toStrictEqual(output)
   })
 })
 
diff --git a/packages/cli/test/utils/get-config.test.ts b/packages/cli/test/utils/get-config.test.ts
index e3549364..dc9e586f 100644
--- a/packages/cli/test/utils/get-config.test.ts
+++ b/packages/cli/test/utils/get-config.test.ts
@@ -12,18 +12,18 @@ test('get raw config', async () => {
     await getRawConfig(path.resolve(__dirname, '../fixtures/config-partial')),
   ).toEqual({
     style: 'default',
+    framework: 'Vite',
     tailwind: {
       config: './tailwind.config.ts',
       css: './src/assets/css/tailwind.css',
       baseColor: 'neutral',
       cssVariables: false,
     },
-    rsc: false,
-    tsx: true,
     aliases: {
       components: '@/components',
       utils: '@/lib/utils',
     },
+    typescript: true,
   })
 
   expect(
@@ -50,12 +50,11 @@ test('get config', async () => {
       baseColor: 'neutral',
       cssVariables: false,
     },
-    rsc: false,
-    tsx: true,
     aliases: {
       components: '@/components',
       utils: '@/lib/utils',
     },
+    framework: 'Vite',
     resolvedPaths: {
       tailwindConfig: path.resolve(
         __dirname,
@@ -78,14 +77,13 @@ test('get config', async () => {
         './lib/utils',
       ),
     },
+    typescript: true,
   })
 
   expect(
     await getConfig(path.resolve(__dirname, '../fixtures/config-full')),
   ).toEqual({
     style: 'new-york',
-    rsc: false,
-    tsx: true,
     tailwind: {
       config: 'tailwind.config.ts',
       baseColor: 'zinc',
@@ -96,6 +94,7 @@ test('get config', async () => {
       components: '~/components',
       utils: '~/lib/utils',
     },
+    framework: 'Vite',
     resolvedPaths: {
       tailwindConfig: path.resolve(
         __dirname,
@@ -118,41 +117,40 @@ test('get config', async () => {
         './src/lib/utils',
       ),
     },
+    typescript: true,
   })
 
-  expect(
-    await getConfig(path.resolve(__dirname, '../fixtures/config-jsx')),
-  ).toEqual({
-    style: 'default',
-    tailwind: {
-      config: './tailwind.config.js',
-      css: './src/assets/css/tailwind.css',
-      baseColor: 'neutral',
-      cssVariables: false,
-    },
-    rsc: false,
-    tsx: false,
-    aliases: {
-      components: '@/components',
-      utils: '@/lib/utils',
-    },
-    resolvedPaths: {
-      tailwindConfig: path.resolve(
-        __dirname,
-        '../fixtures/config-jsx',
-        'tailwind.config.js',
-      ),
-      tailwindCss: path.resolve(
-        __dirname,
-        '../fixtures/config-jsx',
-        './src/assets/css/tailwind.css',
-      ),
-      components: path.resolve(
-        __dirname,
-        '../fixtures/config-jsx',
-        './components',
-      ),
-      utils: path.resolve(__dirname, '../fixtures/config-jsx', './lib/utils'),
-    },
-  })
+  // expect(
+  //   await getConfig(path.resolve(__dirname, '../fixtures/config-jsx')),
+  // ).toEqual({
+  //   style: 'default',
+  //   tailwind: {
+  //     config: './tailwind.config.js',
+  //     css: './src/assets/css/tailwind.css',
+  //     baseColor: 'neutral',
+  //     cssVariables: false,
+  //   },
+  //   aliases: {
+  //     components: '@/components',
+  //     utils: '@/lib/utils',
+  //   },
+  //   resolvedPaths: {
+  //     tailwindConfig: path.resolve(
+  //       __dirname,
+  //       '../fixtures/config-jsx',
+  //       'tailwind.config.js',
+  //     ),
+  //     tailwindCss: path.resolve(
+  //       __dirname,
+  //       '../fixtures/config-jsx',
+  //       './src/assets/css/tailwind.css',
+  //     ),
+  //     components: path.resolve(
+  //       __dirname,
+  //       '../fixtures/config-jsx',
+  //       './components',
+  //     ),
+  //     utils: path.resolve(__dirname, '../fixtures/config-jsx', './lib/utils'),
+  //   },
+  // })
 })
diff --git a/packages/cli/test/utils/resolve-import.test.ts b/packages/cli/test/utils/resolve-import.test.ts
index 2054f0ee..d3115966 100644
--- a/packages/cli/test/utils/resolve-import.test.ts
+++ b/packages/cli/test/utils/resolve-import.test.ts
@@ -6,7 +6,7 @@ import { resolveImport } from '../../src/utils/resolve-import'
 
 test('resolve import', async () => {
   expect(
-    await resolveImport('@/foo/bar', {
+    resolveImport('@/foo/bar', {
       absoluteBaseUrl: '/Users/shadcn/Projects/foobar',
       paths: {
         '@/*': ['./src/*'],
@@ -17,7 +17,7 @@ test('resolve import', async () => {
   ).toEqual('/Users/shadcn/Projects/foobar/src/foo/bar')
 
   expect(
-    await resolveImport('~/components/foo/bar/baz', {
+    resolveImport('~/components/foo/bar/baz', {
       absoluteBaseUrl: '/Users/shadcn/Projects/foobar',
       paths: {
         '@/*': ['./src/*'],
@@ -28,7 +28,7 @@ test('resolve import', async () => {
   ).toEqual('/Users/shadcn/Projects/foobar/src/components/foo/bar/baz')
 
   expect(
-    await resolveImport('components/foo/bar', {
+    resolveImport('components/foo/bar', {
       absoluteBaseUrl: '/Users/shadcn/Projects/foobar',
       paths: {
         'components/*': ['./src/app/components/*'],
@@ -39,7 +39,7 @@ test('resolve import', async () => {
   ).toEqual('/Users/shadcn/Projects/foobar/src/app/components/foo/bar')
 
   expect(
-    await resolveImport('lib/utils', {
+    resolveImport('lib/utils', {
       absoluteBaseUrl: '/Users/shadcn/Projects/foobar',
       paths: {
         'components/*': ['./src/app/components/*'],
@@ -52,30 +52,30 @@ test('resolve import', async () => {
 
 test('resolve import with base url', async () => {
   const cwd = path.resolve(__dirname, '../fixtures/with-base-url')
-  const config = (await loadConfig(cwd)) as ConfigLoaderSuccessResult
+  const config = (loadConfig(cwd)) as ConfigLoaderSuccessResult
 
-  expect(await resolveImport('@/components/ui', config)).toEqual(
+  expect(resolveImport('@/components/ui', config)).toEqual(
     path.resolve(cwd, 'components/ui'),
   )
-  expect(await resolveImport('@/lib/utils', config)).toEqual(
+  expect(resolveImport('@/lib/utils', config)).toEqual(
     path.resolve(cwd, 'lib/utils'),
   )
-  expect(await resolveImport('foo/bar', config)).toEqual(
+  expect(resolveImport('foo/bar', config)).toEqual(
     path.resolve(cwd, 'foo/bar'),
   )
 })
 
 test('resolve import without base url', async () => {
   const cwd = path.resolve(__dirname, '../fixtures/without-base-url')
-  const config = (await loadConfig(cwd)) as ConfigLoaderSuccessResult
+  const config = (loadConfig(cwd)) as ConfigLoaderSuccessResult
 
-  expect(await resolveImport('~/components/ui', config)).toEqual(
+  expect(resolveImport('~/components/ui', config)).toEqual(
     path.resolve(cwd, 'components/ui'),
   )
-  expect(await resolveImport('~/lib/utils', config)).toEqual(
+  expect(resolveImport('~/lib/utils', config)).toEqual(
     path.resolve(cwd, 'lib/utils'),
   )
-  expect(await resolveImport('foo/bar', config)).toEqual(
+  expect(resolveImport('foo/bar', config)).toEqual(
     path.resolve(cwd, 'foo/bar'),
   )
 })
diff --git a/packages/cli/test/utils/transform-css-vars.test.ts b/packages/cli/test/utils/transform-css-vars.test.ts
index 4c88b585..85f18182 100644
--- a/packages/cli/test/utils/transform-css-vars.test.ts
+++ b/packages/cli/test/utils/transform-css-vars.test.ts
@@ -1,75 +1,69 @@
-// import { expect, test } from 'vitest'
+import { expect, test } from 'vitest'
 
-// import { transform } from '../../src/utils/transformers'
-// import stone from '../fixtures/colors/stone.json'
+import { transform } from '../../src/utils/transformers'
+import stone from '../fixtures/colors/stone.json'
 
-// test('transform css vars', async () => {
-//   expect(
-//     await transform({
-//       filename: 'test.ts',
-//       raw: `import * as React from "react"
-// export function Foo() {
-// 	return <div class="bg-background hover:bg-muted text-primary-foreground sm:focus:text-accent-foreground">foo</div>
-// }"
-//     `,
-//       config: {
-//         tsx: true,
-//         tailwind: {
-//           baseColor: 'stone',
-//           cssVariables: true,
-//         },
-//         aliases: {
-//           components: '@/components',
-//           utils: '@/lib/utils',
-//         },
-//       },
-//       baseColor: stone,
-//     }),
-//   ).toMatchSnapshot()
+test('transform css vars', async () => {
+  expect(
+    await transform({
+      filename: 'app.vue',
+      raw: `<script setup lang="ts"></script>
+<template>
+<div class="bg-background hover:bg-muted text-primary-foreground sm:focus:text-accent-foreground">foo</div>
+</template>"`,
+      config: {
+        tailwind: {
+          baseColor: 'stone',
+          cssVariables: true,
+        },
+        aliases: {
+          components: '@/components',
+          utils: '@/lib/utils',
+        },
+      },
+      baseColor: stone,
+    }),
+  ).toMatchSnapshot()
 
-//   expect(
-//     await transform({
-//       filename: 'test.ts',
-//       raw: `import * as React from "react"
-// export function Foo() {
-// 	return <div class="bg-background hover:bg-muted text-primary-foreground sm:focus:text-accent-foreground">foo</div>
-// }"
-//     `,
-//       config: {
-//         tsx: true,
-//         tailwind: {
-//           baseColor: 'stone',
-//           cssVariables: false,
-//         },
-//         aliases: {
-//           components: '@/components',
-//           utils: '@/lib/utils',
-//         },
-//       },
-//       baseColor: stone,
-//     }),
-//   ).toMatchSnapshot()
+  expect(
+    await transform({
+      filename: 'app.vue',
+      raw: `<script setup lang="ts"></script>
+<template>
+<div class="bg-background hover:bg-muted text-primary-foreground sm:focus:text-accent-foreground">foo</div>
+</template>"`,
+      config: {
+        tailwind: {
+          baseColor: 'stone',
+          cssVariables: false,
+        },
+        aliases: {
+          components: '@/components',
+          utils: '@/lib/utils',
+        },
+      },
+      baseColor: stone,
+    }),
+  ).toMatchSnapshot()
 
-//   expect(
-//     await transform({
-//       filename: 'test.ts',
-//       raw: `import * as React from "react"
-// export function Foo() {
-// 	return <div class={cn("bg-background hover:bg-muted", true && "text-primary-foreground sm:focus:text-accent-foreground")}>foo</div>
-// }"
-//     `,
-//       config: {
-//         tsx: true,
-//         tailwind: {
-//           baseColor: 'stone',
-//           cssVariables: false,
-//         },
-//         aliases: {
-//           components: '@/components',
-//           utils: '@/lib/utils',
-//         },
-//       },
-//       baseColor: stone,
-//     }),
-//   ).toMatchSnapshot()
-// })
+  expect(
+    await transform({
+      filename: 'app.vue',
+      raw: `<script setup lang="ts"></script>
+<template>
+<div :class="cn('bg-background hover:bg-muted', true && 'text-primary-foreground sm:focus:text-accent-foreground')">foo</div>
+</template>"`,
+      config: {
+        tailwind: {
+          baseColor: 'stone',
+          cssVariables: false,
+        },
+        aliases: {
+          components: '@/components',
+          utils: '@/lib/utils',
+        },
+      },
+      baseColor: stone,
+    }),
+  ).toMatchSnapshot()
+})
diff --git a/packages/cli/test/utils/transform-import.test.ts b/packages/cli/test/utils/transform-import.test.ts
index 303bbf5a..3a62074d 100644
--- a/packages/cli/test/utils/transform-import.test.ts
+++ b/packages/cli/test/utils/transform-import.test.ts
@@ -1,74 +1,67 @@
-// import { expect, test } from 'vitest'
+import { expect, test } from 'vitest'
+import { transform } from '../../src/utils/transformers'
 
-// import { transform } from '../../src/utils/transformers'
+test('transform import', async () => {
+  expect(
+    await transform({
+      filename: 'app.vue',
+      raw: `import { Foo } from "bar"
+    import { Button } from "@/registry/new-york/ui/button"
+    import { Label} from "ui/label"
+    import { Box } from "@/registry/new-york/box"
 
-// test('transform import', async () => {
-//   expect(
-//     await transform({
-//       filename: 'test.ts',
-//       raw: `import * as React from "react"
-// import { Foo } from "bar"
-//     import { Button } from "@/registry/new-york/ui/button"
-//     import { Label} from "ui/label"
-//     import { Box } from "@/registry/new-york/box"
+    import { cn } from "@/lib/utils"
+    `,
+      config: {
+        tailwind: {
+          baseColor: 'neutral',
+          cssVariables: true,
+        },
+        aliases: {
+          components: '@/components',
+          utils: '@/lib/utils',
+        },
+      },
+    }),
+  ).toMatchSnapshot()
 
-//     import { cn } from "@/lib/utils"
-//     `,
-//       config: {
-//         tsx: true,
-//         tailwind: {
-//           baseColor: 'neutral',
-//           cssVariables: true,
-//         },
-//         aliases: {
-//           components: '@/components',
-//           utils: '@/lib/utils',
-//         },
-//       },
-//     }),
-//   ).toMatchSnapshot()
+  expect(
+    await transform({
+      filename: 'app.vue',
+      raw: `import { Foo } from "bar"
+      import { Button } from "@/registry/new-york/ui/button"
+      import { Label} from "ui/label"
+      import { Box } from "@/registry/new-york/box"
 
-//   expect(
-//     await transform({
-//       filename: 'test.ts',
-//       raw: `import * as React from "react"
-// import { Foo } from "bar"
-//     import { Button } from "@/registry/new-york/ui/button"
-//     import { Label} from "ui/label"
-//     import { Box } from "@/registry/new-york/box"
+      import { cn, foo, bar } from "@/lib/utils"
+      import { bar } from "@/lib/utils/bar"
+      `,
+      config: {
+        aliases: {
+          components: '~/src/components',
+          utils: '~/lib',
+        },
+      },
+    }),
+  ).toMatchSnapshot()
 
-//     import { cn, foo, bar } from "@/lib/utils"
-//     import { bar } from "@/lib/utils/bar"
-//     `,
-//       config: {
-//         tsx: true,
-//         aliases: {
-//           components: '~/src/components',
-//           utils: '~/lib',
-//         },
-//       },
-//     }),
-//   ).toMatchSnapshot()
+  expect(
+    await transform({
+      filename: 'app.vue',
+      raw: `import { Foo } from "bar"
+      import { Button } from "@/registry/new-york/ui/button"
+      import { Label} from "ui/label"
+      import { Box } from "@/registry/new-york/box"
 
-//   expect(
-//     await transform({
-//       filename: 'test.ts',
-//       raw: `import * as React from "react"
-// import { Foo } from "bar"
-//     import { Button } from "@/registry/new-york/ui/button"
-//     import { Label} from "ui/label"
-//     import { Box } from "@/registry/new-york/box"
-
-//     import { cn } from "@/lib/utils"
-//     import { bar } from "@/lib/utils/bar"
-//     `,
-//       config: {
-//         tsx: true,
-//         aliases: {
-//           components: '~/src/components',
-//           utils: '~/src/utils',
-//         },
-//       },
-//     }),
-//   ).toMatchSnapshot()
-// })
+    import { cn } from "@/lib/utils"
+    import { bar } from "@/lib/utils/bar"
+    `,
+      config: {
+        aliases: {
+          components: '~/src/components',
+          utils: '~/src/utils',
+        },
+      },
+    }),
+  ).toMatchSnapshot()
+})
diff --git a/packages/cli/test/utils/transform-rsc.test.ts b/packages/cli/test/utils/transform-rsc.test.ts
deleted file mode 100644
index 2ebfd3b2..00000000
--- a/packages/cli/test/utils/transform-rsc.test.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-// import { expect, test } from 'vitest'
-
-// import { transform } from '../../src/utils/transformers'
-
-// test('transform rsc', async () => {
-//   expect(
-//     await transform({
-//       filename: 'test.ts',
-//       raw: `import * as React from "react"
-// import { Foo } from "bar"
-//     `,
-//       config: {
-//         tsx: true,
-//         rsc: true,
-//       },
-//     }),
-//   ).toMatchSnapshot()
-
-//   expect(
-//     await transform({
-//       filename: 'test.ts',
-//       raw: `"use client"
-
-//       import * as React from "react"
-// import { Foo } from "bar"
-//     `,
-//       config: {
-//         tsx: true,
-//         rsc: true,
-//       },
-//     }),
-//   ).toMatchSnapshot()
-
-//   expect(
-//     await transform({
-//       filename: 'test.ts',
-//       raw: `"use client"
-
-//       import * as React from "react"
-// import { Foo } from "bar"
-//     `,
-//       config: {
-//         tsx: true,
-//         rsc: false,
-//       },
-//     }),
-//   ).toMatchSnapshot()
-
-//   expect(
-//     await transform({
-//       filename: 'test.ts',
-//       raw: `"use foo"
-
-//       import * as React from "react"
-// import { Foo } from "bar"
-
-// "use client"
-//     `,
-//       config: {
-//         tsx: true,
-//         rsc: false,
-//       },
-//     }),
-//   ).toMatchSnapshot()
-// })
diff --git a/packages/cli/test/utils/transform-sfc.test.ts b/packages/cli/test/utils/transform-sfc.test.ts
index 127f7ec7..a4ab6fff 100644
--- a/packages/cli/test/utils/transform-sfc.test.ts
+++ b/packages/cli/test/utils/transform-sfc.test.ts
@@ -1,18 +1,17 @@
 import { readFileSync } from 'node:fs'
 import { resolve } from 'node:path'
 import { describe, expect, test } from 'vitest'
-import { transformSFC } from '../../src/utils/transformers/transform-sfc'
+import { transform } from '../../src/utils/transformers'
 
 describe('transformSFC', () => {
   const appVuePath = resolve(__dirname, '../fixtures/transform-sfc/app.vue')
   const content = readFileSync(appVuePath, 'utf-8')
   test('basic', async () => {
-    const result = await transformSFC({
-      name: 'app.vue',
-      content,
-    }, {
-      typescript: false,
-    } as any)
+    const result = await transform({
+      filename: 'app.vue',
+      raw: content,
+      config: {},
+    })
     expect(result).toMatchSnapshot()
   })
 })