fix: 修复当 cssEntries 指向子目录文件时强制重写 Tailwind v4 base 的问题

Author: sonofmagic

.changeset/tiaozheng-cssentries-jichu.md

@@ -0,0 +1,5 @@
+---
+'weapp-tailwindcss': patch
+---
+
+修复当 `cssEntries` 指向子目录文件时强制重写 Tailwind v4 `base` 的问题，优先沿用工作区/用户指定根目录并在多包场景下智能分组；补充整合测试确保通过 `getCompilerContext` 仍能识别子目录样式并正确重写 `bg-[#00aa55]` 这类动态类名。

benchmark/data/2025-11-27.json

@@ -5,7 +5,8 @@
       592.9260840000006,
       962.3252920000014,
       589.087125,
-      870.4599589999998
+      870.4599589999998,
+      180.84000000000015
     ]
   },
   "rax": {
@@ -20,7 +21,12 @@
       663.5587500000001,
       1847.5564999999988,
       772.8657909999993,
-      1215.4829580000005
+      1215.4829580000005,
+      130.59170899999936,
+      135.9237919999996,
+      139.932417,
+      222.61924999999974,
+      248.11099999999988
     ]
   },
   "taro-react": {
@@ -39,7 +45,10 @@
       294.9744999999966,
       2141.2788329999967,
       2651.306875000002,
-      474.655709000006
+      474.655709000006,
+      450.9234579999975,
+      153.07587500000227,
+      187.0468329999967
     ]
   },
   "uni-app-webpack-vue2": {
@@ -48,7 +57,8 @@
       2489.4247499999983,
       496.32066699999996,
       1445.2460830000018,
-      1538.2430000000022
+      1538.2430000000022,
+      736.6286670000009
     ]
   },
   "native-webpack": {
@@ -57,7 +67,8 @@
       187.3241250000001,
       494.0784999999996,
       296.815208,
-      451.606541000001
+      451.606541000001,
+      62.77299999999991
     ]
   },
   "taro-vue3": {
@@ -66,7 +77,8 @@
       866.9951660000006,
       293.1339169999992,
       590.4976250000036,
-      564.633249999999
+      564.633249999999,
+      170.9773750000004
     ]
   },
   "mpx": {
@@ -87,7 +99,14 @@
       459.89008399999875,
       3610.6299580000014,
       2283.188292,
-      2122.0997499999994
+      2122.0997499999994,
+      53.40770899999916,
+      362.8924590000006,
+      182.1295829999981,
+      183.09991699999955,
+      144.08699999999953,
+      30.053584000001138,
+      328.2539170000018
     ]
   }
 }

packages/weapp-tailwindcss/src/context/tailwindcss.ts

@@ -258,10 +258,44 @@ function normalizeCssEntries(entries: string[] | undefined, anchor: string): str
   return normalized.size > 0 ? [...normalized] : undefined
 }
 
