test: fix e2e watch demo regressions

Author: sonofmagic

.gitignore

@@ -131,6 +131,7 @@ website/tests/index.spec.ts-snapshots
 /.playwright-cli/
 /.playwright-mcp/
 .tmp/
+.codex-tmp/
 **/.weapp-vite/
 
 # Python cache

demo/gulp-tailwindcss-v4/gulpfile.ts

@@ -52,6 +52,11 @@ const generator = {
 const { transformJs, transformWxml, transformWxss } = createPlugins({
   rem2rpx: true,
   generator,
+  tailwindcss: {
+    version: 4,
+    packageName: 'tailwindcss',
+    postcssPlugin: '@tailwindcss/postcss',
+  },
 })
 // {
 //   mangle: true

packages/weapp-tailwindcss/test/watch-hmr-regression.unit.test.ts

@@ -17,6 +17,7 @@ import {
 import {
   buildHexScriptRoundConfigs,
   buildIssue33HighRiskRoundConfigs,
+  buildTailwindV4JsContentRoundConfigs,
 } from '../../../tools/weapp-tailwindcss-scripts/src/watch-hmr-regression/cases/round-configs'
 import {
   resolveReportPath,
@@ -789,6 +790,32 @@ describe('watch-hmr regression cases', () => {
     expect(hexRound?.buildClassTokens('12345678').some(token => token.startsWith('shadow-[0_'))).toBe(true)
   })
 
+  it('keeps tailwind v4 js content rounds to tokens that produce css from script scanning', () => {
+    const [, complexRound] = buildTailwindV4JsContentRoundConfigs()
+    const tokens = complexRound?.buildClassTokens('123456') ?? []
+
+    expect(tokens).toEqual(expect.arrayContaining([
+      '!mt-2',
+      '-translate-y-1',
+      'data-[state=open]:opacity-100',
+      '[mask-type:luminance]',
+    ]))
+    expect(tokens).not.toEqual(expect.arrayContaining([
+      '[@supports(display:grid)]:grid',
+      'supports-[backdrop-filter:blur(2px)]:backdrop-blur-[2px]',
+      '[@media(any-hover:hover){&:hover}]:opacity-100',
+      'supports-[display:grid]:grid',
+    ]))
+  })
+
+  it('uses tailwind v4 js content rounds for gulp v4 script mutations', () => {
+    const gulpV4Case = buildDemoBaseCases('/repo').find(watchCase => watchCase.name === 'gulp-tailwindcss-v4')
+    const [, complexRound] = gulpV4Case?.scriptMutation.roundConfigs ?? []
+
+    expect(complexRound?.name).toBe('complex-corpus')
+    expect(complexRound?.buildClassTokens('123456')).not.toContain('[@media(any-hover:hover){&:hover}]:opacity-100')
+  })
+
   it('tracks taro webpack v4 style outputs in both page and app wxss candidates', () => {
     const taroWebpackCase = buildDemoExtendedCases('/repo').find(item => item.name === 'taro-webpack-react-tailwindcss-v4')
 

tools/weapp-tailwindcss-scripts/src/watch-hmr-regression/cases/demo/base.ts

@@ -12,7 +12,7 @@ import {
   mutateVueScriptSetupObjectKeyByAnchorWithCommentCarrier,
   replaceExactSnippet,
 } from '../../text'
-import { buildHexScriptRoundConfigs, buildIssue33HighRiskRoundConfigs } from '../round-configs'
+import { buildHexScriptRoundConfigs, buildIssue33HighRiskRoundConfigs, buildTailwindV4JsContentRoundConfigs } from '../round-configs'
 
 const taroWatchEnv = {
   TARO_BUILD_STRICT: '1',
@@ -325,7 +325,7 @@ export function buildDemoBaseCases(baseCwd: string): WatchCase[] {
     scriptMutation: {
       ...gulpCase.scriptMutation,
       sourceFile: path.resolve(baseCwd, 'demo/gulp-tailwindcss-v4/src/pages/index/index.ts'),
-      roundConfigs: buildHexScriptRoundConfigs(),
+      roundConfigs: buildTailwindV4JsContentRoundConfigs(),
     },
     styleMutation: {
       ...gulpCase.styleMutation,
@@ -369,7 +369,7 @@ export function buildDemoBaseCases(baseCwd: string): WatchCase[] {
       mutate(source, payload) {
         return replaceExactSnippet(
           source,
-          'const pageClassName = \'bg-[#123456]\'',
+          'const pageClassName = \'bg-[#d72929]\'',
           `const pageClassName = '${payload.classLiteral}'`,
           'weapp-vite script class anchor',
         )

tools/weapp-tailwindcss-scripts/src/watch-hmr-regression/cases/round-configs.ts

@@ -8,6 +8,12 @@ import {
 } from '../mutations/tokens'
 
 const NON_DIGIT_RE = /\D/g
+const TAILWIND_V4_JS_CONTENT_UNSUPPORTED_TOKENS = new Set([
+  '[@supports(display:grid)]:grid',
+  'supports-[backdrop-filter:blur(2px)]:backdrop-blur-[2px]',
+  '[@media(any-hover:hover){&:hover}]:opacity-100',
+  'supports-[display:grid]:grid',
+])
 
 export function buildHexScriptRoundConfigs() {
   const rounds = [
@@ -73,6 +79,17 @@ export function buildHexScriptRoundConfigs() {
   ]
 }
 
+export function buildTailwindV4JsContentRoundConfigs() {
+  return buildHexScriptRoundConfigs().map(roundConfig => ({
+    ...roundConfig,
+    buildClassTokens(seed: string) {
+      return roundConfig
+        .buildClassTokens(seed)
+        .filter(token => !TAILWIND_V4_JS_CONTENT_UNSUPPORTED_TOKENS.has(token))
+    },
+  }))
+}
+
 export function buildIssue33ScriptRoundConfigs() {
   return [
     {