fix(tailwindcss-patch): refresh v3 runtime state

Author: sonofmagic

.changeset/few-rice-rhyme.md

@@ -0,0 +1,5 @@
+---
+"tailwindcss-patch": patch
+---
+
+Fix Tailwind CSS v3 runtime context refresh so removed classes are dropped correctly across repeated patcher recreations, including HMR-style update flows that add and then remove content classes in the same process.

packages/tailwindcss-patch/src/api/tailwindcss-patcher.ts

@@ -102,8 +102,8 @@ export class TailwindcssPatcher {
   }
 
   private readonly cacheStore: CacheStore
-  private patchMemo?: PatchMemo
-  private inFlightBuild?: Promise<void>
+  private patchMemo: PatchMemo | undefined
+  private inFlightBuild: Promise<void> | undefined
 
   constructor(options: TailwindcssPatcherInitOptions = {}) {
     const resolvedOptions: TailwindcssPatchOptions

packages/tailwindcss-patch/src/runtime/process-tailwindcss.ts

@@ -1,4 +1,5 @@
 import { createRequire } from 'node:module'
+import fs from 'fs-extra'
 import path from 'pathe'
 import postcss from 'postcss'
 import { loadConfig } from 'tailwindcss-config'
@@ -12,6 +13,68 @@ export interface TailwindBuildOptions {
   postcssPlugin?: string
 }
 
+function resolveModuleEntry(id: string) {
+  return path.isAbsolute(id) ? id : require.resolve(id)
+}
+
+function resolvePackageRootFromEntry(entry: string) {
+  let current = path.dirname(entry)
+  while (current && current !== path.dirname(current)) {
+    const packageJsonPath = path.join(current, 'package.json')
+    if (fs.pathExistsSync(packageJsonPath)) {
+      return current
+    }
+    current = path.dirname(current)
+  }
+  return undefined
+}
+
+function clearTailwindV3RuntimeState(pluginName: string) {
+  try {
+    const entry = resolveModuleEntry(pluginName)
+    const root = resolvePackageRootFromEntry(entry)
+    if (!root) {
+      return
+    }
+
+    const sharedStatePath = path.join(root, 'lib/lib/sharedState.js')
+    if (!fs.pathExistsSync(sharedStatePath)) {
+      return
+    }
+
+    const sharedState = require.cache[sharedStatePath]?.exports as
+      | {
+      contextMap?: Map<unknown, unknown>
+      configContextMap?: Map<unknown, unknown>
+      contextSourcesMap?: Map<unknown, unknown>
+      sourceHashMap?: Map<unknown, unknown>
+    }
+      | undefined
+    sharedState?.contextMap?.clear()
+    sharedState?.configContextMap?.clear()
+    sharedState?.contextSourcesMap?.clear()
+    sharedState?.sourceHashMap?.clear()
+
+    for (const candidate of ['lib/plugin.js', 'lib/index.js']) {
+      const runtimeEntry = path.join(root, candidate)
+      if (!fs.pathExistsSync(runtimeEntry)) {
+        continue
+      }
+
+      const runtimeModule = require.cache[runtimeEntry]?.exports as
+        | {
+        contextRef?: { value?: unknown[] }
+      }
+        | undefined
+      runtimeModule?.contextRef?.value?.splice(0, runtimeModule.contextRef.value.length)
+      break
+    }
+  }
+  catch {
+    // best-effort cleanup for Tailwind v3 runtime state
+  }
+}
+
 async function resolveConfigPath(options: TailwindBuildOptions) {
   if (options.config && path.isAbsolute(options.config)) {
     return options.config
@@ -28,6 +91,10 @@ export async function runTailwindBuild(options: TailwindBuildOptions) {
   const configPath = await resolveConfigPath(options)
   const pluginName = options.postcssPlugin ?? (options.majorVersion === 4 ? '@tailwindcss/postcss' : 'tailwindcss')
 
+  if (options.majorVersion === 3) {
+    clearTailwindV3RuntimeState(pluginName)
+  }
+
   if (options.majorVersion === 4) {
     return postcss([
       require(pluginName)({

packages/tailwindcss-patch/test/api.tailwindcss-patcher.test.ts

@@ -1,3 +1,4 @@
+import { createRequire } from 'node:module'
 import os from 'node:os'
 import fs from 'fs-extra'
 import path from 'pathe'
@@ -11,6 +12,7 @@ import * as contextRegistry from '@/runtime/context-registry'
 import * as runtimeBuild from '@/runtime/process-tailwindcss'
 
 const fixturesRoot = path.resolve(__dirname, 'fixtures/v4')
+const require = createRequire(import.meta.url)
 let tempDir: string
 
 beforeEach(async () => {
@@ -276,6 +278,9 @@ describe('TailwindcssPatcher', () => {
         dir: tempDir,
         file: 'cache.json',
       },
+      tailwind: {
+        versionHint: 3,
+      },
     })
 
     const classCache = new Map<string, any>([
@@ -312,6 +317,9 @@ describe('TailwindcssPatcher', () => {
         file: 'cache.json',
         strategy: 'overwrite',
       },
+      tailwind: {
+        versionHint: 3,
+      },
     })
 
     vi.spyOn(patcher, 'getContexts').mockReturnValue([
@@ -333,6 +341,9 @@ describe('TailwindcssPatcher', () => {
     const patcher = new TailwindcssPatcher({
       overwrite: false,
       cache: false,
+      tailwind: {
+        versionHint: 3,
+      },
     })
 
     vi.spyOn(patcher, 'getContexts').mockImplementation(() => contexts)
@@ -658,6 +669,9 @@ describe('TailwindcssPatcher', () => {
         dir: tempDir,
         file: 'cache.json',
       },
+      tailwind: {
+        versionHint: 3,
+      },
     })
 
     vi.spyOn(patcher, 'getContexts').mockReturnValue([
@@ -691,6 +705,9 @@ describe('TailwindcssPatcher', () => {
         file: 'cache.json',
         strategy: 'overwrite',
       },
+      tailwind: {
+        versionHint: 3,
+      },
     })
 
     vi.spyOn(patcher, 'getContexts').mockReturnValue([
@@ -714,6 +731,9 @@ describe('TailwindcssPatcher', () => {
         dir: tempDir,
         file: 'cache.json',
       },
+      tailwind: {
+        versionHint: 3,
+      },
     })
 
     const getContextsSpy = vi.spyOn(patcher, 'getContexts')
@@ -738,4 +758,74 @@ describe('TailwindcssPatcher', () => {
     expect(second?.has('second-pass')).toBe(true)
     expect(second?.has('first-pass')).toBe(false)
   })
+
+  it('drops removed v3 content classes after recreating the patcher', async () => {
+    const projectRoot = await fs.mkdtemp(path.join(tempDir, 'v3-refresh-'))
+    const tailwindRoot = path.dirname(require.resolve('tailwindcss-3/package.json'))
+    const postcssPlugin = require.resolve('tailwindcss-3')
+    const wxmlFile = path.join(projectRoot, 'src/index.wxml')
+    const marker = 'text-red-500'
+
+    try {
+      await fs.ensureDir(path.join(projectRoot, 'src'))
+      await fs.writeFile(
+        path.join(projectRoot, 'tailwind.config.js'),
+        [
+          'const path = require(\'path\')',
+          'module.exports = {',
+          '  content: [path.resolve(__dirname, "./src/*.{js,wxml}")],',
+          '  theme: { extend: {} },',
+          '  plugins: [],',
+          '  corePlugins: { preflight: false },',
+          '}',
+        ].join('\n'),
+        'utf8',
+      )
+      const original = '<view class="font-bold">baseline</view>\n'
+      await fs.writeFile(wxmlFile, original, 'utf8')
+
+      const createPatcher = () => new TailwindcssPatcher({
+        projectRoot,
+        cache: false,
+        output: {
+          enabled: false,
+        },
+        tailwind: {
+          packageName: 'tailwindcss-3',
+          version: 3,
+          resolve: {
+            paths: [path.dirname(tailwindRoot)],
+          },
+          cwd: projectRoot,
+          config: path.join(projectRoot, 'tailwind.config.js'),
+          postcssPlugin,
+          v3: {
+            cwd: projectRoot,
+            config: path.join(projectRoot, 'tailwind.config.js'),
+            postcssPlugin,
+          },
+        },
+      })
+
+      const baselinePatcher = createPatcher()
+      await baselinePatcher.patch()
+      const baseline = await baselinePatcher.extract({ write: false })
+      expect(baseline.classSet.has(marker)).toBe(false)
+
+      await fs.writeFile(wxmlFile, `${original}<view class="${marker}">hmr</view>\n`, 'utf8')
+      const updatedPatcher = createPatcher()
+      await updatedPatcher.patch()
+      const updated = await updatedPatcher.extract({ write: false })
+      expect(updated.classSet.has(marker)).toBe(true)
+
+      await fs.writeFile(wxmlFile, original, 'utf8')
+      const restoredPatcher = createPatcher()
+      await restoredPatcher.patch()
+      const restored = await restoredPatcher.extract({ write: false })
+      expect(restored.classSet.has(marker)).toBe(false)
+    }
+    finally {
+      await fs.remove(projectRoot)
+    }
+  })
 })