feat: add vue compiler

Author: sonofmagic

packages/core/src/html/index.ts

@@ -2,9 +2,10 @@ import { Parser } from 'htmlparser2'
 import MagicString from 'magic-string'
 import type { IHtmlHandlerOptions } from '../types'
 import { makeRegex, splitCode } from '../shared'
+import { jsHandler } from '@/js'
 
 export function htmlHandler(raw: string | MagicString, options: IHtmlHandlerOptions) {
-  const { ctx } = options
+  const { ctx, isVue } = options
   const { replaceMap } = ctx
   const ms: MagicString = typeof raw === 'string' ? new MagicString(raw) : raw
   const parser = new Parser({
@@ -21,6 +22,14 @@ export function htmlHandler(raw: string | MagicString, options: IHtmlHandlerOpti
         }
         ms.update(parser.startIndex + name.length + 2, parser.endIndex - 1, rawValue)
       }
+      if (isVue) {
+        if (name === ':class') {
+          const { code } = jsHandler(value, {
+            ctx,
+          })
+          ms.update(parser.startIndex + name.length + 2, parser.endIndex - 1, code)
+        }
+      }
     },
   })
   parser.write(ms.original)

packages/core/src/index.ts

@@ -2,5 +2,6 @@ export * from './ctx'
 export * from './css'
 export * from './html'
 export * from './js'
+export * from './vue'
 export { ClassGenerator } from './shared'
 export * from './types'

packages/core/src/js/pre.ts

@@ -3,6 +3,8 @@ import { splitCode } from '@tailwindcss-mangle/shared'
 import { sort } from 'fast-sort'
 import { jsStringEscape } from '@ast-core/escape'
 import type { ParseResult } from '@babel/parser'
+import type { NodePath } from '@babel/traverse'
+import type { File, StringLiteral, TemplateElement } from '@babel/types'
 import { escapeStringRegexp } from '@/utils'
 import type { Context } from '@/ctx'
 import { between } from '@/math'
@@ -18,7 +20,7 @@ interface Options {
 
 type HandleValueOptions = {
   raw: string
-  path: babel.NodePath<babel.types.StringLiteral | babel.types.TemplateElement>
+  path: NodePath<StringLiteral | TemplateElement>
   offset: number
   escape: boolean
 } & Options
@@ -62,7 +64,7 @@ export function preProcessJs(options: IPreProcessJsOptions): string {
   const { code, id, ctx } = options
   const { replaceMap } = ctx
   const magicString = typeof code === 'string' ? new MagicString(code) : code
-  let ast: ParseResult<babel.types.File>
+  let ast: ParseResult<File>
   try {
     const file = parse(magicString.original, {
       sourceType: 'unambiguous',
@@ -167,7 +169,7 @@ export function preProcessRawCode(options: IPreProcessJsOptions): string {
     }
     //  magicString.original.matchAll(regex)
     for (const regExpMatch of allArr) {
-      let ast: ParseResult<babel.types.File> | null
+      let ast: ParseResult<File> | null
       try {
         ast = parse(regExpMatch[0], {
           sourceType: 'unambiguous',

packages/core/src/types.ts

@@ -20,7 +20,9 @@ export interface IHandlerOptions {
   ctx: Context
 }
 
-export interface IHtmlHandlerOptions extends IHandlerOptions {}
+export interface IHtmlHandlerOptions extends IHandlerOptions {
+  isVue?: boolean
+}
 
 export interface IJsHandlerOptions extends IHandlerOptions {
   splitQuote?: boolean

packages/core/src/vue/index.ts

@@ -1,33 +1,25 @@
 import { parse as parseVue } from '@vue/compiler-sfc'
 import MagicString from 'magic-string'
 import type { IVueHandlerOptions } from '@/types'
-import { parse as parseJs, traverse } from '@/babel'
+import { jsHandler } from '@/js'
+import { htmlHandler } from '@/html'
 
 export function vueHandler(raw: string | MagicString, options: IVueHandlerOptions) {
   const { ctx } = options
   const ms: MagicString = typeof raw === 'string' ? new MagicString(raw) : raw
   const { descriptor } = parseVue(ms.original)
   const { template, scriptSetup, script } = descriptor
-  // console.log(template, scriptSetup, script)
-  if (scriptSetup) {
-    const ast = parseJs(scriptSetup.content, {
-      sourceType: 'module',
-      plugins: ['typescript'],
-    })
-
-    traverse(ast, {
-      StringLiteral: {
-        enter(p) {
-
-        },
-      },
-    })
+  if (template) {
+    const code = htmlHandler(template.content, { ctx, isVue: true })
+    ms.update(template.loc.start.offset, template.loc.end.offset, code)
   }
   if (script) {
-    parseJs(script.content, {
-      sourceType: 'module',
-      plugins: ['typescript'],
-    })
+    const x = jsHandler(script.content, { ctx })
+    ms.update(script.loc.start.offset, script.loc.end.offset, x.code)
+  }
+  if (scriptSetup) {
+    const x = jsHandler(scriptSetup.content, { ctx })
+    ms.update(scriptSetup.loc.start.offset, scriptSetup.loc.end.offset, x.code)
   }
 
   return ms.toString()

packages/core/test/__snapshots__/vue.test.ts.snap

@@ -4,14 +4,14 @@ exports[`vue > test for vue 1`] = `
 "<script setup lang="ts">
 import { twMerge } from 'tailwind-merge'
 // 'hover:bg-dark-red p-3 bg-[#B91C1C]'
-const aaa = twMerge('px-2 py-1 bg-red-100 hover:bg-red-800', 'p-3 bg-[#B91C1C]')
+const aaa = twMerge('px-2 py-1 bg-red-100 hover:bg-red-800', 'p-3 tw-c')
 
 </script>
 
 <template>
-  <main class="flex min-h-screen flex-col items-center justify-between p-24 " :class="['before:text-[#123456]']">
+  <main class="flex min-h-screen flex-col items-center tw-a p-24 " :class="['tw-b']">
     <nav :class="aaa">{{ aaa }}</nav>
-    <div class="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
+    <div class="z-10 w-full max-w-5xl items-center tw-a font-mono text-sm lg:flex">
       <p
         class="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
         Get started by editing&nbsp;

packages/core/test/vue.test.ts

@@ -9,6 +9,9 @@ describe('vue', () => {
     ctx = new Context()
   })
   it('test for vue', () => {
+    ctx.replaceMap.set('bg-[#B91C1C]', 'xx')
+    ctx.replaceMap.set('before:text-[#123456]', 'yy')
+    ctx.replaceMap.set('justify-between', 'zz')
     const testCase = getTestCase('preserve-fn-case1.vue')
     expect(vueHandler(testCase, {
       ctx,