fix: preProcessJs clsx issue

Author: sonofmagic

apps/vite-react/src/App.tsx

@@ -2,15 +2,24 @@ import { useState } from 'react'
 import { twMerge } from 'tailwind-merge'
 import reactLogo from './assets/react.svg'
 import './App.css'
+import { cn } from './utils'
 // '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 bbb = cn(
+  {
+    'p-3': true
+  },
+  'p-1',
+  ['p-2', true && 'p-4']
+)
 function App() {
   const [count, setCount] = useState(0)
 
   return (
     <main className="px-2 py-1 bg-red-100 hover:bg-red-800 flex min-h-screen flex-col items-center justify-between p-24">
       <nav className={aaa}>{aaa}</nav>
+      <nav className={bbb}>{bbb}</nav>
+      <nav className="p-3">ccc</nav>
       <div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
         <p className="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;

apps/vite-react/src/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

apps/vite-react/tailwindcss-mangle.config.ts

@@ -2,6 +2,6 @@ import { defineConfig } from 'tailwindcss-patch'
 
 export default defineConfig({
   mangle: {
-    preserveFunction: ['twMerge']
+    preserveFunction: ['twMerge', 'cn']
   }
 })

packages/core/src/js/pre.ts

@@ -6,47 +6,50 @@ import { sort } from 'fast-sort'
 import { jsStringEscape } from '@ast-core/escape'
 import { parse, ParseResult } from '@babel/parser'
 import traverse from '@babel/traverse'
-import { getStringLiteralCalleeName, getTemplateElementCalleeName } from './utils'
 import { escapeStringRegexp } from '@/utils'
 import type { Context } from '@/ctx'
+import { between } from '@/math'
 
 interface Options {
   replaceMap: Map<string, string>
   magicString: MagicString
   id: string
   ctx: Context
+  markedArray: [number, number][]
 }
 
 type HandleValueOptions = {
   raw: string
   path: babel.NodePath<babel.types.StringLiteral | babel.types.TemplateElement>
   offset: number
   escape: boolean
-  preserve: boolean
 } & Options
 
 export function handleValue(options: HandleValueOptions) {
-  const { ctx, id, path, magicString, raw, replaceMap, offset = 0, escape = false, preserve = false } = options
+  const { ctx, id, path, magicString, raw, replaceMap, offset = 0, escape = false, markedArray } = options
   const node = path.node
   let value = raw
+  // why 字符串字面量只要开始和结束 在 方法节点内就保留, 另外不可能出现 字符串字面量 开始和结束的下标整个包括 方法体，这是不可能出现的事情
+  for (const [s, e] of markedArray) {
+    if (between(node.start, s, e) || between(node.end, s, e)) {
+      return
+    }
+  }
+
   const arr = sort(splitCode(value)).desc((x) => x.length)
 
   for (const str of arr) {
     if (replaceMap.has(str)) {
       ctx.addToUsedBy(str, id)
-      if (preserve) {
-        ctx.addPreserveClass(str)
-      }
+
       // replace
       const v = replaceMap.get(str)
       if (v) {
         value = value.replaceAll(str, v)
       }
     }
   }
-  if (preserve) {
-    return
-  }
+
   if (typeof node.start === 'number' && typeof node.end === 'number' && value) {
     const start = node.start + offset
     const end = node.end - offset
@@ -58,11 +61,11 @@ export function handleValue(options: HandleValueOptions) {
 
 export const JsPlugin = declare((api, options: Options) => {
   api.assertVersion(7)
-  const { magicString, replaceMap, id, ctx } = options
+  const { magicString, replaceMap, id, ctx, markedArray } = options
   return {
     visitor: {
       StringLiteral: {
-        enter(p) {
+        exit(p) {
           const opts: HandleValueOptions = {
             ctx,
             id,
@@ -72,17 +75,14 @@ export const JsPlugin = declare((api, options: Options) => {
             replaceMap,
             offset: 1,
             escape: true,
-            preserve: false
-          }
-          const calleeName = getStringLiteralCalleeName(p)
-          if (calleeName && ctx.isPreserveFunction(calleeName)) {
-            opts.preserve = true
+            markedArray
           }
+
           handleValue(opts)
         }
       },
       TemplateElement: {
-        enter(p) {
+        exit(p) {
           const opts: HandleValueOptions = {
             ctx,
             id,
@@ -92,12 +92,9 @@ export const JsPlugin = declare((api, options: Options) => {
             replaceMap,
             offset: 0,
             escape: false,
-            preserve: false
-          }
-          const calleeName = getTemplateElementCalleeName(p)
-          if (calleeName && ctx.isPreserveFunction(calleeName)) {
-            opts.preserve = true
+            markedArray
           }
+
           handleValue(opts)
         }
       }
@@ -112,27 +109,88 @@ interface IPreProcessJsOptions {
   ctx: Context
 }
 
-function transformSync(code: string, plugins: babel.PluginItem[] | null | undefined, filename: string | null | undefined) {
-  babel.transformSync(code, {
-    presets: [
-      // ['@babel/preset-react', {}],
-      [
-        require('@babel/preset-typescript'),
-        {
-          allExtensions: true,
-          isTSX: true
-        }
-      ]
-    ],
+function transformSync(ast: babel.types.Node, code: string, plugins: babel.PluginItem[] | null | undefined, filename: string | null | undefined) {
+  babel.transformFromAstSync(ast, code, {
+    presets: loadPresets(),
     plugins,
     filename
   })
 }
 
+export function loadPresets() {
+  return [
+    [
+      require('@babel/preset-typescript'),
+      {
+        allExtensions: true,
+        isTSX: true
+      }
+    ]
+  ]
+}
+
 export function preProcessJs(options: IPreProcessJsOptions) {
   const { code, replaceMap, id, ctx } = options
   const magicString = typeof code === 'string' ? new MagicString(code) : code
+  let ast: ParseResult<babel.types.File>
+  try {
+    const file = babel.parseSync(magicString.original, {
+      sourceType: 'unambiguous',
+      presets: loadPresets()
+    })
+    if (file) {
+      ast = file
+    } else {
+      return code
+    }
+  } catch {
+    return code
+  }
+  const markedArray: [number, number][] = []
+  traverse(ast, {
+    CallExpression: {
+      enter(p) {
+        const callee = p.get('callee')
+        if (callee.isIdentifier() && ctx.isPreserveFunction(callee.node.name)) {
+          if (p.node.start && p.node.end) {
+            markedArray.push([p.node.start, p.node.end])
+          }
+
+          p.traverse({
+            StringLiteral: {
+              enter(path) {
+                const node = path.node
+                const value = node.value
+                const arr = sort(splitCode(value)).desc((x) => x.length)
+
+                for (const str of arr) {
+                  if (replaceMap.has(str)) {
+                    ctx.addPreserveClass(str)
+                  }
+                }
+              }
+            },
+            TemplateElement: {
+              enter(path) {
+                const node = path.node
+                const value = node.value.raw
+                const arr = sort(splitCode(value)).desc((x) => x.length)
+
+                for (const str of arr) {
+                  if (replaceMap.has(str)) {
+                    ctx.addPreserveClass(str)
+                  }
+                }
+              }
+            }
+          })
+        }
+      }
+    }
+  })
+
   transformSync(
+    ast,
     magicString.original,
     [
       [
@@ -141,7 +199,8 @@ export function preProcessJs(options: IPreProcessJsOptions) {
           magicString,
           replaceMap,
           id,
-          ctx
+          ctx,
+          markedArray
         }
       ]
     ],
@@ -203,10 +262,8 @@ export function preProcessRawCode(options: IPreProcessRawCodeOptions) {
         continue
       }
     }
-    // console.log(arr, regex.lastIndex)
   }
   for (const [key, value] of replaceMap) {
-    // if (!ctx.isPreserveClass(key)) {
     // 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
@@ -215,7 +272,7 @@ export function preProcessRawCode(options: IPreProcessRawCodeOptions) {
       const end = arr.index + arr[0].length
       let shouldUpdate = true
       for (const [ps, pe] of markArr) {
-        if ((start > ps && start < pe) || (end < pe && end > ps)) {
+        if (between(start, ps, pe) || between(end, ps, pe)) {
           shouldUpdate = false
           break
         }
@@ -228,8 +285,4 @@ export function preProcessRawCode(options: IPreProcessRawCodeOptions) {
   }
 
   return magicString.toString()
-  // for (const [key, value] of replaceMap) {
-  //   code = code.replaceAll(key, value)
-  // }
-  // return code
 }

packages/core/src/math.ts

@@ -0,0 +1,6 @@
+export function between(x: number | null | undefined, min: number, max: number, included: boolean = false) {
+  if (typeof x !== 'number') {
+    return false
+  }
+  return included ? x >= min && x <= max : x > min && x < max
+}

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

@@ -1,5 +1,15 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`js handler > cn 1`] = `
+"const bbb = cn(
+      {
+        'p-3': true
+      },
+      'p-1',
+      ['p-2', true && 'p-4']
+    )"
+`;
+
 exports[`js handler > comment-ignore case 1`] = `
 "const clipPath = [\`circle()\`];
 document.documentElement.animate({

packages/core/test/js.test.ts

@@ -10,7 +10,7 @@ import { Context } from '@/index'
 //   return _jsHandler(str, options)
 // }
 
-describe('js handler', () => {
+describe('js handler', async () => {
   // let classGenerator: ClassGenerator
   let ctx: Context
   beforeEach(() => {
@@ -464,4 +464,28 @@ describe('js handler', () => {
     })
     expect(res).toMatchSnapshot()
   })
+
+  it('cn', async () => {
+    const code = `const bbb = cn(
+      {
+        'p-3': true
+      },
+      'p-1',
+      ['p-2', true && 'p-4']
+    )`
+    await ctx.initConfig({
+      classList: 'p-1 p-2 p-3 p-4'.split(' '),
+      mangleOptions: {
+        preserveFunction: ['cn']
+      }
+    })
+    const replaceMap = ctx.getReplaceMap()
+    const res = preProcessJs({
+      code,
+      replaceMap,
+      ctx,
+      id: 'xxx'
+    })
+    expect(res).toMatchSnapshot()
+  })
 })