chore: commit preserveFunction fn demo

Author: sonofmagic

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

@@ -24,8 +24,10 @@
   "before:rounded-full",
   "before:to-transparent",
   "before:w-[480px]",
+  "bg-[#B91C1C]",
   "bg-gradient-to-b",
   "bg-gradient-to-t",
+  "bg-red-100",
   "border",
   "border-b",
   "border-gray-300",
@@ -51,6 +53,7 @@
   "group-hover:translate-x-1",
   "h-48",
   "hover:bg-gray-100",
+  "hover:bg-red-800",
   "hover:border-gray-300",
   "hover:dark:bg-neutral-800/30",
   "hover:dark:border-neutral-700",
@@ -84,12 +87,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-react/src/App.tsx

@@ -1,13 +1,16 @@
 import { useState } from 'react'
+import { twMerge } from 'tailwind-merge'
 import reactLogo from './assets/react.svg'
-
 import './App.css'
+// 'hover:bg-dark-red p-3 bg-[#B91C1C]'
+const aaa = twMerge('px-2 py-1 bg-red-100 hover:bg-red-800', 'p-3 bg-[#B91C1C]')
 
 function App() {
   const [count, setCount] = useState(0)
 
   return (
     <main className="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">
           Get started by editing&nbsp;

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

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

packages/core/src/ctx/index.ts

@@ -52,13 +52,13 @@ export class Context {
     return this.preserveFunctionSet.has(calleeName)
   }
 
-  private mergeOptions(opts?: MangleUserConfig) {
+  private mergeOptions(...opts: (MangleUserConfig | undefined)[]) {
     // 配置选项优先
-    this.options = defu(this.options, opts)
+    this.options = defu(this.options, ...opts)
     this.includeMatcher = createGlobMatcher(this.options.include, true)
     this.excludeMatcher = createGlobMatcher(this.options.exclude, false)
     this.classGenerator = new ClassGenerator(this.options.classGenerator)
-    this.preserveFunctionSet = new Set(opts?.preserveFunction ?? [])
+    this.preserveFunctionSet = new Set(this.options?.preserveFunction ?? [])
     this.preserveFunctionRegexs = [...this.preserveFunctionSet.values()].map((x) => {
       return new RegExp(escapeStringRegexp(x) + '\\(([^)]*)\\)', 'g')
     })
@@ -96,8 +96,8 @@ export class Context {
   async initConfig(opts: InitConfigOptions = {}) {
     const { cwd, classList: _classList, mangleOptions } = opts
     const { config, cwd: configCwd } = await getConfig(cwd)
-    const mangleConfig = mangleOptions ?? config?.mangle
-    this.mergeOptions(mangleConfig)
+
+    this.mergeOptions(mangleOptions, config?.mangle)
     if (_classList) {
       const classList = sort(_classList).desc((c) => c.length)
       for (const className of classList) {

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

@@ -744,6 +744,177 @@ exports[`js handler > trailing slash case 1 1`] = `"document.querySelector(\\"#a
 
 exports[`js handler > trailing slash case 2 1`] = `"document.querySelector(\\"#app\\").classList.add(\\"tw-a tw-b tw-a s tw-a\\");"`;
 
+exports[`js handler > ts vanilla-0 1`] = `
+"import './style.css'
+import typescriptLogo from './typescript.svg'
+
+import { setupCounter } from './counter'
+
+document.querySelector<HTMLDivElement>('#app')!.innerHTML = \`
+<main class=\\"flex tw-fb tw-yb tw-cb tw-ra tw-mc\\">
+<div class=\\"tw-rc tw-gc tw-ub tw-cb tw-ra tw-ob tw-cc tw-ac\\">
+  <p
+    class=\\"fixed tw-dc tw-jc flex tw-gc tw-va tw-wb tw-pa tw-ja tw-za tw-nc tw-oc tw-ca tw-l tw-v tw-ea tw-sb tw-tb  tw-ab tw-qb tw-wa tw-fc tw-m\\">
+    Get started by editing&nbsp;
+    <code class=\\"tw-ob tw-nb\\">pages/index.tsx</code>
+  </p>
+  <div
+    class=\\"fixed tw-xb tw-dc flex tw-kc tw-gc tw-pb tw-va tw-ka tw-jb tw-vb tw-qa tw-ua tw-sb tw-rb tw-tb tw-kb\\">
+    <a class=\\"tw-w flex tw-ba tw-hc tw-tc tw-n tw-ec\\"
+      href=\\"https://vercel.com?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app\\"
+      target=\\"_blank\\" rel=\\"noopener noreferrer\\">
+      By
+      <img src=\\"\${typescriptLogo}\\" alt=\\"Vercel Logo\\" class=\\"tw-hb\\" priority />
+    </a>
+  </div>
+</div>
+
+<div
+  class=\\"relative flex tw-ba tw-na tw-ha tw-ia tw-k tw-u before:bg-gradient-radial tw-da tw-p tw-oa tw-s tw-sa tw-gb tw-la tw-ma tw-o after:bg-gradient-conic tw-y tw-z tw-ta tw-x tw-b tw-d tw-h tw-j tw-g tw-t\\">
+  <img class=\\"relative tw-a tw-hb\\" src=\\"/vite.svg\\" alt=\\"Next.js Logo\\"
+    priority />
+</div>
+
+<div class=\\"tw-ic grid tw-ib tw-bc tw-xa tw-db\\">
+  <a href=\\"https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app\\"
+    class=\\"group tw-mb border tw-aa tw-pc tw-qc tw-ga tw-q tw-fa tw-c tw-e\\"
+    target=\\"_blank\\" rel=\\"noopener noreferrer\\">
+    <h2 class=\\"tw-lc tw-zb tw-ya\\">
+      Docs <span
+        class=\\"tw-bb tw-r tw-i tw-f\\">-&gt;</span>
+    </h2>
+    <p class=\\"tw-sc tw-eb tw-cc tw-lb\\">Find in-depth information about Next.js
+      features and API.</p>
+  </a>
+
+  <a href=\\"https://nextjs.org/learn?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app\\"
+    class=\\"group tw-mb border tw-aa tw-pc tw-qc tw-ga tw-q tw-fa tw-c tw-e\\"
+    target=\\"_blank\\" rel=\\"noopener noreferrer\\">
+    <h2 class=\\"tw-lc tw-zb tw-ya\\">
+      Learn <span
+        class=\\"tw-bb tw-r tw-i tw-f\\">-&gt;</span>
+    </h2>
+    <p class=\\"tw-sc tw-eb tw-cc tw-lb\\">Learn about Next.js in an interactive
+      course with&nbsp;quizzes!</p>
+  </a>
+
+  <a href=\\"https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app\\"
+    class=\\"group tw-mb border tw-aa tw-pc tw-qc tw-ga tw-q tw-fa tw-c tw-e\\"
+    target=\\"_blank\\" rel=\\"noopener noreferrer\\">
+    <h2 class=\\"tw-lc tw-zb tw-ya\\">
+      Templates <span
+        class=\\"tw-bb tw-r tw-i tw-f\\">-&gt;</span>
+    </h2>
+    <p class=\\"tw-sc tw-eb tw-cc tw-lb\\">Discover and deploy boilerplate example
+      Next.js&nbsp;projects.</p>
+  </a>
+
+  <a href=\\"https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app\\"
+    class=\\"group tw-mb border tw-aa tw-pc tw-qc tw-ga tw-q tw-fa tw-c tw-e\\"
+    target=\\"_blank\\" rel=\\"noopener noreferrer\\">
+    <h2 class=\\"tw-lc tw-zb tw-ya\\">
+      Deploy <span
+        class=\\"tw-bb tw-r tw-i tw-f\\">-&gt;</span>
+    </h2>
+    <p class=\\"tw-sc tw-eb tw-cc tw-lb\\">Instantly deploy your Next.js site to a
+      shareable URL with Vercel.</p>
+  </a>
+</div>
+</main>
+\`
+
+setupCounter(document.querySelector<HTMLButtonElement>('#counter')!)
+"
+`;
+
+exports[`js handler > tsx app0 1`] = `
+"import { useState } from 'react'
+import reactLogo from './assets/react.svg'
+
+import './App.css'
+
+function App() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <main className=\\"flex tw-fb tw-zb tw-cb tw-ra tw-nc\\">
+      <div className=\\"tw-sc tw-hc tw-vb tw-cb tw-ra tw-pb tw-dc tw-bc\\">
+        <p className=\\"fixed tw-ec tw-kc flex tw-hc tw-va tw-xb tw-pa tw-ja tw-za tw-oc tw-pc tw-ca tw-l tw-v tw-ea tw-tb tw-ub  tw-ab tw-rb tw-wa tw-gc tw-m\\">
+          Get started by editing&nbsp;
+          <code className=\\"tw-pb tw-ob\\">pages/index.tsx</code>
+        </p>
+        <div className=\\"fixed tw-yb tw-ec flex tw-lc tw-hc tw-qb tw-va tw-ka tw-jb tw-wb tw-qa tw-ua tw-tb tw-sb tw-ub tw-kb\\">
+          <a
+            className=\\"tw-w flex tw-ba tw-ic tw-uc tw-n tw-fc\\"
+            href=\\"https://vercel.com?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app\\"
+            target=\\"_blank\\"
+            rel=\\"noopener noreferrer\\"
+          >
+            By <img src=\\"/vite.svg\\" alt=\\"Vercel Logo\\" className=\\"tw-hb\\" width={100} height={24} />
+          </a>
+        </div>
+      </div>
+
+      <div className=\\"relative flex tw-ba tw-na tw-ha tw-ia tw-k tw-u before:bg-gradient-radial tw-da tw-p tw-oa tw-s tw-sa tw-gb tw-la tw-ma tw-o after:bg-gradient-conic tw-y tw-z tw-ta tw-x tw-b tw-d tw-h tw-j tw-g tw-t\\">
+        <img className=\\"relative tw-a tw-hb\\" src={reactLogo} alt=\\"Next.js Logo\\" width={180} height={37} />
+      </div>
+
+      <div className=\\"tw-jc grid tw-ib tw-cc tw-xa tw-db\\">
+        <a
+          href=\\"https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app\\"
+          className=\\"group tw-mb border tw-aa tw-qc tw-rc tw-ga tw-q tw-fa tw-c tw-e\\"
+          target=\\"_blank\\"
+          rel=\\"noopener noreferrer\\"
+        >
+          <h2 className={\` tw-mc tw-ac tw-ya\`}>
+            Docs <span className=\\"tw-bb tw-r tw-i tw-f\\">-&gt;</span>
+          </h2>
+          <p className={\` tw-tc tw-eb tw-dc tw-lb\`}>Find in-depth information about Next.js features and API.</p>
+        </a>
+
+        <a
+          href=\\"https://nextjs.org/learn?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app\\"
+          className=\\"group tw-mb border tw-aa tw-qc tw-rc tw-ga tw-q tw-fa tw-c tw-e\\"
+          target=\\"_blank\\"
+          rel=\\"noopener noreferrer\\"
+        >
+          <h2 className={\` tw-mc tw-ac tw-ya\`}>
+            Learn <span className=\\"tw-bb tw-r tw-i tw-f\\">-&gt;</span>
+          </h2>
+          <p className={\` tw-tc tw-eb tw-dc tw-lb\`}>Learn about Next.js in an interactive course with&nbsp;quizzes!</p>
+        </a>
+
+        <a
+          href=\\"https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app\\"
+          className=\\"group tw-mb border tw-aa tw-qc tw-rc tw-ga tw-q tw-fa tw-c tw-e\\"
+          target=\\"_blank\\"
+          rel=\\"noopener noreferrer\\"
+        >
+          <h2 className={\` tw-mc tw-ac tw-ya\`}>
+            Templates <span className=\\"tw-bb tw-r tw-i tw-f\\">-&gt;</span>
+          </h2>
+          <p className={\` tw-tc tw-eb tw-dc tw-lb\`}>Discover and deploy boilerplate example Next.js&nbsp;projects.</p>
+        </a>
+
+        <a
+          href=\\"https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app\\"
+          className=\\"group tw-mb border tw-aa tw-qc tw-rc tw-ga tw-q tw-fa tw-c tw-e\\"
+          target=\\"_blank\\"
+          rel=\\"noopener noreferrer\\"
+        >
+          <h2 className={\` tw-mc tw-ac tw-ya\`}>
+            Deploy <span className=\\"tw-bb tw-r tw-i tw-f\\">-&gt;</span>
+          </h2>
+          <p className={\` tw-tc tw-eb tw-dc tw-lb\`}>Instantly deploy your Next.js site to a shareable URL with Vercel.</p>
+        </a>
+      </div>
+    </main>
+  )
+}
+
+export default App"
+`;
+
 exports[`js handler > z-10 not transform 1`] = `
 "{
   className: \\"tw-a tw-b tw-c tw-d tw-e tw-f tw-g tw-h\\";

packages/core/test/fixtures/app0.json

@@ -0,0 +1,106 @@
+[
+  "after:-z-20",
+  "after:absolute",
+  "after:blur-2xl",
+  "after:content-['']",
+  "after:dark:from-sky-900",
+  "after:dark:via-[#0141ff]/40",
+  "after:from-sky-200",
+  "after:h-[180px]",
+  "after:translate-x-1/3",
+  "after:via-blue-200",
+  "after:w-[240px]",
+  "backdrop-blur-2xl",
+  "before:-translate-x-1/2",
+  "before:absolute",
+  "before:blur-2xl",
+  "before:content-['']",
+  "before:dark:bg-gradient-to-br",
+  "before:dark:from-transparent",
+  "before:dark:to-blue-700/10",
+  "before:from-white",
+  "before:h-[300px]",
+  "before:lg:h-[360px]",
+  "before:rounded-full",
+  "before:to-transparent",
+  "before:w-[480px]",
+  "bg-gradient-to-b",
+  "bg-gradient-to-t",
+  "border",
+  "border-b",
+  "border-gray-300",
+  "border-transparent",
+  "bottom-0",
+  "dark:bg-zinc-800/30",
+  "dark:border-neutral-800",
+  "dark:drop-shadow-[0_0_0.3rem_#ffffff70]",
+  "dark:from-black",
+  "dark:from-inherit",
+  "dark:invert",
+  "dark:via-black",
+  "fixed",
+  "flex",
+  "flex-col",
+  "font-bold",
+  "font-mono",
+  "font-semibold",
+  "from-white",
+  "from-zinc-200",
+  "gap-2",
+  "grid",
+  "group-hover:translate-x-1",
+  "h-48",
+  "hover:bg-gray-100",
+  "hover:border-gray-300",
+  "hover:dark:bg-neutral-800/30",
+  "hover:dark:border-neutral-700",
+  "inline-block",
+  "items-center",
+  "items-end",
+  "justify-between",
+  "justify-center",
+  "left-0",
+  "lg:bg-gray-200",
+  "lg:bg-none",
+  "lg:border",
+  "lg:dark:bg-zinc-800/30",
+  "lg:flex",
+  "lg:grid-cols-4",
+  "lg:h-auto",
+  "lg:mb-0",
+  "lg:p-0",
+  "lg:p-4",
+  "lg:pointer-events-auto",
+  "lg:rounded-xl",
+  "lg:static",
+  "lg:text-left",
+  "lg:w-auto",
+  "m-0",
+  "max-w-5xl",
+  "max-w-[30ch]",
+  "mb-3",
+  "mb-32",
+  "min-h-screen",
+  "motion-reduce:transform-none",
+  "opacity-50",
+  "p-24",
+  "p-8",
+  "pb-6",
+  "place-items-center",
+  "pointer-events-none",
+  "pt-8",
+  "px-5",
+  "py-4",
+  "relative",
+  "rounded-lg",
+  "text-2xl",
+  "text-[red]",
+  "text-center",
+  "text-sm",
+  "top-0",
+  "transition-colors",
+  "transition-transform",
+  "via-white",
+  "w-full",
+  "z-10"
+]