-function groupCssEntriesByBase(entries: string[]) {
+interface GroupCssEntriesOptions {
+  preferredBaseDir?: string
+  workspaceRoot?: string
+}
+
+function isSubPath(parent: string | undefined, child: string | undefined) {
+  if (!parent || !child) {
+    return false
+  }
+  const relative = path.relative(parent, child)
+  return relative === '' || (!relative.startsWith('..') && !path.isAbsolute(relative))
+}
+
+function resolveCssEntryBase(entryDir: string, options: GroupCssEntriesOptions): string {
+  const normalizedDir = path.normalize(entryDir)
+  const { preferredBaseDir, workspaceRoot } = options
+  if (preferredBaseDir && isSubPath(preferredBaseDir, normalizedDir)) {
+    return preferredBaseDir
+  }
+  if (workspaceRoot && isSubPath(workspaceRoot, normalizedDir)) {
+    return workspaceRoot
+  }
+  const packageRoot = findNearestPackageRoot(normalizedDir)
+  if (packageRoot) {
+    return path.normalize(packageRoot)
+  }
+  return normalizedDir
+}
+
+function groupCssEntriesByBase(entries: string[], options: GroupCssEntriesOptions = {}) {
+  const normalizedOptions: GroupCssEntriesOptions = {
+    preferredBaseDir: options.preferredBaseDir ? path.normalize(options.preferredBaseDir) : undefined,
+    workspaceRoot: options.workspaceRoot ? path.normalize(options.workspaceRoot) : undefined,
+  }
   const groups = new Map<string, string[]>()
   for (const entry of entries) {
-    const baseDir = path.normalize(path.dirname(entry))
+    const entryDir = path.dirname(entry)
+    const baseDir = resolveCssEntryBase(entryDir, normalizedOptions)
     const bucket = groups.get(baseDir)
     if (bucket) {
       bucket.push(entry)
@@ -537,8 +571,14 @@ export function createTailwindcssPatcherFromContext(ctx: InternalUserDefinedOpti
     appType,
   }
 
+  const workspaceRoot = findWorkspaceRoot(resolvedTailwindcssBasedir)
+    ?? (absoluteCssEntryBasedir ? findWorkspaceRoot(absoluteCssEntryBasedir) : undefined)
+
   const groupedCssEntries = normalizedCssEntries
-    ? groupCssEntriesByBase(normalizedCssEntries)
+    ? groupCssEntriesByBase(normalizedCssEntries, {
+        preferredBaseDir: resolvedTailwindcssBasedir,
+        workspaceRoot,
+      })
     : undefined
 
   const multiPatcher = groupedCssEntries

packages/weapp-tailwindcss/test/context/cssEntries.integration.test.ts

@@ -0,0 +1,28 @@
+import path from 'node:path'
+import { escape } from '@weapp-core/escape'
+import { describe, expect, it } from 'vitest'
+import { getCompilerContext } from '@/context'
+import { collectRuntimeClassSet } from '@/tailwindcss/runtime'
+
+describe('cssEntries integration', () => {
+  it('collects class names from nested css entries and rewrites arbitrary classes', async () => {
+    const projectRoot = path.resolve(__dirname, '..', 'fixtures', 'tailwind-v4-app')
+    const cssEntry = path.join(projectRoot, 'src', 'main.css')
+
+    const ctx = getCompilerContext({
+      tailwindcssBasedir: projectRoot,
+      cssEntries: [cssEntry],
+    })
+
+    await ctx.twPatcher.patch()
+    const runtimeSet = await collectRuntimeClassSet(ctx.twPatcher, { force: true, skipRefresh: true })
+    expect(runtimeSet.size).toBeGreaterThan(0)
+    expect(runtimeSet.has('bg-[#00aa55]')).toBe(true)
+    const source = 'const cls = \'bg-[#00aa55]\''
+    const result = ctx.jsHandler(source, runtimeSet)
+    const expectedClass = escape('bg-[#00aa55]')
+
+    expect(result.code).toContain(expectedClass)
+    expect(result.code).not.toContain('bg-[#00aa55]')
+  })
+})

packages/weapp-tailwindcss/test/context/tailwindcss.test.ts

@@ -1,5 +1,7 @@
 import type { CreateTailwindcssPatcherOptions } from '@/tailwindcss/patcher'
 import type { InternalUserDefinedOptions, TailwindcssPatcherLike } from '@/types'
+import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from 'node:fs'
+import os from 'node:os'
 import path from 'node:path'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -63,7 +65,7 @@ describe('createTailwindcssPatcherFromContext', () => {
     vi.resetModules()
   })
 
-  it('creates multiple patchers when css entries resolve to different directories', async () => {
+  it('creates multiple patchers when css entries belong to different package roots', async () => {
     const calls: CreateTailwindcssPatcherOptions[] = []
     const createdPatchers: TailwindcssPatcherLike[] = []
     const classSets = [['foo'], ['bar']]
@@ -77,7 +79,6 @@ describe('createTailwindcssPatcherFromContext', () => {
           const stub: TailwindcssPatcherLike = {
             packageInfo: { version: '4.1.0' } as any,
             majorVersion: 4,
-            // 测试仅校验结构传递，避免在此处施加过严的类型约束
             options: options as any,
             patch: vi.fn(async () => ({})),
             getClassSet: vi.fn(async () => new Set(classes)),
@@ -93,39 +94,57 @@ describe('createTailwindcssPatcherFromContext', () => {
     })
 
     const { createTailwindcssPatcherFromContext } = await import('@/context/tailwindcss')
-    const workspace = path.resolve('/workspace/project')
+
+    const workspaceTemp = mkdtempSync(path.join(os.tmpdir(), 'weapp-tw-workspace-'))
+    const workspace = path.join(workspaceTemp, 'project')
+    mkdirSync(path.join(workspace, 'apps', 'alpha', 'src'), { recursive: true })
+    writeFileSync(path.join(workspace, 'package.json'), JSON.stringify({ name: 'workspace-root' }))
+    writeFileSync(path.join(workspace, 'pnpm-workspace.yaml'), 'packages:\n  - apps/*\n')
+    writeFileSync(path.join(workspace, 'apps', 'alpha', 'package.json'), JSON.stringify({ name: 'alpha' }))
     const entryA = path.join(workspace, 'apps', 'alpha', 'src', 'app.css')
-    const entryB = path.join(workspace, 'apps', 'beta', 'src', 'app.css')
-    const ctx = {
-      tailwindcssBasedir: workspace,
-      supportCustomLengthUnitsPatch: undefined,
-      tailwindcss: undefined,
-      tailwindcssPatcherOptions: undefined,
-      cssEntries: [entryA, entryB],
-      appType: 'taro',
-    } as unknown as InternalUserDefinedOptions
-
-    const patcher = createTailwindcssPatcherFromContext(ctx)
-
-    expect(calls).toHaveLength(2)
-    expect(calls.map(call => call.basedir)).toEqual([
-      path.dirname(entryA),
-      path.dirname(entryB),
-    ])
-
-    await patcher.patch()
-    expect(createdPatchers[0].patch).toHaveBeenCalledTimes(1)
-    expect(createdPatchers[1].patch).toHaveBeenCalledTimes(1)
-
-    const classSet = await patcher.getClassSet()
-    expect(Array.from(classSet)).toEqual(['foo', 'bar'])
-
-    const extracted = await patcher.extract({})
-    expect(Array.from(extracted.classSet)).toEqual(['foo', 'bar'])
-    expect(extracted.classList).toEqual(['foo', 'bar'])
+
+    const externalTemp = mkdtempSync(path.join(os.tmpdir(), 'weapp-tw-external-'))
+    const externalRoot = path.join(externalTemp, 'external')
+    mkdirSync(path.join(externalRoot, 'src'), { recursive: true })
+    writeFileSync(path.join(externalRoot, 'package.json'), JSON.stringify({ name: 'external-app' }))
+    const entryB = path.join(externalRoot, 'src', 'app.css')
+
+    try {
+      const ctx = {
+        tailwindcssBasedir: workspace,
+        supportCustomLengthUnitsPatch: undefined,
+        tailwindcss: undefined,
+        tailwindcssPatcherOptions: undefined,
+        cssEntries: [entryA, entryB],
+        appType: 'taro',
+      } as unknown as InternalUserDefinedOptions
+
+      const patcher = createTailwindcssPatcherFromContext(ctx)
+
+      expect(calls).toHaveLength(2)
+      expect(calls.map(call => call.basedir)).toEqual([
+        workspace,
+        externalRoot,
+      ])
+
+      await patcher.patch()
+      expect(createdPatchers[0].patch).toHaveBeenCalledTimes(1)
+      expect(createdPatchers[1].patch).toHaveBeenCalledTimes(1)
+
+      const classSet = await patcher.getClassSet()
+      expect(Array.from(classSet)).toEqual(['foo', 'bar'])
+
+      const extracted = await patcher.extract({})
+      expect(Array.from(extracted.classSet)).toEqual(['foo', 'bar'])
+      expect(extracted.classList).toEqual(['foo', 'bar'])
+    }
+    finally {
+      rmSync(workspaceTemp, { recursive: true, force: true })
+      rmSync(externalTemp, { recursive: true, force: true })
+    }
   })
 
-  it('returns a single patcher when css entries share the same base directory', async () => {
+  it('returns a single patcher when css entries share the same workspace base', async () => {
     const createdPatchers: TailwindcssPatcherLike[] = []
     const calls: CreateTailwindcssPatcherOptions[] = []
     const createTailwindcssPatcher = vi.fn((options: CreateTailwindcssPatcherOptions) => {
@@ -150,27 +169,44 @@ describe('createTailwindcssPatcherFromContext', () => {
     vi.doMock('@/tailwindcss', () => ({ createTailwindcssPatcher }))
 
     const { createTailwindcssPatcherFromContext } = await import('@/context/tailwindcss')
-    const workspace = path.resolve('/workspace/project')
-    const baseDir = path.join(workspace, 'apps', 'alpha', 'src')
-    const ctx = {
-      tailwindcssBasedir: undefined,
-      supportCustomLengthUnitsPatch: undefined,
-      tailwindcss: undefined,
-      tailwindcssPatcherOptions: undefined,
-      cssEntries: [
-        path.join(baseDir, 'app.css'),
-        path.join(baseDir, 'other.css'),
-      ],
-      appType: 'taro',
-    } as unknown as InternalUserDefinedOptions
-
-    const patcher = createTailwindcssPatcherFromContext(ctx)
-
-    expect(createTailwindcssPatcher).toHaveBeenCalledTimes(1)
-    expect(patcher).toBe(createdPatchers[0])
-    expect(calls[0].tailwindcss?.v4?.cssEntries).toEqual([
-      path.join(baseDir, 'app.css'),
-      path.join(baseDir, 'other.css'),
-    ])
+    const workspaceTemp = mkdtempSync(path.join(os.tmpdir(), 'weapp-tw-single-'))
+    const workspace = path.join(workspaceTemp, 'project')
+    mkdirSync(path.join(workspace, 'apps', 'alpha', 'src'), { recursive: true })
+    mkdirSync(path.join(workspace, 'apps', 'beta', 'src'), { recursive: true })
+    writeFileSync(path.join(workspace, 'package.json'), JSON.stringify({ name: 'workspace-root' }))
+    writeFileSync(path.join(workspace, 'pnpm-workspace.yaml'), 'packages:\n  - apps/*\n')
+    writeFileSync(path.join(workspace, 'apps', 'alpha', 'package.json'), JSON.stringify({ name: 'alpha' }))
+    writeFileSync(path.join(workspace, 'apps', 'beta', 'package.json'), JSON.stringify({ name: 'beta' }))
+    const entryA = path.join(workspace, 'apps', 'alpha', 'src', 'app.css')
+    const entryB = path.join(workspace, 'apps', 'beta', 'src', 'other.css')
+
+    try {
+      const ctx = {
+        tailwindcssBasedir: workspace,
+        supportCustomLengthUnitsPatch: undefined,
+        tailwindcss: undefined,
+        tailwindcssPatcherOptions: undefined,
+        cssEntries: [entryA, entryB],
+        appType: 'taro',
+      } as unknown as InternalUserDefinedOptions
+
+      const patcher = createTailwindcssPatcherFromContext(ctx)
+
+      expect(createTailwindcssPatcher).toHaveBeenCalledTimes(1)
+      expect(patcher).toBe(createdPatchers[0])
+      expect(calls[0].basedir).toBe(workspace)
+      expect(calls[0].tailwindcss?.v4?.base).toBe(workspace)
+      expect(calls[0].tailwindcss?.v4?.cssEntries).toEqual([
+        entryA,
+        entryB,
+      ])
+      expect(ctx.cssEntries).toEqual([
+        entryA,
+        entryB,
+      ])
+    }
+    finally {
+      rmSync(workspaceTemp, { recursive: true, force: true })
+    }
   })
 })

packages/weapp-tailwindcss/test/fixtures/tailwind-v4-app/package.json

@@ -0,0 +1,3 @@
+{
+  "name": "tailwind-v4-fixture"
+}

packages/weapp-tailwindcss/test/fixtures/tailwind-v4-app/src/index.html

@@ -0,0 +1,8 @@
+<!doctype html>
+<html>
+  <body>
+    <div class="bg-[#00aa55]">
+      fixture
+    </div>
+  </body>
+</html>

packages/weapp-tailwindcss/test/fixtures/tailwind-v4-app/src/main.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

packages/weapp-tailwindcss/test/fixtures/tailwind-v4-app/tailwind.config.js

@@ -0,0 +1,14 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './src/index.html',
+  ],
+  theme: {
+    extend: {},
+  },
+  corePlugins: {
+    preflight: false,
+    container: false,
+  },
+  plugins: [],
+}