fix(vite): fallback dynamic wxml arbitrary classes

Author: sonofmagic

e2e/projectTest.ts

@@ -63,21 +63,23 @@ function formatClassListSnapshot(classList: string[]) {
 const SUSPICIOUS_CLASS_FRAGMENT_RE = /\b[\w-]+-\s+[a-z0-9#]/gi
 const SUSPICIOUS_XL_FRAGMENT_RE = /\b\d+xl\s+\d+xl\b/gi
 
-function countSuspiciousClassFragments(wxml: string) {
-  let count = 0
+function collectSuspiciousClassFragments(wxml: string) {
+  const matches: string[] = []
   const patterns = [
     SUSPICIOUS_CLASS_FRAGMENT_RE,
     SUSPICIOUS_XL_FRAGMENT_RE,
   ]
 
   for (const pattern of patterns) {
-    const matches = wxml.match(pattern)
-    if (matches) {
-      count += matches.length
-    }
+    pattern.lastIndex = 0
+    matches.push(...(wxml.match(pattern) ?? []))
   }
 
-  return count
+  return [...new Set(matches)]
+}
+
+function countSuspiciousClassFragments(wxml: string) {
+  return collectSuspiciousClassFragments(wxml).length
 }
 
 async function captureStablePageWxml(
@@ -225,6 +227,15 @@ async function runProjectTest(entry: ProjectEntry, options: ProjectTestOptions)
           logE2EError('Failed to format WXML for %s', entry.projectPath)
         }
 
+        const suspiciousFragments = collectSuspiciousClassFragments(wxml)
+        if (suspiciousFragments.length > 0) {
+          logE2EError(
+            '[e2e] suspicious class fragments detected in %s/page.wxml: %s',
+            entry.name,
+            suspiciousFragments.join(', '),
+          )
+        }
+
         await expectProjectSnapshot(options.suite, entry.name, 'page.wxml', wxml)
       }
 

packages/weapp-tailwindcss/src/bundlers/vite/generate-bundle.ts

@@ -5,6 +5,8 @@ import type { BundleSnapshot, EntryType } from './bundle-state'
 import type { CreateJsHandlerOptions, InternalUserDefinedOptions, LinkedJsModuleResult } from '@/types'
 import path from 'node:path'
 import process from 'node:process'
+import { logger } from '@weapp-tailwindcss/logger'
+import { splitCode } from '@weapp-tailwindcss/shared/extractors'
 import { getRuntimeClassSetSignature } from '@/tailwindcss/runtime/cache'
 import { createUniAppXAssetTask } from '@/uni-app-x'
 import { processCachedTask } from '../shared/cache'
@@ -148,6 +150,37 @@ function canShareCssTransformResult(rawSource: string) {
   return !rawSource.includes('@import') && !rawSource.includes('url(')
 }
 
+const MUSTACHE_EXPRESSION_RE = /\{\{[\s\S]*?\}\}/g
+const QUOTED_LITERAL_RE = /'([^']*)'|"([^"]*)"|`([^`]*)`/g
+
+function isArbitraryValueCandidate(candidate: string) {
+  return candidate.includes('[') && candidate.includes(']')
+}
+
+function collectUnescapedDynamicCandidates(
+  source: string,
+) {
+  const matches = new Set<string>()
+
+  for (const expression of source.match(MUSTACHE_EXPRESSION_RE) ?? []) {
+    QUOTED_LITERAL_RE.lastIndex = 0
+    let quoted = QUOTED_LITERAL_RE.exec(expression)
+    while (quoted !== null) {
+      const literal = quoted[1] ?? quoted[2] ?? quoted[3] ?? ''
+      for (const candidate of splitCode(literal, true)) {
+        const normalized = candidate.trim()
+        if (!normalized || !isArbitraryValueCandidate(normalized)) {
+          continue
+        }
+        matches.add(normalized)
+      }
+      quoted = QUOTED_LITERAL_RE.exec(expression)
+    }
+  }
+
+  return [...matches]
+}
+
 export function createGenerateBundleHook(context: GenerateBundleContext) {
   const state = createBundleBuildState()
   const cssHandlerOptionsCache = new Map<string, {
@@ -339,7 +372,28 @@ export function createGenerateBundleHook(context: GenerateBundleContext) {
             },
             async transform() {
               const start = performance.now()
-              const transformed = await templateHandler(rawSource, defaultTemplateHandlerOptions)
+              let transformed = await templateHandler(rawSource, defaultTemplateHandlerOptions)
+              let unresolvedDynamicCandidates = collectUnescapedDynamicCandidates(transformed)
+
+              if (unresolvedDynamicCandidates.length > 0) {
+                logger.warn(
+                  '检测到 WXML 动态类名未完成转译，已回退到完整 runtimeSet 重试: %s -> %O',
+                  file,
+                  unresolvedDynamicCandidates,
+                )
+                const fullRuntimeSet = await context.ensureRuntimeClassSet(true)
+                transformed = await templateHandler(rawSource, {
+                  runtimeSet: fullRuntimeSet,
+                })
+                unresolvedDynamicCandidates = collectUnescapedDynamicCandidates(transformed)
+                if (unresolvedDynamicCandidates.length > 0) {
+                  logger.warn(
+                    'WXML 动态类名在完整 runtimeSet 重试后仍未完成转译: %s -> %O',
+                    file,
+                    unresolvedDynamicCandidates,
+                  )
+                }
+              }
               metrics.html.elapsed += measureElapsed(start)
               metrics.html.transformed++
               onUpdate(file, rawSource, transformed)

packages/weapp-tailwindcss/test/bundlers/vite-plugin.bundle.unit.test.ts

@@ -3,9 +3,11 @@ import type { Plugin, ResolvedConfig } from 'vite'
 import type { CreateJsHandlerOptions } from '@/types'
 import { readFile } from 'node:fs/promises'
 import path from 'node:path'
+import { MappingChars2String } from '@weapp-core/escape'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createJsHandler } from '@/js'
 import { replaceWxml } from '@/wxml'
+import { createTemplateHandler } from '@/wxml/utils'
 import {
   createContext,
   createRollupAsset,
@@ -41,6 +43,7 @@ async function loadIssue814Fixture() {
 describe('bundlers/vite UnifiedViteWeappTailwindcssPlugin bundle', () => {
   beforeEach(() => {
     vi.resetModules()
+    vi.doUnmock('@/bundlers/vite/incremental-runtime-class-set')
     resetVitePluginTestContext()
   })
 
@@ -187,6 +190,83 @@ const trace = "at App.vue:4"
     expect(currentContext.twPatcher.getClassSetSync).toHaveBeenCalledTimes(2)
   }, TEST_TIMEOUT_MS)
 
+  it('warns and falls back to full runtime set when bundle runtime set misses dynamic arbitrary candidates in wxml', async () => {
+    const fallbackRuntimeSet = new Set([
+      'bg-[#68c828]',
+      'text-[100px]',
+      'text-[#123456]',
+      'w-[323px]',
+      'h-[30px]',
+      'h-[45px]',
+    ])
+    const incompleteRuntimeSet = new Set([
+      'bg-[#68c828]',
+      'text-[100px]',
+      'text-[#123456]',
+      'w-[323px]',
+    ])
+    const syncMock = vi.fn(async () => incompleteRuntimeSet)
+    const resetMock = vi.fn(async () => undefined)
+    vi.doMock('@/bundlers/vite/incremental-runtime-class-set', () => ({
+      createBundleRuntimeClassSetManager: () => ({
+        sync: syncMock,
+        reset: resetMock,
+      }),
+    }))
+
+    const jsHandler = createJsHandler({
+      escapeMap: MappingChars2String,
+      staleClassNameFallback: false,
+      tailwindcssMajorVersion: 4,
+    })
+    const templateHandler = createTemplateHandler({
+      escapeMap: MappingChars2String,
+      jsHandler,
+    })
+
+    setCurrentContext(createContext({
+      templateHandler,
+      jsHandler,
+      twPatcher: {
+        patch: vi.fn(),
+        getClassSet: vi.fn(async () => fallbackRuntimeSet),
+        getClassSetSync: vi.fn(() => fallbackRuntimeSet),
+        extract: vi.fn(async () => ({ classSet: fallbackRuntimeSet })),
+        majorVersion: 4,
+      },
+    }))
+
+    const UnifiedViteWeappTailwindcssPlugin = await loadUnifiedVitePlugin()
+    const plugins = UnifiedViteWeappTailwindcssPlugin()
+    const postPlugin = plugins?.find(plugin => plugin.name === 'weapp-tailwindcss:adaptor:post') as Plugin
+    expect(postPlugin).toBeTruthy()
+
+    await (postPlugin.configResolved as any)?.call(postPlugin, {
+      command: 'build',
+      root: process.cwd(),
+      css: { postcss: { plugins: [] } },
+      build: { outDir: 'dist' },
+    } as ResolvedConfig)
+
+    const rawWxml = '<view class="bg-[#68c828] text-[100px] text-[#123456] w-[323px] {{true?\'h-[30px]\':\'h-[45px]\'}}">111</view>'
+    const bundle = {
+      'pages/index/index.wxml': {
+        ...createRollupAsset(rawWxml),
+        fileName: 'pages/index/index.wxml',
+      } satisfies OutputAsset,
+    }
+
+    const generateBundle = postPlugin.generateBundle as any
+    await generateBundle?.call(postPlugin, {} as any, bundle)
+
+    expect(syncMock).toHaveBeenCalledTimes(1)
+    const transformed = (bundle['pages/index/index.wxml'] as OutputAsset).source.toString()
+    expect(transformed).toContain('h-_b30px_B')
+    expect(transformed).toContain('h-_b45px_B')
+    expect(transformed).not.toContain('h-[30px]')
+    expect(transformed).not.toContain('h-[45px]')
+  }, TEST_TIMEOUT_MS)
+
   it('refreshes runtime class set when only comment-carried class candidates change', async () => {
     const UnifiedViteWeappTailwindcssPlugin = await loadUnifiedVitePlugin()
     const runtimeSets = [