Add string literal replacement for class bindings in Vite plugin

Author: Dog-Egg

src/vite/index.js

@@ -1,6 +1,66 @@
 import { invalidChars } from '../lib/adaptMiniPrograms'
 import tailwindcss from '../index'
 
+/**
+ * 从 JavaScript 表达式中提取所有字符串字面量并替换
+ * 支持数组、对象、三元运算符等复杂语法
+ */
+function replaceStringLiterals(expression, escapeFn) {
+  const replacements = []
+  let i = 0
+  let inString = false
+  let stringChar = null
+  let stringStart = 0
+  let escaped = false
+
+  // 第一步：找到所有字符串字面量的位置
+  while (i < expression.length) {
+    const char = expression[i]
+
+    if (!inString) {
+      // 检查是否是字符串开始（单引号或双引号）
+      if ((char === '"' || char === "'") && !escaped) {
+        inString = true
+        stringChar = char
+        stringStart = i
+        escaped = false
+      } else {
+        escaped = char === '\\' && !escaped
+      }
+    } else {
+      // 在字符串内部
+      if (char === '\\' && !escaped) {
+        escaped = true
+      } else if (char === stringChar && !escaped) {
+        // 字符串结束，记录需要替换的内容
+        const stringContent = expression.slice(stringStart + 1, i)
+        const escapedContent = escapeFn(stringContent)
+        replacements.push({
+          start: stringStart + 1,
+          end: i,
+          replacement: escapedContent,
+        })
+        inString = false
+        stringChar = null
+        escaped = false
+      } else {
+        escaped = false
+      }
+    }
+
+    i++
+  }
+
+  // 第二步：从后向前替换，避免位置偏移
+  let result = expression
+  for (let j = replacements.length - 1; j >= 0; j--) {
+    const { start, end, replacement } = replacements[j]
+    result = result.slice(0, start) + replacement + result.slice(end)
+  }
+
+  return result
+}
+
 export default function modifyClasses() {
   return {
     name: 'modify-classes',
@@ -20,20 +80,43 @@ export default function modifyClasses() {
         return
       }
 
-      const re = new RegExp(
-        `[${Array.from(invalidChars)
-          .map((char) => `\\${char}`)
-          .join('')}]`,
-        'g'
-      )
-      // 替换所有 class="..."
-      const transformed = code.replace(/class\s*=\s*"([^"]+)"/g, (_, classValue) => {
-        const newClasses = classValue
+      // 构建转义正则，转义字符类中需要转义的特殊字符
+      // 在字符类中，需要转义的字符有: ] \ - ^
+      const escapedChars = Array.from(invalidChars)
+        .map((char) => {
+          // 在字符类中，] 和 \ 需要转义
+          if (char === ']' || char === '\\') {
+            return `\\${char}`
+          }
+          return char
+        })
+        .join('')
+      const re = new RegExp(`[${escapedChars}]`, 'g')
+
+      // 转义类名中的特殊字符
+      const escapeClassName = (className) => className.replace(re, '_')
+
+      // 转义类名字符串中的类名
+      const escapeClassString = (classString) => {
+        return classString
           .split(/\s+/)
-          .map((cls) => cls.replace(re, '_'))
+          .map((cls) => escapeClassName(cls))
           .join(' ')
-        return `class="${newClasses}"`
+      }
+
+      let transformed = code
+
+      // 替换 class="..." (但不匹配 :class)
+      transformed = transformed.replace(/(^|[^:])(\s*)class\s*=\s*"([^"]+)"/g, (match, before, space, classValue) => {
+        return `${before}${space}class="${escapeClassString(classValue)}"`
+      })
+
+      // 使用 AST 解析 :class 绑定中的 JavaScript 表达式
+      transformed = transformed.replace(/:class\s*=\s*"([^"]+)"/g, (match, expression) => {
+        const escapedExpression = replaceStringLiterals(expression, escapeClassString)
+        return `:class="${escapedExpression}"`
       })
+
       return transformed
     },
   }

tests/mini-programs.test.js

@@ -126,6 +126,11 @@ test('vite plugin', async () => {
       <div class="first:mt-[20rpx] hover:bg-gray-100"></div>
       <div class="h-[80.5%]"></div>
       <div class="w-1/2"></div>
+
+      <!-- vue language -->
+      <div :class="['space-x-3 w-1/2', 'h-[80.5%]']"></div>
+      <div :class="isActive ? 'w-1/2' : 'w-1/3'"></div>
+      <div :class="{ 'w-1/2': isActive, 'w-1/3': !isActive }"></div>
     </template>
   `
   expect(modifyClasses().transform(source, 'App.vue')).toMatchInlineSnapshot(`
@@ -134,6 +139,11 @@ test('vite plugin', async () => {
           <div class="first_mt-_20rpx_ hover_bg-gray-100"></div>
           <div class="h-_80_5__"></div>
           <div class="w-1_2"></div>
+
+          <!-- vue language -->
+          <div :class="['space-x-3 w-1_2', 'h-_80_5__']"></div>
+          <div :class="isActive ? 'w-1_2' : 'w-1_3'"></div>
+          <div :class="{ 'w-1_2': isActive, 'w-1_3': !isActive }"></div>
         </template>
       "
   `)