feat: support multiple tailwindcss context

Author: sonofmagic

packages/tailwindcss-patch/src/cache.ts

@@ -22,7 +22,8 @@ export function getCacheOptions(options: CacheOptions = {}): Required<CacheOptio
     cwd,
     dir,
     file,
-    filename
+    filename,
+    strategy: 'merge'
   }
 }
 

packages/tailwindcss-patch/src/class.ts

@@ -1,5 +1,5 @@
 import { getClassCacheSet, getContexts, getTailwindcssEntry } from './exposeContext'
-import type { CacheOptions, InternalCacheOptions, InternalPatchOptions, TailwindcssPatcherOptions } from './type'
+import type { CacheOptions, InternalCacheOptions, InternalPatchOptions, TailwindcssPatcherOptions, CacheStrategy } from './type'
 import { writeCache, readCache } from './cache'
 import { createPatch, getPatchOptions } from './patcher'
 
@@ -53,9 +53,34 @@ export class TailwindcssPatcher {
     // }
   }
 
-  getClassSet(basedir?: string) {
+  /**
+   * @description 在多个 tailwindcss 上下文时，这个方法将被执行多次，所以策略上应该使用 append
+   * 详见 taro weapp-tailwindcss 独立分包
+   * @param basedir
+   * @returns
+   */
+  getClassSet(
+    options: {
+      basedir?: string
+      cacheStrategy?: CacheStrategy
+    } = {
+      cacheStrategy: this.cacheOptions.strategy ?? 'merge'
+    }
+  ) {
+    const { basedir, cacheStrategy } = options
     const set = getClassCacheSet(basedir)
-    set.size > 0 && this.setCache(set)
+    if (cacheStrategy === 'overwrite') {
+      set.size > 0 && this.setCache(set)
+    } else if (cacheStrategy === 'merge') {
+      const cacheSet = this.getCache()
+      if (cacheSet) {
+        for (const x of cacheSet) {
+          set.add(x)
+        }
+      }
+      this.setCache(set)
+    }
+
     return set
   }
 

packages/tailwindcss-patch/src/exposeContext.ts

@@ -45,7 +45,7 @@ export function getClassCacheSet(basedir?: string): Set<string> {
   for (const classCacheMap of classCaches) {
     const keys = classCacheMap.keys()
     for (const key of keys) {
-      classSet.add(key)
+      classSet.add(key.toString())
     }
   }
   return classSet

packages/tailwindcss-patch/src/type.ts

@@ -1,8 +1,11 @@
+export type CacheStrategy = 'merge' | 'overwrite'
+
 export interface CacheOptions {
   // enable?: boolean
   dir?: string
   cwd?: string
   file?: string
+  strategy?: CacheStrategy
 }
 
 export type InternalCacheOptions = CacheOptions & { enable?: boolean }

packages/tailwindcss-patch/test/cache.test.ts

@@ -2,6 +2,9 @@ import { getCacheOptions, mkCacheDirectory, readCache, writeCache } from '../src
 import path from 'node:path'
 import { pkgName } from '../src/constants'
 import fs from 'node:fs'
+import { TailwindcssPatcher } from '../src/class'
+import { getCss } from './utils'
+
 describe('cache', () => {
   it('getCacheOptions', () => {
     expect(getCacheOptions).toBeDefined()
@@ -54,4 +57,33 @@ describe('cache', () => {
     expect(cache).toBe(undefined)
     expect(fs.existsSync(filepath)).toBe(false)
   })
+
+  it('multiple tw context merge cache', () => {
+    const dir = path.resolve(__dirname, './fixtures/cache')
+    const twPatcher = new TailwindcssPatcher({
+      cache: {
+        dir,
+        file: 'merge-multiple-context.json'
+      }
+    })
+    twPatcher.setCache(new Set())
+    getCss(['text-[100px]'])
+    let ctxs = twPatcher.getContexts()
+    expect(ctxs.length).toBe(1)
+    let set = twPatcher.getClassSet()
+    expect(set.size).toBeGreaterThan(0)
+    expect(set.size).toBe(2)
+    expect(set.has('text-[100px]')).toBe(true)
+
+    // 2 times
+    // 不累加
+    getCss(['text-[99px]'])
+    ctxs = twPatcher.getContexts()
+    expect(ctxs.length).toBe(1)
+    set = twPatcher.getClassSet()
+    expect(set.size).toBeGreaterThan(0)
+    expect(set.size).toBe(3)
+    expect(set.has('text-[99px]')).toBe(true)
+    expect(set.has('text-[100px]')).toBe(true)
+  })
 })

packages/tailwindcss-patch/test/class.test.ts

@@ -31,7 +31,9 @@ describe('class', () => {
     getCss([getTestCase('hello-world.html'), getTestCase('hello-world.js')])
     const ctxs = twPatcher.getContexts()
     expect(ctxs.length).toBe(1)
-    const set = twPatcher.getClassSet()
+    const set = twPatcher.getClassSet({
+      cacheStrategy: 'overwrite'
+    })
     expect(set.size).toBeGreaterThan(0)
     expect(set.size).toBe(5)
   })
@@ -55,5 +57,7 @@ describe('class', () => {
     expect(set.size).toBeGreaterThan(0)
     expect(set.size).toBe(2)
     expect(set.has('text-[99px]')).toBe(true)
+
+    twPatcher.setCache(new Set())
   })
 })

packages/tailwindcss-patch/test/fixtures/cache/merge-multiple-context.json

@@ -0,0 +1,5 @@
+[
+  "*",
+  "text-[99px]",
+  "text-[100px]"
+]