chore: add getClassSet

Author: sonofmagic

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

@@ -1,6 +1,6 @@
 import type { GlobEntry } from '@tailwindcss/oxide'
 import process from 'node:process'
-import { defu } from '@tailwindcss-mangle/shared'
+import { defuOverrideArray } from '@tailwindcss-mangle/shared'
 
 function importNode() {
   return import('@tailwindcss/node')
@@ -44,31 +44,35 @@ export async function extractRawCandidates(
 }
 
 export interface ExtractValidCandidatesOption {
-  content?: string
-  base?: string
-  css?: string
+  sources: GlobEntry[]
+  base: string
+  css: string
 }
 
-export async function extractValidCandidates(options: ExtractValidCandidatesOption) {
-  const { content, base, css } = defu<
+export async function extractValidCandidates(options?: Partial<ExtractValidCandidatesOption>) {
+  const cwd = process.cwd()
+  const { sources, base, css } = defuOverrideArray<
     Required<ExtractValidCandidatesOption>,
     Partial<ExtractValidCandidatesOption>[]
-  >(options, {
-    css: '@import "tailwindcss";',
-    base: process.cwd(),
-    content: '**/*',
-  })
+  >(
+    // @ts-ignore
+    options,
+    {
+      css: '@import "tailwindcss";',
+      base: cwd,
+      sources: [
+        {
+          base: cwd,
+          pattern: '**/*',
+        },
+      ],
+    },
+  )
 
-  // const { __unstable__loadDesignSystem } = await importTailwindcss()
   const { __unstable__loadDesignSystem } = await importNode()
   const designSystem = await __unstable__loadDesignSystem(css, { base })
 
-  const candidates = await extractRawCandidates([
-    {
-      base,
-      pattern: content,
-    },
-  ])
+  const candidates = await extractRawCandidates(sources)
   const validCandidates = candidates.filter(
     rawCandidate => designSystem.parseCandidate(rawCandidate).length > 0,
   )

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

@@ -1,5 +1,6 @@
 import type { UserConfig } from '../config'
 import type { CacheStrategy, InternalCacheOptions, InternalPatchOptions, PackageInfo, TailwindcssClassCache, TailwindcssPatcherOptions, TailwindcssRuntimeContext } from '../types'
+import type { ExtractValidCandidatesOption } from './candidates'
 import { createRequire } from 'node:module'
 import fs from 'fs-extra'
 import { getPackageInfoSync } from 'local-pkg'
@@ -88,28 +89,42 @@ export class TailwindcssPatcher {
     return contexts.filter(x => isObject(x)).map(x => x.classCache)
   }
 
-  getClassCacheSet(options?: { removeUniversalSelector?: boolean }): Set<string> {
-    const classCaches = this.getClassCaches()
+  async getClassCacheSet(options?: { removeUniversalSelector?: boolean } & Partial<ExtractValidCandidatesOption>): Promise<Set<string>> {
     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
+    if (this.majorVersion === 4) {
+      const candidates = await extractValidCandidates({
+        base: options?.base,
+        css: options?.css,
+        sources: options?.sources,
+      })
+      for (const candidate of candidates) {
+        classSet.add(candidate)
+      }
+    }
+    else {
+      const classCaches = this.getClassCaches()
+
+      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)
         }
-        classSet.add(v)
       }
     }
+
     return classSet
   }
 
   /**
    * @description 在多个 tailwindcss 上下文时，这个方法将被执行多次，所以策略上应该使用 append
    */
-  getClassSet(options?: { cacheStrategy?: CacheStrategy, removeUniversalSelector?: boolean }) {
+  async getClassSet(options?: { cacheStrategy?: CacheStrategy, removeUniversalSelector?: boolean }) {
     const { cacheStrategy = this.cacheOptions.strategy ?? 'merge', removeUniversalSelector = true } = options ?? {}
-    const set = this.getClassCacheSet({
+    const set = await this.getClassCacheSet({
       removeUniversalSelector,
     })
     if (cacheStrategy === 'overwrite') {
@@ -133,12 +148,14 @@ export class TailwindcssPatcher {
     if (output && tailwindcss) {
       const { removeUniversalSelector, filename, loose } = output
 
-      await processTailwindcss({
-        ...tailwindcss,
-        majorVersion: this.majorVersion,
-      })
+      if (this.majorVersion === 3) {
+        await processTailwindcss({
+          ...tailwindcss,
+          majorVersion: this.majorVersion,
+        })
+      }
 
-      const set = this.getClassSet({
+      const set = await this.getClassSet({
         removeUniversalSelector,
       })
       if (filename) {

packages/tailwindcss-patch/test/__snapshots__/v4.test.ts.snap

@@ -27,88 +27,15 @@ exports[`v4 > extractRawCandidates case 0 1`] = `
 
 exports[`v4 > tailwindcssPatcher casae 1 1`] = `
 [
-  "![color:red]/50",
-  "!bg-[#0088cc]",
-  "!bg-red-500",
-  "!underline",
-  "-inset-full",
-  "[color:red]",
-  "[color:red]/50",
-  "[color:red]/50!",
-  "[color:red]/[0.5]",
-  "[color:red]/[0.5]!",
-  "basis-[32rpx]",
-  "bg-(--spacing-0_5,var(--spacing-1_5,3rem))",
-  "bg-[#0088cc]!",
-  "bg-[#0088cc]/50",
-  "bg-[#0088cc]/[0.5]",
   "bg-[#123456]",
-  "bg-[#2f2f2f]",
-  "bg-[#7d7ac2]",
-  "bg-[-1px_-1px]",
-  "bg-[no-repeat_url(/image_13.png)]",
-  "bg-[url('https://xxx.webp')]",
-  "bg-[var(--spacing)-1px]",
-  "bg-[var(--spacing)_-_1px]",
-  "bg-[var(--spacing-0_5,_var(--spacing-1_5,_3rem))]",
-  "bg-blue-500",
-  "bg-red-500",
-  "bg-red-500!",
-  "bg-red-500/50",
-  "bg-red-500/[0.5]",
-  "bottom",
-  "box-border",
+  "bg-gradient-to-b",
   "content",
-  "content-["hello_world"]",
-  "content-[____"hello_world"___]",
-  "end",
-  "filter",
-  "flex",
-  "font-bold",
-  "font-palette",
-  "from",
-  "h-[12rpx]",
+  "from-[#2f73f1]",
   "h-[30px]",
-  "h-[45px]",
-  "hover:focus:text-white",
-  "left",
-  "list",
-  "m-[23.43rpx]",
-  "max-h-[12rpx]",
-  "max-w-[12rpx]",
-  "min-h-[12rpx]",
-  "min-w-[12rpx]",
-  "object-hash",
-  "order",
-  "p",
-  "p-[0.32rpx]",
-  "p-[calc((100vw-theme(maxWidth.2xl))/2)]",
-  "p-[calc((100vw-theme(maxWidth.2xl))_/_2)]",
-  "p-[round(to-zero,1px)]",
-  "placeholder",
-  "pt",
-  "px",
-  "right",
-  "shadow",
-  "size",
-  "space-y-[12.0rpx]",
-  "start",
-  "static",
   "text-(--x)",
-  "text-3xl",
-  "text-[#123456]",
-  "text-[100px]",
-  "text-[99px]",
-  "text-[length:32rpx]",
-  "text-white",
   "text-xs",
-  "to",
-  "top",
-  "transform",
-  "underline",
-  "underline!",
-  "w-1/2",
-  "w-[12rpx]",
+  "to-[#4bcefd]",
+  "w-[323px]",
 ]
 `;
 

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

@@ -82,7 +82,7 @@ describe('cache', () => {
     await getCss(['text-[100px]'])
     let ctxs = twPatcher.getContexts()
     expect(ctxs.length).toBe(1)
-    let set = twPatcher.getClassSet({
+    let set = await twPatcher.getClassSet({
       removeUniversalSelector: false,
     })
     expect(set.size).toBeGreaterThan(0)
@@ -94,7 +94,7 @@ describe('cache', () => {
     await getCss(['text-[99px]'])
     ctxs = twPatcher.getContexts()
     expect(ctxs.length).toBe(1)
-    set = twPatcher.getClassSet()
+    set = await twPatcher.getClassSet()
     expect(set.size).toBeGreaterThan(0)
     expect(set.size).toBe(3)
     expect(set.has('text-[99px]')).toBe(true)

packages/tailwindcss-patch/test/fixtures/v4/deep/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+  <div class="bg-gradient-to-b from-[#2f73f1] to-[#4bcefd] w-[323px] h-[30px]"></div>
+</body>
+</html>

packages/tailwindcss-patch/test/postcss8-v3.test.ts

@@ -18,7 +18,7 @@ describe('postcss', () => {
     expect(res.css).toMatchSnapshot()
     const res0 = twPatcher.getContexts()
     expect(res0.length).toBe(1)
-    const set = twPatcher.getClassSet({
+    const set = await twPatcher.getClassSet({
       removeUniversalSelector: false,
     })
     expect(set.size).toBe(4)

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

@@ -11,7 +11,7 @@ describe('class', () => {
     await getCss([getTestCase('hello-world.html')])
     const ctxs = twPatcher.getContexts()
     expect(ctxs.length).toBe(1)
-    const set = twPatcher.getClassSet({
+    const set = await twPatcher.getClassSet({
       removeUniversalSelector: false,
     })
     expect(set.size).toBeGreaterThan(0)
@@ -34,7 +34,7 @@ describe('class', () => {
     await getCss([getTestCase('hello-world.html'), getTestCase('hello-world.js')])
     const ctxs = twPatcher.getContexts()
     expect(ctxs.length).toBe(1)
-    const set = twPatcher.getClassSet({
+    const set = await twPatcher.getClassSet({
       cacheStrategy: 'overwrite',
       removeUniversalSelector: false,
     })
@@ -47,7 +47,7 @@ describe('class', () => {
     await getCss(['text-[100px]'])
     let ctxs = twPatcher.getContexts()
     expect(ctxs.length).toBe(1)
-    let set = twPatcher.getClassSet({
+    let set = await twPatcher.getClassSet({
       removeUniversalSelector: false,
     })
     expect(set.size).toBeGreaterThan(0)
@@ -59,7 +59,7 @@ describe('class', () => {
     await getCss(['text-[99px]'])
     ctxs = twPatcher.getContexts()
     expect(ctxs.length).toBe(1)
-    set = twPatcher.getClassSet({
+    set = await twPatcher.getClassSet({
       removeUniversalSelector: false,
     })
     expect(set.size).toBeGreaterThan(0)
@@ -75,7 +75,7 @@ describe('class', () => {
     await getCss([`<view class="bg-[#7d7ac2] text-[100px] text-[#123456] {{true?'h-[30px]':'h-[45px]'}}">111</view>`])
     const ctxs = twPatcher.getContexts()
     expect(ctxs.length).toBe(1)
-    const set = twPatcher.getClassSet({
+    const set = await twPatcher.getClassSet({
       removeUniversalSelector: false,
     })
     expect(set.size).toBeGreaterThan(0)

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

@@ -11,7 +11,12 @@ describe('v4', () => {
     const candidates = await patcher.extractValidCandidates({
       base: import.meta.dirname,
       css: await fs.readFile(path.resolve(import.meta.dirname, './fixtures/v4/index.css'), 'utf8'),
-      content: path.resolve(import.meta.dirname, './fixtures/v4/index.html'),
+      sources: [
+        {
+          base: import.meta.dirname,
+          pattern: path.resolve(import.meta.dirname, './fixtures/v4/index.html'),
+        },
+      ],
     })
     expect(candidates).toMatchSnapshot()
   })
@@ -22,7 +27,12 @@ describe('v4', () => {
     const candidates = await patcher.extractValidCandidates({
       base: import.meta.dirname,
       css: await fs.readFile(path.resolve(import.meta.dirname, './fixtures/v4/index.css'), 'utf8'),
-
+      sources: [
+        {
+          base: import.meta.dirname,
+          pattern: path.resolve(import.meta.dirname, './fixtures/v4/**/*.html'),
+        },
+      ],
     })
     expect(candidates).toMatchSnapshot()
   })