chore: mpx usage

Author: sonofmagic

packages/weapp-tailwindcss/src/bundlers/webpack/BaseUnifiedPlugin/v4.ts

@@ -17,7 +17,7 @@ import { resolveOutputSpecifier, toAbsoluteOutputPath } from '../../shared/modul
 import { pushConcurrentTaskFactories } from '../../shared/run-tasks'
 import { applyTailwindcssCssImportRewrite } from '../shared/css-imports'
 import { createLoaderAnchorFinders } from '../shared/loader-anchors'
-import { ensureMpxTailwindcssAliases, isMpx, patchMpxLoaderResolve, setupMpxTailwindcssRedirect } from '../shared/mpx'
+import { ensureMpxTailwindcssAliases, injectMpxCssRewritePreRules, isMpx, patchMpxLoaderResolve, setupMpxTailwindcssRedirect } from '../shared/mpx'
 import { getCacheKey } from './shared'
 
 const debug = createDebug()
@@ -120,26 +120,11 @@ export class UnifiedWebpackPluginV4 implements IBaseWebpackPlugin {
       : undefined
 
     onLoad()
-    if (shouldRewriteCssImports && this.appType === 'mpx') {
+    if (shouldRewriteCssImports && isMpxApp) {
       ensureMpxTailwindcssAliases(compiler, weappTailwindcssPackageDir)
     }
-    if (runtimeCssImportRewriteLoader && shouldRewriteCssImports && cssImportRewriteLoaderOptions && this.appType === 'mpx') {
-      const moduleOptions = (compiler.options.module ??= { rules: [] as any })
-      moduleOptions.rules = moduleOptions.rules || []
-      const createRule = (match: { test?: RegExp, resourceQuery?: RegExp }) => ({
-        ...match,
-        enforce: 'pre' as const,
-        use: [
-          {
-            loader: runtimeCssImportRewriteLoader,
-            options: cssImportRewriteLoaderOptions,
-          },
-        ],
-      })
-      moduleOptions.rules.unshift(
-        createRule({ resourceQuery: /type=styles/ }),
-        createRule({ test: /\.css$/i }),
-      )
+    if (runtimeCssImportRewriteLoader && shouldRewriteCssImports && cssImportRewriteLoaderOptions && isMpxApp) {
+      injectMpxCssRewritePreRules(compiler, runtimeCssImportRewriteLoader, cssImportRewriteLoaderOptions)
     }
     const createRuntimeClassSetLoaderEntry = () => ({
       loader: runtimeClassSetLoader,

packages/weapp-tailwindcss/src/bundlers/webpack/BaseUnifiedPlugin/v5.ts

@@ -16,7 +16,7 @@ import { resolveOutputSpecifier, toAbsoluteOutputPath } from '../../shared/modul
 import { pushConcurrentTaskFactories } from '../../shared/run-tasks'
 import { applyTailwindcssCssImportRewrite } from '../shared/css-imports'
 import { createLoaderAnchorFinders } from '../shared/loader-anchors'
-import { ensureMpxTailwindcssAliases, isMpx, patchMpxLoaderResolve, setupMpxTailwindcssRedirect } from '../shared/mpx'
+import { ensureMpxTailwindcssAliases, injectMpxCssRewritePreRules, isMpx, patchMpxLoaderResolve, setupMpxTailwindcssRedirect } from '../shared/mpx'
 import { getCacheKey } from './shared'
 
 const debug = createDebug()
@@ -122,24 +122,9 @@ export class UnifiedWebpackPluginV5 implements IBaseWebpackPlugin {
     if (shouldRewriteCssImports && isMpxApp) {
       ensureMpxTailwindcssAliases(compiler, weappTailwindcssPackageDir)
     }
-    if (runtimeCssImportRewriteLoader && shouldRewriteCssImports && cssImportRewriteLoaderOptions && this.appType === 'mpx') {
+    if (runtimeCssImportRewriteLoader && shouldRewriteCssImports && cssImportRewriteLoaderOptions && isMpxApp) {
       // Ensure CSS files（如 app.css）在进入 postcss-import 前先被重写。
-      const moduleOptions = (compiler.options.module ??= { rules: [] } as any)
-      moduleOptions.rules = moduleOptions.rules || []
-      const createRule = (match: { test?: RegExp, resourceQuery?: RegExp }) => ({
-        ...match,
-        enforce: 'pre' as const,
-        use: [
-          {
-            loader: runtimeCssImportRewriteLoader,
-            options: cssImportRewriteLoaderOptions,
-          },
-        ],
-      })
-      moduleOptions.rules.unshift(
-        createRule({ resourceQuery: /type=styles/ }),
-        createRule({ test: /\.css$/i }),
-      )
+      injectMpxCssRewritePreRules(compiler, runtimeCssImportRewriteLoader, cssImportRewriteLoaderOptions)
     }
     const createRuntimeClassSetLoaderEntry = () => ({
       loader: runtimeClassSetLoader,

packages/weapp-tailwindcss/src/bundlers/webpack/shared/mpx.ts

@@ -63,3 +63,29 @@ export function setupMpxTailwindcssRedirect(
     installTailwindcssCssRedirect(pkgDir)
   }
 }
+
+export function injectMpxCssRewritePreRules(
+  compiler: any,
+  loader: string | undefined,
+  loaderOptions: any,
+) {
+  if (!loader) {
+    return
+  }
+  const moduleOptions = (compiler.options.module ??= { rules: [] } as any)
+  moduleOptions.rules = moduleOptions.rules || []
+  const createRule = (match: { test?: RegExp, resourceQuery?: RegExp }) => ({
+    ...match,
+    enforce: 'pre' as const,
+    use: [
+      {
+        loader,
+        options: loaderOptions,
+      },
+    ],
+  })
+  moduleOptions.rules.unshift(
+    createRule({ resourceQuery: /type=styles/ }),
+    createRule({ test: /\.css$/i }),
+  )
+}