fix: stabilize weapp tailwindcss regressions

sonofmagic · sonofmagic · commit 8e41f8e786e7 · 2026-06-11T23:32:52.000+08:00
diff --git a/demo/taro-vite-react-tailwindcss-v3/package.json b/demo/taro-vite-react-tailwindcss-v3/package.json
@@ -29,7 +29,7 @@
     "build:swan": "taro build --type swan",
     "build:alipay": "taro build --type alipay",
     "build:tt": "taro build --type tt",
-    "build:h5": "taro build --type h5",
+    "build:h5": "node ../../scripts/taro-build-runner.mjs build --type h5",
     "build:rn": "taro build --type rn",
     "build:qq": "taro build --type qq",
     "build:jd": "taro build --type jd",
diff --git a/demo/taro-vite-react-tailwindcss-v4/package.json b/demo/taro-vite-react-tailwindcss-v4/package.json
@@ -19,7 +19,7 @@
     "build:swan": "taro build --type swan",
     "build:alipay": "taro build --type alipay",
     "build:tt": "taro build --type tt",
-    "build:h5": "cross-env BROWSERSLIST_ENV=production taro build --type h5",
+    "build:h5": "cross-env BROWSERSLIST_ENV=production node ../../scripts/taro-build-runner.mjs build --type h5",
     "build:rn": "taro build --type rn",
     "build:qq": "taro build --type qq",
     "build:jd": "taro build --type jd",
diff --git a/demo/taro-vite-vue3-tailwindcss-v3/package.json b/demo/taro-vite-vue3-tailwindcss-v3/package.json
@@ -29,7 +29,7 @@
     "build:swan": "taro build --type swan",
     "build:alipay": "taro build --type alipay",
     "build:tt": "taro build --type tt",
-    "build:h5": "taro build --type h5",
+    "build:h5": "node ../../scripts/taro-build-runner.mjs build --type h5",
     "build:rn": "taro build --type rn",
     "build:qq": "taro build --type qq",
     "build:jd": "taro build --type jd",
diff --git a/demo/taro-vite-vue3-tailwindcss-v4/package.json b/demo/taro-vite-vue3-tailwindcss-v4/package.json
@@ -19,7 +19,7 @@
     "build:swan": "taro build --type swan",
     "build:alipay": "taro build --type alipay",
     "build:tt": "taro build --type tt",
-    "build:h5": "cross-env BROWSERSLIST_ENV=production taro build --type h5",
+    "build:h5": "cross-env BROWSERSLIST_ENV=production node ../../scripts/taro-build-runner.mjs build --type h5",
     "build:rn": "taro build --type rn",
     "build:qq": "taro build --type qq",
     "build:jd": "taro build --type jd",
diff --git a/demo/taro-webpack-react-tailwindcss-v3/package.json b/demo/taro-webpack-react-tailwindcss-v3/package.json
@@ -15,7 +15,7 @@
     "build:swan": "taro build --type swan",
     "build:alipay": "taro build --type alipay",
     "build:tt": "taro build --type tt",
-    "build:h5": "taro build --type h5",
+    "build:h5": "node ../../scripts/taro-build-runner.mjs build --type h5",
     "build:rn": "taro build --type rn",
     "build:qq": "taro build --type qq",
     "build:jd": "taro build --type jd",
diff --git a/demo/taro-webpack-react-tailwindcss-v4/package.json b/demo/taro-webpack-react-tailwindcss-v4/package.json
@@ -19,7 +19,7 @@
     "build:swan": "taro build --type swan",
     "build:alipay": "taro build --type alipay",
     "build:tt": "taro build --type tt",
-    "build:h5": "cross-env BROWSERSLIST_ENV=production taro build --type h5",
+    "build:h5": "cross-env BROWSERSLIST_ENV=production node ../../scripts/taro-build-runner.mjs build --type h5",
     "build:rn": "taro build --type rn",
     "build:qq": "taro build --type qq",
     "build:jd": "taro build --type jd",
