feat: support tailwind prefix (#619)

* chore: enable tw prefix

* chore: enable tw  prefix during init

* fix: cater for cn function

* fix: prevent transforming importDeclaration

* chore: update registry to make sure tailwind prefix parse correctly

* chore: fix wrong import

* chore: checkpoint

* refactor: goodbye ts-morph

* chore: remove ts-morpg

* chore: update test

* chore: cleanup

* chore: fix test

* fix: move vue-metamorph to dep

* refactor: transform tw prefix by specific case

* fix: transform-sfc not parsing .ts file

* fix: prefix double quote

* chore: patch vue-eslint-parser

* refactor: transform to cater only for class in sfc

* refactor: replace detypes with @unovue/detypes

* chore: update test snapshot

* chore: update pnpm-lock, fix import

* chore: bump detypes version

* chore: update deps

apps/www/.vitepress/theme/components/BlockPreview.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
+import { useConfigStore } from '@/stores/config'
 import { CircleHelp, Info, Monitor, Smartphone, Tablet } from 'lucide-vue-next'
-import { reactive, ref, watch } from 'vue'
+import MagicString from 'magic-string'
 import { codeToHtml } from 'shiki'
+import { reactive, ref, watch } from 'vue'
 import { compileScript, parse, walk } from 'vue/compiler-sfc'
-import MagicString from 'magic-string'
 import { cssVariables } from '../config/shiki'
-import StyleSwitcher from './StyleSwitcher.vue'
-import Spinner from './Spinner.vue'
 import BlockCopyButton from './BlockCopyButton.vue'
-import { useConfigStore } from '@/stores/config'
+import Spinner from './Spinner.vue'
+import StyleSwitcher from './StyleSwitcher.vue'
 
 // import { V0Button } from '@/components/v0-button'
 import { Badge } from '@/lib/registry/new-york/ui/badge'

apps/www/.vitepress/theme/components/theming/utils/data.ts

@@ -1,6 +1,6 @@
-import { CreditCard } from 'lucide-vue-next'
 import RiAppleFill from '~icons/ri/apple-fill'
 import RiPaypalFill from '~icons/ri/paypal-fill'
+import { CreditCard } from 'lucide-vue-next'
 
 type Color =
   | 'zinc'

apps/www/.vitepress/theme/utils/codeeditor.ts

@@ -1,11 +1,11 @@
-import { getParameters } from 'codesandbox/lib/api/define'
+import type { Style } from '@/lib/registry/styles'
 import sdk from '@stackblitz/sdk'
+import { getParameters } from 'codesandbox/lib/api/define'
 import { Index as demoIndex } from '../../../../www/__registry__'
 // @ts-expect-error ?raw
 import tailwindConfigRaw from '../../../tailwind.config?raw'
 // @ts-expect-error ?raw
 import cssRaw from '../../../../../packages/cli/test/fixtures/nuxt/assets/css/tailwind.css?raw'
-import type { Style } from '@/lib/registry/styles'
 
 export function makeCodeSandboxParams(componentName: string, style: Style, sources: Record<string, string>) {
   let files: Record<string, any> = {}

apps/www/src/content/docs/components/breadcrumb.md

@@ -58,14 +58,14 @@ Use a custom component as `slot` for `<BreadcrumbSeparator />` to create a custo
 
 ```vue showLineNumbers {2,20-22}
 <script setup lang="ts">
-import { Slash } from 'lucide-vue-next'
 import {
   Breadcrumb,
   BreadcrumbItem,
   BreadcrumbLink,
   BreadcrumbList,
   BreadcrumbSeparator,
 } from '@/components/ui/breadcrumb'
+import { Slash } from 'lucide-vue-next'
 </script>
 
 <template>
@@ -99,15 +99,15 @@ You can compose `<BreadcrumbItem />` with a `<DropdownMenu />` to create a dropd
 
 ```vue showLineNumbers {2-7,16-26}
 <script setup lang="ts">
+import { BreadcrumbItem } from '@/components/ui/breadcrumb'
+
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/lib/components/ui/dropdown-menu'
 
-import { BreadcrumbItem } from '@/components/ui/breadcrumb'
-
 import ChevronDownIcon from '~icons/radix-icons/chevron-down'
 </script>
 
@@ -169,13 +169,13 @@ To use a custom link component from your routing library, you can use the `asChi
 
 ```vue showLineNumbers {15-19}
 <script setup lang="ts">
-import { RouterLink } from 'vue-router'
 import {
   Breadcrumb,
   BreadcrumbItem,
   BreadcrumbLink,
   BreadcrumbList,
 } from '@/components/ui/breadcrumb'
+import { RouterLink } from 'vue-router'
 </script>
 
 <template>

apps/www/src/content/docs/components/data-table.md

@@ -163,12 +163,6 @@ Next, we'll create a `<DataTable />` component to render our table.
 ```vue
 <script setup lang="ts" generic="TData, TValue">
 import type { ColumnDef } from '@tanstack/vue-table'
-import {
-  FlexRender,
-  getCoreRowModel,
-  useVueTable,
-} from '@tanstack/vue-table'
-
 import {
   Table,
   TableBody,
@@ -178,6 +172,12 @@ import {
   TableRow,
 } from '@/components/ui/table'
 
+import {
+  FlexRender,
+  getCoreRowModel,
+  useVueTable,
+} from '@tanstack/vue-table'
+
 const props = defineProps<{
   columns: ColumnDef<TData, TValue>[]
   data: TData[]
@@ -241,9 +241,9 @@ Finally, we'll render our table in our index component.
 
 ```vue
 <script setup lang="ts">
+import type { Payment } from './components/columns'
 import { onMounted, ref } from 'vue'
 import { columns } from './components/columns'
-import type { Payment } from './components/columns'
 import DataTable from './components/DataTable.vue'
 
 const data = ref<Payment[]>([])
@@ -317,9 +317,9 @@ Let's add row actions to our table. We'll use a `<Dropdown />` component for thi
 
 ```vue
 <script setup lang="ts">
-import { MoreHorizontal } from 'lucide-vue-next'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
 import { Button } from '@/components/ui/button'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
+import { MoreHorizontal } from 'lucide-vue-next'
 
 defineProps<{
   payment: {
@@ -358,8 +358,8 @@ function copy(id: string) {
 Update our columns definition to add a new `actions` column. The `actions` cell returns a `<Dropdown />` component.
 
 ```ts
-import { ColumnDef } from '@tanstack/vue-table'
 import DropdownAction from '@/components/DataTableDropDown.vue'
+import { ColumnDef } from '@tanstack/vue-table'
 
 export const columns: ColumnDef<Payment>[] = [
   // ...
@@ -465,12 +465,12 @@ Let's make the email column sortable.
 ### Add the following into your `utils` file
 
 ```ts
-import { type ClassValue, clsx } from 'clsx'
-import { twMerge } from 'tailwind-merge'
-
 import type { Updater } from '@tanstack/vue-table'
 import type { Ref } from 'vue'
 
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }

apps/www/src/content/docs/components/number-field.md

@@ -22,14 +22,14 @@ npx shadcn-vue@latest add number-field
 
 ```vue
 <script setup lang="ts">
+import { Label } from '@/components/ui/label'
 import {
   NumberField,
   NumberFieldContent,
   NumberFieldDecrement,
   NumberFieldIncrement,
   NumberFieldInput,
 } from '@/components/ui/number-field'
-import { Label } from '@/components/ui/label'
 </script>
 
 <template>

apps/www/src/content/docs/contribution.md

@@ -221,9 +221,9 @@ Take a look at `DrawerDescription.vue`.
 ```vue
 <script lang="ts" setup>
 import type { DrawerDescriptionProps } from 'vaul-vue'
-import { DrawerDescription } from 'vaul-vue'
-import { type HtmlHTMLAttributes, computed } from 'vue'
 import { cn } from '@/lib/utils'
+import { DrawerDescription } from 'vaul-vue'
+import { computed, type HtmlHTMLAttributes } from 'vue'
 
 const props = defineProps<DrawerDescriptionProps & { class?: HtmlHTMLAttributes['class'] }>()
 
@@ -270,9 +270,9 @@ Take a look at `AccordionItem.vue`
 
 ```vue
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { AccordionItem, type AccordionItemProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { AccordionItem, type AccordionItemProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()
 
@@ -307,9 +307,9 @@ Let's take a look at `Button.vue`
 ```vue
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 import { Primitive, type PrimitiveProps } from 'radix-vue'
 import { type ButtonVariants, buttonVariants } from '.'
-import { cn } from '@/lib/utils'
 
 interface Props extends PrimitiveProps {
   variant?: ButtonVariants['variant']

apps/www/src/content/docs/dark-mode/astro.md

@@ -61,10 +61,10 @@ We're using [`useColorMode`](https://vueuse.org/core/usecolormode/) from [`@vueu
 
 ```vue
 <script setup lang="ts">
-import { useColorMode } from '@vueuse/core'
-import { Icon } from '@iconify/vue'
 import { Button } from '@/components/ui/button'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
+import { Icon } from '@iconify/vue'
+import { useColorMode } from '@vueuse/core'
 
 const mode = useColorMode()
 </script>

apps/www/src/content/docs/dark-mode/nuxt.md

@@ -42,9 +42,9 @@ npm install -D @iconify/vue @iconify-json/radix-icons
 
 ```vue
 <script setup lang="ts">
-import { Icon } from '@iconify/vue'
 import { Button } from '@/components/ui/button'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
+import { Icon } from '@iconify/vue'
 
 const colorMode = useColorMode()
 </script>

apps/www/src/content/docs/dark-mode/vite.md

@@ -27,10 +27,10 @@ We're using [`useColorMode`](https://vueuse.org/core/usecolormode/) from [`@vueu
 
 ```vue
 <script setup lang="ts">
-import { useColorMode } from '@vueuse/core'
-import { Icon } from '@iconify/vue'
 import { Button } from '@/components/ui/button'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
+import { Icon } from '@iconify/vue'
+import { useColorMode } from '@vueuse/core'
 
 // Pass { disableTransition: false } to enable transitions
 const mode = useColorMode()

apps/www/src/content/docs/installation/vite.md

@@ -46,11 +46,11 @@ Install `tailwindcss` and its peer dependencies, then generate your `tailwind.co
 
   ```typescript {5,6,9-13}
   import path from 'node:path'
-  import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
+  import autoprefixer from 'autoprefixer'
 
   import tailwind from 'tailwindcss'
-  import autoprefixer from 'autoprefixer'
+  import { defineConfig } from 'vite'
 
   export default defineConfig({
     css: {
@@ -124,10 +124,10 @@ npm i -D @types/node
 ```typescript {15-19}
 import path from 'node:path'
 import vue from '@vitejs/plugin-vue'
-import { defineConfig } from 'vite'
+import autoprefixer from 'autoprefixer'
 
 import tailwind from 'tailwindcss'
-import autoprefixer from 'autoprefixer'
+import { defineConfig } from 'vite'
 
 export default defineConfig({
   css: {

apps/www/src/examples/cards/components/TeamMembers.vue

@@ -1,13 +1,11 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import ChevronDownIcon from '~icons/radix-icons/chevron-down'
-
 import {
   Avatar,
   AvatarFallback,
   AvatarImage,
 } from '@/lib/registry/new-york/ui/avatar'
 import { Button } from '@/lib/registry/new-york/ui/button'
+
 import {
   Card,
   CardContent,
@@ -16,12 +14,14 @@ import {
   CardTitle,
 } from '@/lib/registry/new-york/ui/card'
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/lib/registry/new-york/ui/command'
-
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from '@/lib/registry/new-york/ui/popover'
+import ChevronDownIcon from '~icons/radix-icons/chevron-down'
+
+import { ref } from 'vue'
 
 const sofiaRole = ref('Owner')
 const jacksonRole = ref('Member')

apps/www/src/examples/forms/components/NotificationsForm.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { h } from 'vue'
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-import * as z from 'zod'
-
 import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/lib/registry/default/ui/form'
-import { Separator } from '@/lib/registry/new-york/ui/separator'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
 import { RadioGroup, RadioGroupItem } from '@/lib/registry/new-york/ui/radio-group'
+
+import { Separator } from '@/lib/registry/new-york/ui/separator'
 import { Switch } from '@/lib/registry/new-york/ui/switch'
-import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
-import { Button } from '@/lib/registry/new-york/ui/button'
 import { toast } from '@/lib/registry/new-york/ui/toast'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { h } from 'vue'
+import * as z from 'zod'
 
 const notificationsFormSchema = toTypedSchema(z.object({
   type: z.enum(['all', 'mentions', 'none'], {

apps/www/src/lib/registry/default/example/CalendarWithSelect.vue

@@ -1,9 +1,4 @@
 <script setup lang="ts">
-import { type HTMLAttributes, type Ref, computed } from 'vue'
-import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useDateFormatter, useForwardPropsEmits } from 'radix-vue'
-import { createDecade, createYear, toDate } from 'radix-vue/date'
-import { type DateValue, getLocalTimeZone, today } from '@internationalized/date'
-import { useVModel } from '@vueuse/core'
 import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading } from '@/lib/registry/default/ui/calendar'
 import {
   Select,
@@ -13,6 +8,11 @@ import {
   SelectValue,
 } from '@/lib/registry/default/ui/select'
 import { cn } from '@/lib/utils'
+import { type DateValue, getLocalTimeZone, today } from '@internationalized/date'
+import { useVModel } from '@vueuse/core'
+import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useDateFormatter, useForwardPropsEmits } from 'radix-vue'
+import { createDecade, createYear, toDate } from 'radix-vue/date'
+import { computed, type HTMLAttributes, type Ref } from 'vue'
 
 const props = withDefaults(defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>(), {
   modelValue: undefined,

apps/www/src/lib/registry/default/example/CarouselDemo.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/default/ui/carousel'
 import { Card, CardContent } from '@/lib/registry/default/ui/card'
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/default/ui/carousel'
 </script>
 
 <template>