chore: add preserve fn

Author: sonofmagic

packages/core/src/css/plugins.ts

@@ -1,7 +1,7 @@
 import type { PluginCreator } from 'postcss'
 import defu from 'defu'
 import parser from 'postcss-selector-parser'
-import { IClassGeneratorContextItem, ICssHandlerOptions } from '@/types'
+import { ICssHandlerOptions } from '@/types'
 export type PostcssMangleTailwindcssPlugin = PluginCreator<ICssHandlerOptions>
 
 const postcssPlugin = 'postcss-mangle-tailwindcss-plugin'

packages/core/src/ctx/index.ts

@@ -38,6 +38,13 @@ export class Context {
     return this.preserveClassNamesSet.add(className)
   }
 
+  isPreserveFunction(calleeName: string) {
+    // if (callee === undefined) {
+    //   return false
+    // }
+    return this.preserveFunctionSet.has(calleeName)
+  }
+
   mergeOptions(opts?: MangleUserConfig) {
     // 配置选项优先
     this.options = defu(this.options, opts)

packages/core/src/html/index.ts

@@ -4,7 +4,7 @@ import { IHtmlHandlerOptions } from '../types'
 import { makeRegex, splitCode } from '../shared'
 // const { traverse } = await import('@parse5/tools')
 export function htmlHandler(rawSource: string, options: IHtmlHandlerOptions) {
-  const { replaceMap, classGenerator } = options
+  const { replaceMap, ctx } = options
   const fragment = parse(rawSource)
   traverse(fragment, {
     element(node) {
@@ -15,7 +15,7 @@ export function htmlHandler(rawSource: string, options: IHtmlHandlerOptions) {
         })
         for (const v of array) {
           if (replaceMap.has(v)) {
-            attribute.value = attribute.value.replace(makeRegex(v), classGenerator.generateClassName(v).name)
+            attribute.value = attribute.value.replace(makeRegex(v), ctx.classGenerator.generateClassName(v).name)
           }
         }
       }

packages/core/src/js/index.ts

@@ -5,8 +5,8 @@ import { makeRegex, splitCode } from '../shared'
 import { isProd as isProduction } from '../env'
 export { preProcessJs } from './pre'
 export function handleValue(raw: string, node: StringLiteral | TemplateElement, options: IJsHandlerOptions) {
-  const { replaceMap, classGenerator: clsGen, splitQuote = true } = options
-
+  const { replaceMap, ctx, splitQuote = true } = options
+  const clsGen = ctx.classGenerator
   const array = splitCode(raw, {
     splitQuote
   })

packages/core/src/js/pre.ts

@@ -4,6 +4,7 @@ import MagicString from 'magic-string'
 import { splitCode } from '@tailwindcss-mangle/shared'
 import { sort } from 'fast-sort'
 import { jsStringEscape } from '@ast-core/escape'
+import { getStringLiteralCalleeName, getTemplateElementCalleeName } from './utils'
 import type { Context } from '@/ctx'
 
 interface Options {
@@ -13,20 +14,36 @@ interface Options {
   ctx: Context
 }
 
-export function handleValue(options: { raw: string; node: babel.types.StringLiteral | babel.types.TemplateElement; offset: number; escape: boolean } & Options) {
-  const { ctx, id, magicString, node, raw, replaceMap, offset = 0, escape = false } = options
+type HandleValueOptions = {
+  raw: string
+  path: babel.NodePath<babel.types.StringLiteral | babel.types.TemplateElement>
+  offset: number
+  escape: boolean
+  preserve: boolean
+} & Options
+
+export function handleValue(options: HandleValueOptions) {
+  const { ctx, id, path, magicString, raw, replaceMap, offset = 0, escape = false, preserve = false } = options
+  const node = path.node
   let value = raw
   const arr = sort(splitCode(value)).desc((x) => x.length)
 
   for (const str of arr) {
     if (replaceMap.has(str)) {
       ctx.addToUsedBy(str, id)
+      if (preserve) {
+        ctx.addPreserveClass(str)
+      }
+      // replace
       const v = replaceMap.get(str)
       if (v) {
         value = value.replaceAll(str, v)
       }
     }
   }
+  if (preserve) {
+    return
+  }
   if (typeof node.start === 'number' && typeof node.end === 'number' && value) {
     const start = node.start + offset
     const end = node.end - offset
@@ -43,32 +60,42 @@ export const plugin = declare((api, options: Options) => {
     visitor: {
       StringLiteral: {
         enter(p) {
-          const node = p.node
-          handleValue({
+          const opts: HandleValueOptions = {
             ctx,
             id,
             magicString,
-            node,
-            raw: node.value,
+            path: p,
+            raw: p.node.value,
             replaceMap,
             offset: 1,
-            escape: true
-          })
+            escape: true,
+            preserve: false
+          }
+          const calleeName = getStringLiteralCalleeName(p)
+          if (calleeName && ctx.isPreserveFunction(calleeName)) {
+            opts.preserve = true
+          }
+          handleValue(opts)
         }
       },
       TemplateElement: {
         enter(p) {
-          const node = p.node
-          handleValue({
+          const opts: HandleValueOptions = {
             ctx,
             id,
             magicString,
-            node,
-            raw: node.value.raw,
+            path: p,
+            raw: p.node.value.raw,
             replaceMap,
             offset: 0,
-            escape: false
-          })
+            escape: false,
+            preserve: false
+          }
+          const calleeName = getTemplateElementCalleeName(p)
+          if (calleeName && ctx.isPreserveFunction(calleeName)) {
+            opts.preserve = true
+          }
+          handleValue(opts)
         }
       }
     }

packages/core/src/js/utils.ts

@@ -0,0 +1,22 @@
+import babel from '@babel/core'
+// const t = babel.types
+export function getStringLiteralCalleeName(path: babel.NodePath<babel.types.StringLiteral>) {
+  if (path.parentPath.isCallExpression()) {
+    const callee = path.parentPath.get('callee')
+    if (callee.isIdentifier()) {
+      return callee.node.name
+    }
+  }
+}
+
+export function getTemplateElementCalleeName(path: babel.NodePath<babel.types.TemplateElement>) {
+  if (path.parentPath.isTemplateLiteral()) {
+    const pp = path.parentPath
+    if (pp.parentPath.isCallExpression()) {
+      const callee = pp.parentPath.get('callee')
+      if (callee.isIdentifier()) {
+        return callee.node.name
+      }
+    }
+  }
+}

packages/core/src/types.ts

@@ -1,5 +1,4 @@
-import type { ClassGenerator } from './shared'
-
+import type { Context } from './ctx'
 export interface IClassGeneratorContextItem {
   name: string
   usedBy: string[]
@@ -16,8 +15,8 @@ export interface IClassGeneratorOptions {
 }
 
 export interface IHandlerOptions {
-  classGenerator: ClassGenerator
   replaceMap: Map<string, string>
+  ctx: Context
 }
 
 export interface IHtmlHandlerOptions extends IHandlerOptions {}

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

@@ -252,6 +252,86 @@ exports[`js handler > nextjs server side mangle 1`] = `
 })();"
 `;
 
+exports[`js handler > preserve-fn-case0.js case 0 1`] = `
+"import { clsx } from \\"clsx\\";
+import { twMerge } from \\"tailwind-merge\\";
+
+export function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+cn('w-10 h-10 b and a')
+
+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 1 1`] = `
+"import { clsx } from \\"clsx\\";
+import { twMerge } from \\"tailwind-merge\\";
+
+export function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+cn('w-10 h-10 bg-red-500 and bg-red-500/50')
+
+cn(\`w-2 h-2 bg-red-600 and bg-red-600/50\`)
+
+twMerge('e f g and h')"
+`;
+
+exports[`js handler > preserve-fn-case0.js case 1 2`] = `
+{
+  "bg-red-400": "g",
+  "bg-red-400/50": "h",
+  "h-1": "f",
+  "w-1": "e",
+}
+`;
+
+exports[`js handler > preserve-fn-case0.js case 2 1`] = `
+"import { clsx } from \\"clsx\\";
+import { twMerge } from \\"tailwind-merge\\";
+
+export function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+cn('w-10 h-10 b and a')
+
+cn(\`c d 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 2 2`] = `
+Map {
+  "bg-red-500/50" => "a",
+  "bg-red-500" => "b",
+  "w-2" => "c",
+  "h-2" => "d",
+}
+`;
+
+exports[`js handler > preserve-fn-case0.js case 3 1`] = `
+"import { clsx } from \\"clsx\\";
+import { twMerge } from \\"tailwind-merge\\";
+
+export function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+cn('w-10 h-10 bg-red-500 and bg-red-500/50')
+
+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 > trailing slash case 0 1`] = `"document.getElementById(\\"#app\\").classList.add(\\"tw-a tw-b\\");"`;
 
 exports[`js handler > trailing slash case 1 1`] = `"document.querySelector(\\"#app\\").classList.add(\\"tw-a tw-b\\");"`;

packages/core/test/fixtures/preserve-fn-case0.js

@@ -0,0 +1,12 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+cn('w-10 h-10 bg-red-500 and bg-red-500/50')
+
+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')

packages/core/test/fixtures/preserve-fn-case0.ts

@@ -0,0 +1,12 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+cn('w-10 h-10 bg-red-500 and bg-red-500/50')
+
+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')