chore: add preProcessRawCode method

Author: sonofmagic

apps/package.json

@@ -15,6 +15,7 @@
     "@tailwindcss-mangle/config": "link:../packages/config",
     "@tailwindcss-mangle/core": "link:../packages/core",
     "@tailwindcss-mangle/shared": "link:../packages/shared",
+    "tailwind-merge": "^1.14.0",
     "tailwindcss-patch": "link:../packages/tailwindcss-patch",
     "unplugin-tailwindcss-mangle": "link:../packages/unplugin-tailwindcss-mangle"
   }

apps/pnpm-lock.yaml

@@ -24,6 +24,7 @@
   "before:rounded-full",
   "before:to-transparent",
   "before:w-[480px]",
+  "bg-[#B91C1C]",
   "bg-gradient-to-b",
   "bg-gradient-to-t",
   "bg-red-200",
@@ -91,12 +92,15 @@
   "motion-reduce:transform-none",
   "opacity-50",
   "p-24",
+  "p-3",
   "p-8",
   "pb-6",
   "place-items-center",
   "pointer-events-none",
   "pt-8",
+  "px-2",
   "px-5",
+  "py-1",
   "py-4",
   "relative",
   "rounded-lg",

apps/vite-vue/.tw-patch/tw-class-list.json

@@ -1,9 +1,13 @@
 <script setup lang="ts">
+import { twMerge } from 'tailwind-merge'
+
+const aaa = twMerge('px-2 py-1 bg-red hover:bg-dark-red', 'p-3 bg-[#B91C1C]')
 
 </script>
 
 <template>
   <main class="flex min-h-screen flex-col items-center justify-between p-24 ">
+    <nav :class="aaa">aaa</nav>
     <div class="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
       <p
         class="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">

apps/vite-vue/src/App.vue

@@ -1,3 +1,7 @@
 import { defineConfig } from 'tailwindcss-patch'
 
-export default defineConfig({})
+export default defineConfig({
+  mangle: {
+    preserveFunction: ['twMerge']
+  }
+})

apps/vite-vue/tailwindcss-mangle.config.ts

@@ -45,7 +45,9 @@
     "@ast-core/escape": "^1.0.1",
     "@babel/core": "^7.22.17",
     "@babel/helper-plugin-utils": "^7.22.5",
+    "@babel/parser": "^7.22.16",
     "@babel/preset-typescript": "^7.22.15",
+    "@babel/traverse": "^7.22.17",
     "@babel/types": "^7.22.17",
     "@tailwindcss-mangle/config": "workspace:^",
     "@tailwindcss-mangle/shared": "workspace:^",
@@ -60,6 +62,7 @@
   "devDependencies": {
     "@parse5/tools": "^0.3.0",
     "@types/babel__core": "^7.20.1",
+    "@types/babel__traverse": "^7.20.1",
     "@types/micromatch": "^4.0.2"
   },
   "homepage": "https://github.com/sonofmagic/tailwindcss-mangle",

packages/core/package.json

@@ -6,6 +6,8 @@ export type PostcssMangleTailwindcssPlugin = PluginCreator<ICssHandlerOptions>
 
 const postcssPlugin = 'postcss-mangle-tailwindcss-plugin'
 
+const clonedKey = '__tw_mangle_cloned__'
+
 export function isVueScoped(s: parser.ClassName): boolean {
   if (s.parent) {
     const index = s.parent.nodes.indexOf(s)
@@ -19,17 +21,33 @@ export function isVueScoped(s: parser.ClassName): boolean {
   return false
 }
 
-export const transformSelectorPostcssPlugin: PluginCreator<{
-  replaceMap: Map<string, string>
-}> = function (options) {
-  const { ignoreVueScoped, replaceMap } = defu(options, {
+export const transformSelectorPostcssPlugin: PluginCreator<ICssHandlerOptions> = function (options) {
+  const { ignoreVueScoped, replaceMap, ctx } = defu(options, {
     ignoreVueScoped: true
   })
 
+  const utilitiesSet = new Set<string>()
+
   return {
     postcssPlugin,
     async Rule(rule) {
+      // @ts-ignore
+      if (rule[clonedKey]) {
+        return
+      }
       await parser((selectors) => {
+        let flag = false
+        selectors.walkClasses((s) => {
+          if (ctx.isPreserveClass(s.value) && !utilitiesSet.has(rule.selector)) {
+            flag = true
+          }
+        })
+        if (flag) {
+          const r = rule.cloneBefore()
+          // @ts-ignore
+          r[clonedKey] = true
+        }
+
         selectors.walkClasses((s) => {
           if (s.value && replaceMap && replaceMap.has(s.value)) {
             if (ignoreVueScoped && isVueScoped(s)) {

packages/core/src/css/plugins.ts

@@ -6,7 +6,8 @@ import type { MangleUserConfig } from '@tailwindcss-mangle/config'
 import { sort } from 'fast-sort'
 import defu from 'defu'
 import AhoCorasick from 'modern-ahocorasick'
-import { createGlobMatcher, defaultMangleClassFilter } from '@/utils'
+import { createGlobMatcher, defaultMangleClassFilter, escapeStringRegexp } from '@/utils'
+
 export class Context {
   options: MangleUserConfig
   includeMatcher: (file: string) => boolean
@@ -18,6 +19,7 @@ export class Context {
   useAC: boolean
   preserveFunctionSet: Set<string>
   preserveClassNamesSet: Set<string>
+  preserveFunctionRegexs: RegExp[]
   constructor(opts: MangleUserConfig = {}) {
     this.options = opts //  defu(opts, getDefaultMangleUserConfig())
     this.classSet = new Set()
@@ -28,6 +30,9 @@ export class Context {
     this.useAC = false
     this.preserveFunctionSet = new Set(opts.preserveFunction)
     this.preserveClassNamesSet = new Set()
+    this.preserveFunctionRegexs = [...this.preserveFunctionSet.values()].map((x) => {
+      return new RegExp(escapeStringRegexp(x) + '\\(([^)]*)\\)', 'g')
+    })
   }
 
   isPreserveClass(className: string) {
@@ -139,4 +144,6 @@ export class Context {
     }
     return config
   }
+
+  // ["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
 }

packages/core/src/ctx/index.ts

@@ -3,7 +3,8 @@ import { transformSync, type BabelFileResult, type NodePath } from '@babel/core'
 import type { IJsHandlerOptions } from '../types'
 import { makeRegex, splitCode } from '../shared'
 import { isProd as isProduction } from '../env'
-export { preProcessJs } from './pre'
+export { preProcessJs, preProcessRawCode } from './pre'
+
 export function handleValue(raw: string, node: StringLiteral | TemplateElement, options: IJsHandlerOptions) {
   const { replaceMap, ctx, splitQuote = true } = options
   const clsGen = ctx.classGenerator