refactor: TailwindcssPatcher

Author: sonofmagic

packages/tailwindcss-patch/package.json

@@ -56,6 +56,7 @@
     "cac": "^6.7.14",
     "jiti": "^1.21.0",
     "lilconfig": "^3.1.1",
+    "local-pkg": "^0.5.0",
     "postcss": "^8.4.38",
     "resolve": "^1.22.8",
     "semver": "^7.6.2"

packages/tailwindcss-patch/src/core/exposeContext.ts

@@ -1,5 +1,4 @@
 export * from './tw-patcher'
-export * from './exposeContext'
 export * from './inspector'
 export * from './runtime-patcher'
 export * from './cache'

packages/tailwindcss-patch/src/core/index.ts

@@ -96,7 +96,10 @@ export function inspectPostcssPlugin(content: string) {
           if (t.isFunctionExpression(targetFn)) {
             // 函数体
             const targetBlockStatement = targetFn.body
-
+            if (t.isExpressionStatement(targetBlockStatement.body[0]) && t.isAssignmentExpression(targetBlockStatement.body[0].expression) && t.isNumericLiteral(targetBlockStatement.body[0].expression.right)) {
+              hasPatched = true
+              return
+            }
             const lastStatement = targetBlockStatement.body[targetBlockStatement.body.length - 1]
             if (t.isExpressionStatement(lastStatement)) {
               // contextRef.value.push((0, _processTailwindFeatures.default)(context)(root, result));

packages/tailwindcss-patch/src/core/inspector-postcss7-compat.ts

@@ -5,6 +5,7 @@ import { gte } from 'semver'
 import type { PackageJson } from 'pkg-types'
 import { defu } from 'defu'
 import { inspectPostcssPlugin, inspectProcessTailwindFeaturesReturnContext } from './inspector'
+import { inspectPostcssPlugin as inspectPostcssPluginCompat, inspectProcessTailwindFeaturesReturnContext as inspectProcessTailwindFeaturesReturnContextCompat } from './inspector-postcss7-compat'
 import type { InternalPatchOptions, PatchOptions } from '@/types'
 import { getDefaultPatchOptions } from '@/defaults'
 import { ensureFileContent, requireResolve } from '@/utils'
@@ -14,6 +15,7 @@ export function getInstalledPkgJsonPath(options: PatchOptions = {}) {
     // const cwd = process.cwd()
     const tmpJsonPath = requireResolve(`tailwindcss/package.json`, {
       paths: options.paths,
+      basedir: options.basedir,
     })
 
     return tmpJsonPath
@@ -89,7 +91,7 @@ export function monkeyPatchForExposingContextV2(twDir: string, opt: InternalPatc
   const processTailwindFeaturesContent = ensureFileContent(processTailwindFeaturesFilePath)
   const result: { processTailwindFeatures?: string, plugin?: string } & Record<string, any> = {}
   if (processTailwindFeaturesContent) {
-    const { code, hasPatched } = inspectProcessTailwindFeaturesReturnContext(processTailwindFeaturesContent)
+    const { code, hasPatched } = inspectProcessTailwindFeaturesReturnContextCompat(processTailwindFeaturesContent)
     if (!hasPatched && opt.overwrite) {
       fs.writeFileSync(processTailwindFeaturesFilePath, code, {
         encoding: 'utf8',
@@ -102,7 +104,7 @@ export function monkeyPatchForExposingContextV2(twDir: string, opt: InternalPatc
   const indexFilePath = path.resolve(twDir, 'lib/jit/index.js')
   const pluginContent = ensureFileContent([indexFilePath])
   if (pluginContent) {
-    const { code, hasPatched } = inspectPostcssPlugin(pluginContent)
+    const { code, hasPatched } = inspectPostcssPluginCompat(pluginContent)
     if (!hasPatched && opt.overwrite) {
       fs.writeFileSync(indexFilePath, code, {
         encoding: 'utf8',

packages/tailwindcss-patch/src/core/runtime-patcher.ts

@@ -1,29 +1,31 @@
-import fs from 'node:fs/promises'
-import { dirname } from 'node:path'
-import { getClassCacheSet, getContexts, getTailwindcssEntry } from './exposeContext'
+import path from 'node:path'
+import fs from 'node:fs'
 import { CacheManager, getCacheOptions } from './cache'
 import { createPatch, getPatchOptions } from './runtime-patcher'
 import { processTailwindcss } from './postcss'
 import type { UserConfig } from '@/config'
-import { ensureDir } from '@/utils'
-import type { CacheStrategy, InternalCacheOptions, InternalPatchOptions, TailwindcssPatcherOptions } from '@/types'
+import { ensureDir, getPackageInfoSync, isObject } from '@/utils'
+import type { CacheStrategy, InternalCacheOptions, InternalPatchOptions, PackageInfo, TailwindcssClassCache, TailwindcssPatcherOptions, TailwindcssRuntimeContext } from '@/types'
 
 export class TailwindcssPatcher {
   public rawOptions: TailwindcssPatcherOptions
   public cacheOptions: InternalCacheOptions
   public patchOptions: InternalPatchOptions
   public patch: () => void
   public cacheManager: CacheManager
+  public packageInfo?: PackageInfo
+  public majorVersion?: number
+
   constructor(options: TailwindcssPatcherOptions = {}) {
     this.rawOptions = options
     this.cacheOptions = getCacheOptions(options.cache)
     this.patchOptions = getPatchOptions(options.patch)
     this.patch = createPatch(this.patchOptions)
     this.cacheManager = new CacheManager(this.cacheOptions)
-  }
-
-  getPkgEntry(basedir?: string) {
-    return getTailwindcssEntry(basedir)
+    this.packageInfo = getPackageInfoSync('tailwindcss', { basedir: this.patchOptions.basedir })
+    if (this.packageInfo && this.packageInfo.version) {
+      this.majorVersion = Number.parseInt(this.packageInfo.version[0])
+    }
   }
 
   setCache(set: Set<string>) {
@@ -33,17 +35,61 @@ export class TailwindcssPatcher {
   }
 
   getCache() {
-    // if(this.cache.enable){
     return this.cacheManager.read()
-    // }
+  }
+
+  getContexts(): TailwindcssRuntimeContext[] {
+    if (this.packageInfo) {
+      const distPath = path.join(this.packageInfo.rootPath, 'lib')
+      let injectFilePath: string | undefined
+      if (this.majorVersion === 2) {
+        injectFilePath = path.join(distPath, 'jit/index.js')
+      }
+      else {
+        injectFilePath = path.join(distPath, 'plugin.js')
+        if (!fs.existsSync(injectFilePath)) {
+          injectFilePath = path.join(distPath, 'index.js')
+        }
+      }
+      if (injectFilePath) {
+        // eslint-disable-next-line ts/no-require-imports, ts/no-var-requires
+        const mo = require(injectFilePath)
+        if (mo.contextRef) {
+          return mo.contextRef.value
+        }
+      }
+    }
+
+    return []
+  }
+
+  getClassCaches(): TailwindcssClassCache[] {
+    const contexts = this.getContexts()
+    return contexts.filter(x => isObject(x)).map(x => x.classCache)
+  }
+
+  getClassCacheSet(options?: { removeUniversalSelector?: boolean }): Set<string> {
+    const classCaches = this.getClassCaches()
+    const classSet = new Set<string>()
+    for (const classCacheMap of classCaches) {
+      const keys = classCacheMap.keys()
+      for (const key of keys) {
+        const v = key.toString()
+        if (options?.removeUniversalSelector && v === '*') {
+          continue
+        }
+        classSet.add(v)
+      }
+    }
+    return classSet
   }
 
   /**
    * @description 在多个 tailwindcss 上下文时，这个方法将被执行多次，所以策略上应该使用 append
    */
-  getClassSet(options?: { basedir?: string, cacheStrategy?: CacheStrategy, removeUniversalSelector?: boolean }) {
-    const { basedir, cacheStrategy = this.cacheOptions.strategy ?? 'merge', removeUniversalSelector = true } = options ?? {}
-    const set = getClassCacheSet(basedir, {
+  getClassSet(options?: { cacheStrategy?: CacheStrategy, removeUniversalSelector?: boolean }) {
+    const { cacheStrategy = this.cacheOptions.strategy ?? 'merge', removeUniversalSelector = true } = options ?? {}
+    const set = this.getClassCacheSet({
       removeUniversalSelector,
     })
     if (cacheStrategy === 'overwrite') {
@@ -62,10 +108,6 @@ export class TailwindcssPatcher {
     return set
   }
 
-  getContexts(basedir?: string) {
-    return getContexts(basedir)
-  }
-
   async extract(options?: UserConfig['patch']) {
     const { output, tailwindcss } = options ?? {}
     if (output && tailwindcss) {
@@ -77,9 +119,9 @@ export class TailwindcssPatcher {
         removeUniversalSelector,
       })
       if (filename) {
-        await ensureDir(dirname(filename))
+        await ensureDir(path.dirname(filename))
         const classList = [...set]
-        await fs.writeFile(filename, JSON.stringify(classList, null, loose ? 2 : undefined), 'utf8')
+        fs.writeFileSync(filename, JSON.stringify(classList, null, loose ? 2 : undefined), 'utf8')
         return filename
       }
     }

packages/tailwindcss-patch/src/core/tw-patcher.ts

@@ -3,6 +3,13 @@ import type { Config } from 'tailwindcss'
 
 export type CacheStrategy = 'merge' | 'overwrite'
 
+export interface PackageInfo {
+  name: string
+  version: string | undefined
+  rootPath: string
+  packageJsonPath: string
+}
+
 export interface CacheOptions {
   // enable?: boolean
   dir?: string

packages/tailwindcss-patch/src/types.ts

@@ -1,7 +1,9 @@
 import fss from 'node:fs'
 import fs from 'node:fs/promises'
+import path from 'node:path'
 import type { SyncOpts } from 'resolve'
 import pkg from 'resolve'
+import type { PackageJson } from 'pkg-types'
 
 const { sync } = pkg
 
@@ -35,3 +37,57 @@ export async function ensureDir(p: string) {
     })
   }
 }
+
+function searchPackageJSON(dir: string) {
+  let packageJsonPath
+  while (true) {
+    if (!dir) {
+      return
+    }
+    const newDir = path.dirname(dir)
+    if (newDir === dir) {
+      return
+    }
+    dir = newDir
+    packageJsonPath = path.join(dir, 'package.json')
+    if (fss.existsSync(packageJsonPath)) {
+      break
+    }
+  }
+
+  return packageJsonPath
+}
+
+function getTailwindcssEntry(name: string = 'tailwindcss', opts?: SyncOpts) {
+  return requireResolve(name, opts)
+}
+
+function getPackageJsonPath(name: string, options: SyncOpts = {}) {
+  const entry = getTailwindcssEntry(name, options)
+  if (!entry) {
+    return
+  }
+
+  return searchPackageJSON(entry)
+}
+
+export function getPackageInfoSync(name: string, options: SyncOpts = {}) {
+  const packageJsonPath = getPackageJsonPath(name, options)
+  if (!packageJsonPath) {
+    return
+  }
+
+  const packageJson: PackageJson = JSON.parse(fss.readFileSync(packageJsonPath, 'utf8'))
+
+  return {
+    name,
+    version: packageJson.version,
+    rootPath: path.dirname(packageJsonPath),
+    packageJsonPath,
+    packageJson,
+  }
+}
+
+export function isObject(val: any) {
+  return val != null && typeof val === 'object' && Array.isArray(val) === false
+};

packages/tailwindcss-patch/src/utils.ts

@@ -37,6 +37,43 @@ function _default(configOrPath = {}) {
 }"
 `;
 
+exports[`postcss7-compat > jit plugins patch case 0 1`] = `
+""use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = _default;
+var _setupTrackingContext = _interopRequireDefault(require("./lib/setupTrackingContext"));
+var _setupWatchingContext = _interopRequireDefault(require("./lib/setupWatchingContext"));
+var _sharedState = require("./lib/sharedState");
+var _processTailwindFeatures = _interopRequireDefault(require("./processTailwindFeatures"));
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : {
+    default: obj
+  };
+}
+var contextRef = {
+  value: []
+};
+exports.contextRef = contextRef;
+function _default(configOrPath = {}) {
+  return [_sharedState.env.DEBUG && function (root) {
+    console.log('\\n');
+    console.time('JIT TOTAL');
+    return root;
+  }, function (root, result) {
+    contextRef.value.length = 0;
+    let setupContext = _sharedState.env.TAILWIND_MODE === 'watch' ? (0, _setupWatchingContext.default)(configOrPath) : (0, _setupTrackingContext.default)(configOrPath);
+    contextRef.value.push((0, _processTailwindFeatures.default)(setupContext)(root, result));
+  }, _sharedState.env.DEBUG && function (root) {
+    console.timeEnd('JIT TOTAL');
+    console.log('\\n');
+    return root;
+  }].filter(Boolean);
+}"
+`;
+
 exports[`postcss7-compat > processTailwindFeatures patch 1`] = `
 ""use strict";