feat: switch to parser & traverse

Author: sonofmagic

packages/core/package.json

@@ -56,11 +56,13 @@
     "@babel/helper-plugin-utils": "^7.24.7",
     "@babel/parser": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
+    "@babel/traverse": "^7.24.7",
     "@babel/types": "^7.24.7",
     "@tailwindcss-mangle/config": "workspace:^",
     "@tailwindcss-mangle/shared": "workspace:^",
     "@vue/compiler-sfc": "^3.4.29",
     "fast-sort": "^3.4.0",
+    "htmlparser2": "^9.1.0",
     "magic-string": "^0.30.10",
     "micromatch": "^4.0.7",
     "parse5": "^7.1.2",
@@ -70,6 +72,7 @@
   "devDependencies": {
     "@parse5/tools": "^0.5.0",
     "@types/babel__core": "^7.20.5",
+    "@types/babel__traverse": "^7.20.6",
     "@types/micromatch": "^4.0.7",
     "@vue/compiler-core": "^3.4.29",
     "@vue/compiler-sfc": "^3.4.27"

packages/core/src/babel/index.ts

@@ -0,0 +1,9 @@
+import _babelTraverse from '@babel/traverse'
+
+export { parse, parseExpression } from '@babel/parser'
+
+function _interopDefaultCompat(e: any) {
+  return e && typeof e === 'object' && 'default' in e ? e.default : e
+}
+
+export const traverse = _interopDefaultCompat(_babelTraverse) as typeof _babelTraverse

packages/core/src/ctx/index.ts

@@ -18,7 +18,7 @@ export class Context {
   options: MangleUserConfig
   private includeMatcher: (file: string) => boolean
   private excludeMatcher: (file: string) => boolean
-  public replaceMap: Map<string, string>
+  public replaceMap: Map<string, string | boolean>
   classSet: Set<string>
 
   classGenerator: ClassGenerator

packages/core/src/js/pre.ts

@@ -5,6 +5,8 @@ import { splitCode } from '@tailwindcss-mangle/shared'
 import { sort } from 'fast-sort'
 import { jsStringEscape } from '@ast-core/escape'
 import type { ParseResult } from '@babel/parser'
+// @ts-ignore
+import babelTypescript from '@babel/preset-typescript'
 import { escapeStringRegexp } from '@/utils'
 import type { Context } from '@/ctx'
 import { between } from '@/math'
@@ -44,7 +46,7 @@ export function handleValue(options: HandleValueOptions) {
 
       // replace
       const v = replaceMap.get(str)
-      if (v) {
+      if (v && typeof v === 'string') {
         value = value.replaceAll(str, v)
       }
     }
@@ -107,7 +109,7 @@ function transformSync(ast: babel.types.Node, code: string, plugins: babel.Plugi
 export function loadPresets() {
   return [
     [
-      require('@babel/preset-typescript'),
+      babelTypescript,
       {
         allExtensions: true,
         isTSX: true,
@@ -208,6 +210,7 @@ export function preProcessRawCode(options: IPreProcessJsOptions): string {
   for (const regex of ctx.preserveFunctionRegexs) {
     const allArr: RegExpExecArray[] = []
     let arr: RegExpExecArray | null = null
+    // eslint-disable-next-line no-cond-assign
     while ((arr = regex.exec(magicString.original)) !== null) {
       allArr.push(arr)
       markArr.push([arr.index, arr.index + arr[0].length])
@@ -254,6 +257,7 @@ export function preProcessRawCode(options: IPreProcessJsOptions): string {
     // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec
     const regex = new RegExp(escapeStringRegexp(key), 'g')
     let arr: RegExpExecArray | null = null
+    // eslint-disable-next-line no-cond-assign
     while ((arr = regex.exec(magicString.original)) !== null) {
       const start = arr.index
       const end = arr.index + arr[0].length
@@ -264,7 +268,7 @@ export function preProcessRawCode(options: IPreProcessJsOptions): string {
           break
         }
       }
-      if (shouldUpdate) {
+      if (shouldUpdate && typeof value === 'string') {
         magicString.update(start, end, value)
         markArr.push([start, end])
       }

packages/core/src/types.ts

@@ -27,6 +27,10 @@ export interface IJsHandlerOptions extends IHandlerOptions {
   minified?: boolean
 }
 
+export interface IVueHandlerOptions extends IHandlerOptions {
+
+}
+
 export interface ICssHandlerOptions extends IHandlerOptions {
   // scene?: 'loader' | 'process'
   ignoreVueScoped?: boolean
@@ -36,5 +40,4 @@ export interface ICssHandlerOptions extends IHandlerOptions {
 export interface IPreProcessJsOptions extends IHandlerOptions {
   code: string | MagicString
   id: string
-
 }

packages/core/src/vue/index.ts

@@ -1,5 +1,34 @@
-import { parse } from '@vue/compiler-sfc'
+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'
 
-export function vueHandler(raw: string) {
-  parse(raw)
+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 (script) {
+    parseJs(script.content, {
+      sourceType: 'module',
+      plugins: ['typescript'],
+    })
+  }
+
+  return ms.toString()
 }

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

@@ -259,7 +259,7 @@ const aaa = twMerge('px-2 py-1 bg-red hover:bg-dark-red', 'p-3 bg-[#B91C1C]')
 </script>
 
 <template>
-  <main class="flex tw-d tw-f tw-e tw-b tw-j ">
+  <main class="flex tw-d tw-f tw-e tw-b tw-j " :class="['before:text-[#123456]']">
     <nav :class="aaa">aaa</nav>
   </main>
 </template>
@@ -341,7 +341,7 @@ const aaa = twMerge('px-2 py-1 bg-red-100 hover:bg-red-800', 'p-3 bg-[#B91C1C]')
 </script>
 
 <template>
-  <main class="flex tw-kb tw-hc tw-hb tw-sa tw-vc ">
+  <main class="flex tw-kb tw-hc tw-hb tw-sa tw-vc " :class="['before:text-[#123456]']">
     <nav :class="aaa">{{ aaa }}</nav>
     <div class="tw-cd tw-pc tw-dc tw-hb tw-sa tw-xb tw-lc tw-jc">
       <p

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

@@ -1,9 +1,135 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`vue > module mode preamble 1`] = `
-"import { createVNode as _createVNode, resolveDirective as _resolveDirective } from "vue"
+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]')
 
-export function render(_ctx, _cache) {
-  return null
-}"
+</script>
+
+<template>
+  <main class="flex min-h-screen flex-col items-center justify-between p-24 " :class="['before:text-[#123456]']">
+    <nav :class="aaa">{{ aaa }}</nav>
+    <div class="z-10 w-full max-w-5xl items-center justify-between 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;
+        <code class="font-mono font-bold">pages/index.tsx</code>
+      </p>
+      <div
+        class="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
+        <a class="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
+          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
+          target="_blank" rel="noopener noreferrer">
+          By
+          <img src="/vite.svg" alt="Vercel Logo" class="dark:invert" priority />
+        </a>
+      </div>
+    </div>
+
+    <div
+      class="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700/10 after:dark:from-sky-900 after:dark:via-[#0141ff]/40 before:lg:h-[360px]">
+      <img class="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert" src="./assets/vue.svg" alt="Next.js Logo"
+        priority />
+    </div>
+
+    <div class="mb-32 grid text-center lg:mb-0 lg:grid-cols-4 lg:text-left ">
+      <a href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
+        class="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
+        target="_blank" rel="noopener noreferrer">
+        <h2 class="bg-red-200 mb-3 text-2xl font-semibold">
+          Docs <span
+            class="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">-&gt;</span>
+        </h2>
+        <p class="m-0 max-w-[30ch] text-sm opacity-50">Find in-depth information about Next.js
+          features and API.</p>
+      </a>
+
+      <a href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
+        class="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
+        target="_blank" rel="noopener noreferrer">
+        <h2 class="bg-red-200/40 mb-3 text-2xl font-semibold">
+          Learn <span
+            class="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">-&gt;</span>
+        </h2>
+        <p class="m-0 max-w-[30ch] text-sm opacity-50">Learn about Next.js in an interactive
+          course with&nbsp;quizzes!</p>
+      </a>
+
+      <a href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
+        class="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
+        target="_blank" rel="noopener noreferrer">
+        <h2 class="bg-red-200/70 mb-3 text-2xl font-semibold">
+          Templates <span
+            class="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">-&gt;</span>
+        </h2>
+        <p class="m-0 max-w-[30ch] text-sm opacity-50">Discover and deploy boilerplate example
+          Next.js&nbsp;projects.</p>
+      </a>
+
+      <a href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
+        class="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
+        target="_blank" rel="noopener noreferrer">
+        <h2 class="bg-red-200/90 mb-3 text-2xl font-semibold">
+          Deploy <span
+            class="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">-&gt;</span>
+        </h2>
+        <p class="m-0 max-w-[30ch] text-sm opacity-50">Instantly deploy your Next.js site to a
+          shareable URL with Vercel.</p>
+      </a>
+    </div>
+  </main>
+</template>
+
+<script lang="ts">
+import { onMounted, defineComponent } from 'vue'
+
+export default defineComponent({
+  setup() {
+    onMounted(() => {
+      const clipPath = '';
+      document.documentElement.animate(
+        {
+          clipPath
+        },
+        {
+          duration: 500,
+          easing: /* tw-mangle ignore */ 'ease-out',
+          pseudoElement: '::view-transition-new(root)'
+        })
+      document.documentElement.animate(
+        {
+          clipPath
+        },
+        {
+          duration: 500,
+          easing: 'ease-out',
+          pseudoElement: '::view-transition-new(root)'
+        }
+      )
+    })
+    return {}
+  }
+})
+
+</script>
+
+<style scoped>
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+
+.logo.vue:hover {
+  filter: drop-shadow(0 0 2em #42b883aa);
+}
+</style>
+"
 `;

packages/core/test/fixtures/preserve-fn-case0.vue

@@ -6,7 +6,7 @@ const aaa = twMerge('px-2 py-1 bg-red hover:bg-dark-red', 'p-3 bg-[#B91C1C]')
 </script>
 
 <template>
-  <main class="flex min-h-screen flex-col items-center justify-between p-24 ">
+  <main class="flex min-h-screen flex-col items-center justify-between p-24 " :class="['before:text-[#123456]']">
     <nav :class="aaa">aaa</nav>
   </main>
 </template>

packages/core/test/fixtures/preserve-fn-case1.vue

@@ -6,7 +6,7 @@ const aaa = twMerge('px-2 py-1 bg-red-100 hover:bg-red-800', 'p-3 bg-[#B91C1C]')
 </script>
 
 <template>
-  <main class="flex min-h-screen flex-col items-center justify-between p-24 ">
+  <main class="flex min-h-screen flex-col items-center justify-between p-24 " :class="['before:text-[#123456]']">
     <nav :class="aaa">{{ aaa }}</nav>
     <div class="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
       <p