feat: add preserveFunction option for tailwindcss-mangle not working with tailwind-merge #44

Author: sonofmagic

apps/vite-react/src/App.tsx

@@ -9,7 +9,7 @@ function App() {
   const [count, setCount] = useState(0)
 
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
+    <main className="px-2 py-1 bg-red-100 hover:bg-red-800 flex min-h-screen flex-col items-center justify-between p-24">
       <nav className={aaa}>{aaa}</nav>
       <div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
         <p className="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">

package.json

@@ -23,7 +23,7 @@
     "@tailwindcss-mangle/shared": "workspace:*",
     "@tsconfig/recommended": "^1.0.2",
     "@types/lodash-es": "^4.17.9",
-    "@types/node": "^20.6.0",
+    "@types/node": "^20.6.1",
     "@vitest/coverage-v8": "^0.34.4",
     "cross-env": "^7.0.3",
     "dedent": "^1.5.1",

packages/config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tailwindcss-mangle/config",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "The config and load function of tailwindcss-mangle",
   "exports": {
     ".": {

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tailwindcss-mangle/core",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "The core of tailwindcss-mangle",
   "exports": {
     ".": {
@@ -44,12 +44,12 @@
   },
   "dependencies": {
     "@ast-core/escape": "^1.0.1",
-    "@babel/core": "^7.22.17",
+    "@babel/core": "^7.22.19",
     "@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",
+    "@babel/traverse": "^7.22.19",
+    "@babel/types": "^7.22.19",
     "@tailwindcss-mangle/config": "workspace:^",
     "@tailwindcss-mangle/shared": "workspace:^",
     "fast-sort": "^3.4.0",

packages/core/src/css/plugins.ts

@@ -26,8 +26,6 @@ export const transformSelectorPostcssPlugin: PluginCreator<ICssHandlerOptions> =
     ignoreVueScoped: true
   })
 
-  const utilitiesSet = new Set<string>()
-
   return {
     postcssPlugin,
     async Rule(rule) {
@@ -36,25 +34,18 @@ export const transformSelectorPostcssPlugin: PluginCreator<ICssHandlerOptions> =
         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)) {
               return
             }
             const v = replaceMap.get(s.value)
             if (v) {
+              if (ctx.isPreserveClass(s.value)) {
+                const r = rule.cloneBefore()
+                // @ts-ignore
+                r[clonedKey] = true
+              }
               s.value = v
             }
           }

packages/core/src/ctx/index.ts

@@ -77,13 +77,13 @@ export class Context {
   }
 
   getReplaceMap() {
-    const map = new Map<string, string>()
-    for (const [key, value] of sort([...this.replaceMap.entries()]).desc((x) => x[0].length)) {
-      if (!this.isPreserveClass(key)) {
-        map.set(key, value)
-      }
-    }
-    return map
+    // const map = new Map<string, string>()
+    // for (const [key, value] of sort([...this.replaceMap.entries()]).desc((x) => x[0].length)) {
+    //   if (!this.isPreserveClass(key)) {
+    //     map.set(key, value)
+    //   }
+    // }
+    return this.replaceMap // map
   }
 
   addToUsedBy(key: string, file: string) {
@@ -93,18 +93,22 @@ export class Context {
     }
   }
 
+  loadClassSet(classList: string[]) {
+    const list = sort(classList).desc((c) => c.length)
+    for (const className of list) {
+      if (this.currentMangleClassFilter(className)) {
+        this.classSet.add(className)
+      }
+    }
+  }
+
   async initConfig(opts: InitConfigOptions = {}) {
     const { cwd, classList: _classList, mangleOptions } = opts
     const { config, cwd: configCwd } = await getConfig(cwd)
 
     this.mergeOptions(mangleOptions, config?.mangle)
     if (_classList) {
-      const classList = sort(_classList).desc((c) => c.length)
-      for (const className of classList) {
-        if (this.currentMangleClassFilter(className)) {
-          this.classSet.add(className)
-        }
-      }
+      this.loadClassSet(_classList)
     } else {
       let jsonPath = this.options.classListPath ?? resolve(process.cwd(), config?.patch?.output?.filename as string)
       if (!isAbsolute(jsonPath)) {
@@ -117,12 +121,7 @@ export class Context {
         // why?
         // cause bg-red-500 and bg-red-500/50 same time
         // transform bg-red-500/50 first
-        const classList = sort(list).desc((c) => c.length)
-        for (const className of classList) {
-          if (this.currentMangleClassFilter(className)) {
-            this.classSet.add(className)
-          }
-        }
+        this.loadClassSet(list)
       }
     }
 

packages/core/test/__snapshots__/css.test.ts.snap

@@ -13,6 +13,11 @@ exports[`css > preserveClassNamesSet case 0 1`] = `
 .tw-a {color:red;}"
 `;
 
+exports[`css > preserveClassNamesSet case 1 1`] = `
+".gap-y-4 {color:red;}
+.tw-a {color:red;}"
+`;
+
 exports[`css > vue scoped .gap-y-4 1`] = `
 "@media (min-width: 768px) {
       .tw-a {

packages/core/test/__snapshots__/js.test.ts.snap

@@ -736,7 +736,18 @@ cn(\`w-2 h-2 bg-red-600 and bg-red-600/50\`)
 twMerge('w-1 h-1 bg-red-400 and bg-red-400/50')"
 `;
 
-exports[`js handler > preserve-fn-case0.js case 3 2`] = `Map {}`;
+exports[`js handler > preserve-fn-case0.js case 3 2`] = `
+Map {
+  "bg-red-500/50" => "tw-a",
+  "bg-red-400/50" => "tw-b",
+  "bg-red-500" => "tw-c",
+  "bg-red-400" => "tw-d",
+  "w-2" => "tw-e",
+  "h-2" => "tw-f",
+  "w-1" => "tw-g",
+  "h-1" => "tw-h",
+}
+`;
 
 exports[`js handler > trailing slash case 0 1`] = `"document.getElementById(\\"#app\\").classList.add(\\"tw-a tw-b\\");"`;
 

packages/core/test/css.test.ts

@@ -21,6 +21,19 @@ describe('css', () => {
     expect(css).toMatchSnapshot()
   })
 
+  it('preserveClassNamesSet case 1', async () => {
+    await ctx.initConfig({
+      classList: ['gap-y-4']
+    })
+    const testCase = `.gap-y-4 {color:red;}`
+    ctx.addPreserveClass('gap-y-4')
+    const { css } = await cssHandler(testCase, {
+      ctx,
+      replaceMap: ctx.getReplaceMap()
+    })
+    expect(css).toMatchSnapshot()
+  })
+
   it('vue scoped .gap-y-4', async () => {
     const replaceMap = new Map()
     replaceMap.set('gap-y-4', 'tw-a')

packages/shared/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tailwindcss-mangle/shared",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "The shared utils of tailwindcss-mangle",
   "exports": {
     ".": {