chore: add ClassMapOutputItem support

Author: sonofmagic

apps/.gitignore

@@ -0,0 +1 @@
+.tw-patch

packages/config/package.json

@@ -51,6 +51,7 @@
   },
   "dependencies": {
     "@tailwindcss-mangle/shared": "workspace:^",
-    "c12": "^1.11.1"
+    "c12": "^1.11.1",
+    "is-css-request": "^1.0.1"
   }
 }

packages/config/src/defaults.ts

@@ -1,9 +1,9 @@
 import process from 'node:process'
 import { defaultMangleClassFilter } from '@tailwindcss-mangle/shared'
-
+import { CSS_LANGS_RE } from 'is-css-request'
 import type { MangleUserConfig, PatchUserConfig, UserConfig } from './types'
 
-const defaultPipelineInclude = ['**/*.{html,js,ts,jsx,tsx,vue,svelte,astro,elm,php,phtml,mdx,md}']
+const defaultPipelineInclude = ['**/*.{html,js,ts,jsx,tsx,vue,svelte,astro,elm,php,phtml,mdx,md}', CSS_LANGS_RE]
 
 const defaultPipelineExclude = [/[\\/](node_modules|dist|\.temp|\.cache|\.vscode)[\\/]/]
 

packages/config/src/types.ts

@@ -7,13 +7,19 @@ export interface ClassMapOutputOptions {
   loose?: boolean
 }
 
+export interface ClassMapOutputItem {
+  before: string
+  after: string
+  usedBy: string[]
+}
+
 export interface MangleUserConfig {
   mangleClassFilter?: (className: string) => boolean
   classGenerator?: IClassGeneratorOptions
   exclude?: FilterPattern
   include?: FilterPattern
   classListPath?: string
-  classMapOutput?: ClassMapOutputOptions
+  classMapOutput?: boolean | ClassMapOutputOptions | ((json: ClassMapOutputItem[]) => void)
   disabled?: boolean
   preserveFunction?: string[]
 }

packages/core/src/css/plugins.ts

@@ -42,8 +42,8 @@ export const transformSelectorPostcssPlugin: PluginCreator<ICssHandlerOptions> =
                 if (ctx.isPreserveClass(s.value)) {
                   rule.cloneBefore()
                 }
+                // ctx.addToUsedBy(s.value, id)
                 s.value = v
-                ctx.addToUsedBy(v, id)
               }
             }
           })

packages/core/src/ctx/index.ts

@@ -1,9 +1,9 @@
 import fs from 'node:fs'
-import { isAbsolute, resolve } from 'node:path'
+import { dirname, isAbsolute, resolve } from 'node:path'
 import process from 'node:process'
 import { ClassGenerator } from '@tailwindcss-mangle/shared'
 import { getConfig } from '@tailwindcss-mangle/config'
-import type { MangleUserConfig } from '@tailwindcss-mangle/config'
+import type { ClassMapOutputItem, MangleUserConfig } from '@tailwindcss-mangle/config'
 import { sort } from 'fast-sort'
 import { defu } from 'defu'
 import { defaultMangleClassFilter, escapeStringRegexp } from '@/utils'
@@ -90,7 +90,12 @@ export class Context {
   async initConfig(opts: InitConfigOptions = {}) {
     const { cwd, classList: _classList, mangleOptions } = opts
     const { config, cwd: configCwd } = await getConfig(cwd)
-
+    if (mangleOptions?.classMapOutput === true) {
+      mangleOptions.classMapOutput = config.mangle?.classMapOutput
+      if (typeof mangleOptions.classMapOutput === 'object') {
+        mangleOptions.classMapOutput.enable = true
+      }
+    }
     this.mergeOptions(mangleOptions, config?.mangle)
     if (_classList) {
       this.loadClassSet(_classList)
@@ -121,5 +126,25 @@ export class Context {
     return config
   }
 
-  // ["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
+  async dump() {
+    try {
+      const arr = Object.entries(this.classGenerator.newClassMap).map<ClassMapOutputItem>((x) => {
+        return {
+          before: x[0],
+          after: x[1].name,
+          usedBy: Array.from(x[1].usedBy),
+        }
+      })
+      if (typeof this.options.classMapOutput === 'function') {
+        await this.options.classMapOutput(arr)
+      }
+      else if (typeof this.options.classMapOutput === 'object' && this.options.classMapOutput.enable && this.options.classMapOutput.filename) {
+        fs.mkdirSync(dirname(this.options.classMapOutput.filename), { recursive: true })
+        fs.writeFileSync(this.options.classMapOutput.filename, JSON.stringify(arr, null, 2))
+      }
+    }
+    catch (error) {
+      console.error(`[tailwindcss-mangle]: ${error}`)
+    }
+  }
 }

packages/core/src/html/index.ts

@@ -19,7 +19,7 @@ export function htmlHandler(raw: string | MagicString, options: IHtmlHandlerOpti
           if (replaceMap.has(v)) {
             const gen = classGenerator.generateClassName(v)
             rawValue = rawValue.replace(makeRegex(v), gen.name)
-            ctx.addToUsedBy(gen.name, id)
+            ctx.addToUsedBy(v, id)
             needUpdate = true
           }
         }

packages/core/src/js/index.ts

@@ -25,7 +25,7 @@ export function handleValue(raw: string, node: StringLiteral | TemplateElement,
       if (!ignoreFlag) {
         const gen = clsGen.generateClassName(v)
         rawString = rawString.replace(makeRegex(v), gen.name)
-        ctx.addToUsedBy(gen.name, id)
+        ctx.addToUsedBy(v, id)
         needUpdate = true
       }
     }

packages/unplugin-tailwindcss-mangle/src/core/factory.ts

@@ -2,12 +2,12 @@ import type { UnpluginFactory } from 'unplugin'
 import { Context, cssHandler, htmlHandler, jsHandler } from '@tailwindcss-mangle/core'
 import type { MangleUserConfig } from '@tailwindcss-mangle/config'
 import { isCSSRequest } from 'is-css-request'
+import { createFilter } from '@rollup/pluginutils'
 import { pluginName } from '@/constants'
-// import {createFilter} from '@rollup/pluginutils'
 
 const factory: UnpluginFactory<MangleUserConfig | undefined> = (options) => {
   const ctx = new Context()
-  // const filter = createFilter(options?.include, options?.exclude)
+  let filter = (_id: string) => true
   return [
     {
       name: `${pluginName}:pre`,
@@ -16,12 +16,13 @@ const factory: UnpluginFactory<MangleUserConfig | undefined> = (options) => {
         await ctx.initConfig({
           mangleOptions: options,
         })
+        filter = createFilter(ctx.options.include, ctx.options.exclude)
       },
     },
     {
       name: `${pluginName}`,
       transformInclude(id) {
-        return !id.includes('node_modules')
+        return filter(id)
       },
       async transform(code, id) {
         const opts = {
@@ -56,6 +57,9 @@ const factory: UnpluginFactory<MangleUserConfig | undefined> = (options) => {
           return code
         },
       },
+      writeBundle() {
+        ctx.dump()
+      },
     },
   ]
 }