diff --git a/demo/taro-webpack-vue3-tailwindcss-v3/package.json b/demo/taro-webpack-vue3-tailwindcss-v3/package.json
@@ -15,7 +15,7 @@
     "build:swan": "taro build --type swan",
     "build:alipay": "taro build --type alipay",
     "build:tt": "taro build --type tt",
-    "build:h5": "taro build --type h5",
+    "build:h5": "node ../../scripts/taro-build-runner.mjs build --type h5",
     "build:rn": "taro build --type rn",
     "build:qq": "taro build --type qq",
     "build:jd": "taro build --type jd",
diff --git a/demo/taro-webpack-vue3-tailwindcss-v4/package.json b/demo/taro-webpack-vue3-tailwindcss-v4/package.json
@@ -19,7 +19,7 @@
     "build:swan": "taro build --type swan",
     "build:alipay": "taro build --type alipay",
     "build:tt": "taro build --type tt",
-    "build:h5": "cross-env BROWSERSLIST_ENV=production taro build --type h5",
+    "build:h5": "cross-env BROWSERSLIST_ENV=production node ../../scripts/taro-build-runner.mjs build --type h5",
     "build:rn": "taro build --type rn",
     "build:qq": "taro build --type qq",
     "build:jd": "taro build --type jd",
diff --git a/e2e/__snapshots__/apps-generator-mode/compare/report.json b/e2e/__snapshots__/apps-generator-mode/compare/report.json
@@ -3079,7 +3079,7 @@
     ],
     "status": "passed",
     "generator": {
-      "bytes": 16795,
+      "bytes": 16689,
       "selectors": [
         ".-m-_b20px_B",
         "._2xl_ctext-_bred_B",
diff --git a/e2e/__snapshots__/apps-generator-mode/compare/report.md b/e2e/__snapshots__/apps-generator-mode/compare/report.md
@@ -9,7 +9,7 @@ This report is generated by `pnpm e2e:apps-generator`. It builds each retained d
 | gulp-tailwindcss-v3 | demo | passed | `gulp-tailwindcss-v3/dist/app.wxss` (+4) | 21987 | 48 | no | no | no | no | yes |
 | gulp-tailwindcss-v4 | demo | passed | `gulp-tailwindcss-v4/dist/app.wxss` (+4) | 11519 | 56 | no | no | no | no | yes |
 | mpx-tailwindcss-v3 | demo | passed | `mpx-tailwindcss-v3/dist/wx/app.wxss` (+20) | 191111 | 2879 | no | no | no | no | yes |
-| mpx-tailwindcss-v4 | demo | passed | `mpx-tailwindcss-v4/dist/wx/app.wxss` (+3) | 16795 | 68 | no | no | no | no | yes |
+| mpx-tailwindcss-v4 | demo | passed | `mpx-tailwindcss-v4/dist/wx/app.wxss` (+3) | 16689 | 68 | no | no | no | no | yes |
 | taro-webpack-react-tailwindcss-v3 | demo | passed | `taro-webpack-react-tailwindcss-v3/dist/app.wxss` (+7) | 82702 | 96 | no | no | no | no | yes |
 | taro-webpack-react-tailwindcss-v4 | demo | passed | `taro-webpack-react-tailwindcss-v4/dist/app.wxss` (+3) | 384447 | 2470 | no | no | no | no | yes |
 | taro-vite-react-tailwindcss-v3 | demo | passed | `taro-vite-react-tailwindcss-v3/dist/app.wxss` (+4) | 9761 | 29 | no | no | no | no | yes |
diff --git a/e2e/__snapshots__/apps-generator-mode/compare/report.zh-CN.md b/e2e/__snapshots__/apps-generator-mode/compare/report.zh-CN.md
@@ -9,7 +9,7 @@
 | gulp-tailwindcss-v3 | demo | 通过 | `gulp-tailwindcss-v3/dist/app.wxss` (+4) | 21987 | 48 | 否 | 否 | 否 | 否 | 是 |
 | gulp-tailwindcss-v4 | demo | 通过 | `gulp-tailwindcss-v4/dist/app.wxss` (+4) | 11519 | 56 | 否 | 否 | 否 | 否 | 是 |
 | mpx-tailwindcss-v3 | demo | 通过 | `mpx-tailwindcss-v3/dist/wx/app.wxss` (+20) | 191111 | 2879 | 否 | 否 | 否 | 否 | 是 |
-| mpx-tailwindcss-v4 | demo | 通过 | `mpx-tailwindcss-v4/dist/wx/app.wxss` (+3) | 16795 | 68 | 否 | 否 | 否 | 否 | 是 |
+| mpx-tailwindcss-v4 | demo | 通过 | `mpx-tailwindcss-v4/dist/wx/app.wxss` (+3) | 16689 | 68 | 否 | 否 | 否 | 否 | 是 |
 | taro-webpack-react-tailwindcss-v3 | demo | 通过 | `taro-webpack-react-tailwindcss-v3/dist/app.wxss` (+7) | 82702 | 96 | 否 | 否 | 否 | 否 | 是 |
 | taro-webpack-react-tailwindcss-v4 | demo | 通过 | `taro-webpack-react-tailwindcss-v4/dist/app.wxss` (+3) | 384447 | 2470 | 否 | 否 | 否 | 否 | 是 |
 | taro-vite-react-tailwindcss-v3 | demo | 通过 | `taro-vite-react-tailwindcss-v3/dist/app.wxss` (+4) | 9761 | 29 | 否 | 否 | 否 | 否 | 是 |
diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/mpx-tailwindcss-v4.md b/e2e/__snapshots__/apps-generator-mode/css-output/mpx-tailwindcss-v4.md
@@ -6,23 +6,14 @@ Generator CSS files: app.wxss, styles/app.wxss, app.wxss, index.wxss
 
 | Bytes | Selectors | @supports | :hover | Tailwind banner | Raw arbitrary selector | Weapp escaped arbitrary selector |
 | ---: | ---: | --- | --- | --- | --- | --- |
-| 16795 | 68 | false | false | false | false | true |
+| 16689 | 68 | false | false | false | false | true |
 
 ## Generator CSS
 
 ### app.wxss
 
 ```css
 @import './styles/app.wxss';
-view,
-text,
-::after,
-::before {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  border: 0 solid;
-}
 ```
 
 ### styles/app.wxss
diff --git a/e2e/taro-h5-build-smoke.test.ts b/e2e/taro-h5-build-smoke.test.ts
@@ -10,6 +10,7 @@ import { taroWebHmrCases } from './taro-web-demo-hmr-cases'
 const repoRoot = path.resolve(__dirname, '..')
 const rawTailwindDirectiveRE = /@(import\s+["']tailwindcss|tailwind|apply|theme|source)\b/
 const textOutputRE = /\.(?:html|js|css|scss|less|sass|styl|json)$/i
+const taroH5BuildRE = /(?:taro-build-runner\.mjs build|taro build)\s+--type h5/
 
 async function readTextOutputs(outputRoot: string) {
   const files = await fg('**/*', {
@@ -47,7 +48,7 @@ describe('demo Taro H5 build smoke', () => {
       const packageJson = JSON.parse(
         await fs.readFile(path.resolve(repoRoot, item.projectDir, 'package.json'), 'utf8'),
       ) as { scripts?: Record<string, string> }
-      expect(packageJson.scripts?.['build:h5'], `${item.name} should expose build:h5`).toContain('taro build --type h5')
+      expect(packageJson.scripts?.['build:h5'], `${item.name} should expose build:h5`).toMatch(taroH5BuildRE)
     }
   })
 
diff --git a/packages/weapp-tailwindcss/src/bundlers/gulp/index.ts b/packages/weapp-tailwindcss/src/bundlers/gulp/index.ts
@@ -65,6 +65,13 @@ export function createPlugins(options: UserDefinedOptions = {}) {
     = (options as UserDefinedOptions & { __internalGulpRuntimeClassSetManager?: BundleRuntimeClassSetManager }).__internalGulpRuntimeClassSetManager
       ?? createBundleRuntimeClassSetManager()
 
+  function invalidateGulpSourceCandidates() {
+    cachedGulpSourceCandidates = undefined
+    cachedGulpSourceCandidateSignature = undefined
+    cachedGulpSourceCandidateGetter = undefined
+    cachedGulpSourceCandidateSourceGetter = undefined
+  }
+
   async function refreshRuntimeSet(options: boolean | {
     forceRefresh?: boolean
     forceCollect?: boolean
@@ -103,6 +110,9 @@ export function createPlugins(options: UserDefinedOptions = {}) {
       source: rawSource,
       type,
     })
+    if (changed && runtimeState.twPatcher.majorVersion === 4) {
+      invalidateGulpSourceCandidates()
+    }
     if (!changed && runtimeSetInitialized) {
       return runtimeSet
     }
diff --git a/packages/weapp-tailwindcss/src/bundlers/vite/processed-css-assets.ts b/packages/weapp-tailwindcss/src/bundlers/vite/processed-css-assets.ts
@@ -6,7 +6,7 @@ import { parseBundlerGeneratedCssMarkerBlocks, stripBundlerGeneratedCssMarkers }
 import { parseImportRequest, removeTailwindSourceDirectives } from '../shared/generator-css/directives'
 import { extractMarkedUserLayerComponentsCss, mergeMarkedUserLayerComponentsCss } from '../shared/generator-css/user-layer-order'
 import { normalizeOutputPathKey } from '../shared/module-graph'
-import { containsCssAfterMinify, filterExistingCssRules, mergeCoveredCssRuleDeclarations, mergeMiniProgramPreflightRuleDeclarations } from './processed-css-assets/css-rules'
+import { containsCssAfterMinify, filterExistingCssRules, mergeCoveredCssRuleDeclarations, mergeMiniProgramPreflightRuleDeclarations, mergeMiniProgramThemeScopeRuleDeclarations } from './processed-css-assets/css-rules'
 
 interface CssAssetMarkerMatcher {
   (asset: OutputAsset, file?: string): boolean
@@ -413,6 +413,14 @@ export function injectViteProcessedCssIntoMainCssAssets(
           continue
         }
       }
+      const mergedThemeScopeDeclarations = mergeMiniProgramThemeScopeRuleDeclarations(nextCss, css)
+      if (mergedThemeScopeDeclarations.changed) {
+        nextCss = mergedThemeScopeDeclarations.baseCss
+        css = mergedThemeScopeDeclarations.css.trim()
+        if (css.length === 0) {
+          continue
+        }
+      }
       const mergedRuleDeclarations = mergeCoveredCssRuleDeclarations(nextCss, css)
       if (mergedRuleDeclarations.changed) {
         nextCss = mergedRuleDeclarations.baseCss
diff --git a/packages/weapp-tailwindcss/src/bundlers/vite/processed-css-assets/css-rules.ts b/packages/weapp-tailwindcss/src/bundlers/vite/processed-css-assets/css-rules.ts
@@ -174,6 +174,11 @@ function isMiniProgramPreflightRuleKey(key: string) {
   return key === 'view,text,:after,:before'
 }
 
+function isMiniProgramThemeScopeRuleKey(key: string) {
+  return key === ':host,page,.tw-root,wx-root-portal-content'
+    || key === 'page,.tw-root,wx-root-portal-content,:host'
+}
+
 export function mergeMiniProgramPreflightRuleDeclarations(baseCss: string, css: string) {
   try {
     const baseRoot = postcss.parse(baseCss)
@@ -223,6 +228,68 @@ export function mergeMiniProgramPreflightRuleDeclarations(baseCss: string, css:
   }
 }
 
+export function mergeMiniProgramThemeScopeRuleDeclarations(baseCss: string, css: string) {
+  try {
+    const baseRoot = postcss.parse(baseCss)
+    const root = postcss.parse(css)
+    const baseRuleRecords = collectCssRuleDeclarationRecords(baseRoot)
+    let changedBase = false
+    let changedCss = false
+
+    root.walkRules((rule) => {
+      const key = getCssRuleStructuralKey(rule)
+      if (!key || !isMiniProgramThemeScopeRuleKey(key)) {
+        return
+      }
+      const records = baseRuleRecords.get(key)
+      const targetRecord = records?.[0]
+      if (!targetRecord) {
+        return
+      }
+      const incomingDeclarations = collectCssRuleDeclarations(rule)
+      if (incomingDeclarations.length === 0) {
+        return
+      }
+      const existingKeys = new Set(records.flatMap(record => [...record.keys]))
+      const existingProps = new Set(records.flatMap(record => [...record.props]))
+      const hasConflictingOverride = incomingDeclarations.some((decl) => {
+        const prop = decl.prop.trim()
+        return existingProps.has(prop) && !existingKeys.has(normalizeCssDeclarationKey(decl))
+      })
+      if (hasConflictingOverride) {
+        return
+      }
+      for (const decl of incomingDeclarations) {
+        const declarationKey = normalizeCssDeclarationKey(decl)
+        if (existingKeys.has(declarationKey)) {
+          continue
+        }
+        targetRecord.rule.append(decl.clone())
+        targetRecord.keys.add(declarationKey)
+        targetRecord.props.add(decl.prop.trim())
+        existingKeys.add(declarationKey)
+        existingProps.add(decl.prop.trim())
+        changedBase = true
+      }
+      rule.remove()
+      changedCss = true
+    })
+
+    if (!changedBase && !changedCss) {
+      return { baseCss, css, changed: false }
+    }
+    removeEmptyAtRules(root)
+    return {
+      baseCss: changedBase ? baseRoot.toString() : baseCss,
+      css: changedCss ? root.toString().trim() : css,
+      changed: true,
+    }
+  }
+  catch {
+    return { baseCss, css, changed: false }
+  }
+}
+
 function isCssRuleCoveredByDeclarations(
   rule: postcss.Rule,
   baseRuleDeclarationKeys: Map<string, Set<string>>,
diff --git a/packages/weapp-tailwindcss/test/__snapshots__/webpack.v5.test.ts.snap b/packages/weapp-tailwindcss/test/__snapshots__/webpack.v5.test.ts.snap
diff --git a/packages/weapp-tailwindcss/test/bundlers/gulp.unit.test.ts b/packages/weapp-tailwindcss/test/bundlers/gulp.unit.test.ts
diff --git a/packages/weapp-tailwindcss/test/bundlers/vite-plugin.bundle.unit.test.ts b/packages/weapp-tailwindcss/test/bundlers/vite-plugin.bundle.unit.test.ts
diff --git a/packages/weapp-tailwindcss/test/tailwindcss/generator-order-parity.test.ts b/packages/weapp-tailwindcss/test/tailwindcss/generator-order-parity.test.ts
diff --git a/scripts/taro-build-runner.mjs b/scripts/taro-build-runner.mjs
diff --git a/tools/weapp-tailwindcss-scripts/src/watch-hmr-regression/cases/demo/extended.ts b/tools/weapp-tailwindcss-scripts/src/watch-hmr-regression/cases/demo/extended.ts
diff --git a/tools/weapp-tailwindcss-scripts/src/watch-hmr-regression/mutations/tokens.ts b/tools/weapp-tailwindcss-scripts/src/watch-hmr-regression/mutations/tokens.ts
