fix: resolve mpx v4 relative config paths

Author: sonofmagic

.changeset/fix-mpx-v4-config-path.md

@@ -0,0 +1,5 @@
+---
+"weapp-tailwindcss": patch
+---
+
+修复 Mpx + Tailwind CSS v4 子包 CSS 中相对 `@config` 路径在构建时被错误按项目根解析的问题，保持源码相对当前文件的写法可用。

packages/weapp-tailwindcss/src/bundlers/webpack/loaders/weapp-tw-css-import-rewrite-loader.ts

@@ -2,6 +2,7 @@ import type { TailwindV4CssSource } from 'tailwindcss-patch'
 import type webpack from 'webpack'
 import type { AppType } from '@/types'
 import { Buffer } from 'node:buffer'
+import path from 'node:path'
 import process from 'node:process'
 import { inspect } from 'node:util'
 import { ensurePosix } from '@weapp-tailwindcss/shared'
@@ -45,6 +46,32 @@ function applyCssImportRewrite(source: string, options: CssImportRewriteLoaderOp
   return rewritten ?? source
 }
 
+function isPackageJsonImportRequest(request: string) {
+  return request.startsWith('#')
+}
+
+function toRootRelativeConfigPath(configPath: string, rootContext: string | undefined) {
+  if (!rootContext) {
+    return ensurePosix(configPath)
+  }
+  const relative = ensurePosix(path.relative(rootContext, configPath))
+  return relative.startsWith('.') ? relative : `./${relative}`
+}
+
+function normalizeCssConfigDirectives(source: string, resourcePath?: string, rootContext?: string) {
+  if (!resourcePath) {
+    return source
+  }
+  const base = path.dirname(resourcePath)
+  return source.replace(/@config\s+(["'])(.+?)\1\s*;?/g, (full, quote: string, request: string) => {
+    if (path.isAbsolute(request) || isPackageJsonImportRequest(request)) {
+      return full
+    }
+    const resolved = path.resolve(base, request)
+    return `@config ${quote}${toRootRelativeConfigPath(resolved, rootContext)}${quote};`
+  })
+}
+
 export function transformCssImportRewriteSource(
   source: string | Buffer,
   options: CssImportRewriteLoaderOptions | undefined,
@@ -77,10 +104,20 @@ const WeappTwCssImportRewriteLoader: webpack.LoaderDefinitionFunction<CssImportR
   const registerTask = typeof input === 'string' && hasTailwindRootDirectives(input, { importFallback: true })
     ? opt?.tailwindcssImportRewrite?.registerCssSource?.({
         file: this.resourcePath,
-        css: normalizeTailwindSourceForGenerator(input, { importFallback: true }),
+        css: normalizeCssConfigDirectives(
+          normalizeTailwindSourceForGenerator(input, { importFallback: true }),
+          this.resourcePath,
+          this.rootContext,
+        ),
       })
     : undefined
-  const transform = () => transformCssImportRewriteSource(source, opt)
+  const transform = () => {
+    const transformed = transformCssImportRewriteSource(source, opt)
+    if (typeof transformed === 'string') {
+      return normalizeCssConfigDirectives(transformed, this.resourcePath, this.rootContext)
+    }
+    return transformed
+  }
   if (registerTask && typeof (registerTask as PromiseLike<void>).then === 'function') {
     return Promise.resolve(registerTask).then(transform)
   }

packages/weapp-tailwindcss/test/bundlers/css-imports.test.ts

@@ -49,6 +49,50 @@ describe('bundlers/shared css-imports', () => {
     expect(rewritten).toBe(`@import "${pkgDir}/index.css";`)
   })
 
+  it('normalizes registered relative @config paths against the webpack loader resource file', async () => {
+    const registerCssSource = vi.fn()
+    const result = loader.call({
+      query: {
+        tailwindcssImportRewrite: {
+          pkgDir,
+          appType: 'mpx',
+          registerCssSource,
+        },
+      },
+      resourcePath: '/repo/demo/mpx-tailwindcss-v4/src/sub-normal/pages/index.css',
+      rootContext: '/repo/demo/mpx-tailwindcss-v4',
+    } as any,
+      [
+        '@import "tailwindcss" source(none);',
+        '@config "../../../tailwind.config.sub-normal.js";',
+      ].join('\n'),
+    )
+
+    await Promise.resolve(result)
+
+    expect(result).toBe([
+      `@import "${pkgDir}/index.css" source(none);`,
+      '@config "./tailwind.config.sub-normal.js";',
+    ].join('\n'))
+    expect(registerCssSource).toHaveBeenCalledWith({
+      file: '/repo/demo/mpx-tailwindcss-v4/src/sub-normal/pages/index.css',
+      css: [
+        '@import "tailwindcss" source(none);',
+        '@config "./tailwind.config.sub-normal.js";',
+      ].join('\n'),
+    })
+  })
+
+  it('keeps absolute and package import @config requests unchanged in the webpack loader', () => {
+    expect(transformCssImportRewriteSource('@config "/repo/tailwind.config.js";', {
+      tailwindcssImportRewrite: { pkgDir },
+    })).toBe('@config "/repo/tailwind.config.js";')
+
+    expect(transformCssImportRewriteSource('@config "#tw-config";', {
+      tailwindcssImportRewrite: { pkgDir },
+    })).toBe('@config "#tw-config";')
+  })
+
   it('preserves original source when loader options are missing or unchanged', () => {
     const source = '@import "local.css";'
     const buffer = Buffer.from(source)