From 89dbd76237f56491a1efa38f8f991e0298ab18b9 Mon Sep 17 00:00:00 2001
From: Mark Skelton <mdskelton99@gmail.com>
Date: Sat, 10 Feb 2024 09:36:18 -0600
Subject: [PATCH] feat: add support for legacy tailwind merge config

---
 src/__tests__/tv.test.ts | 46 ++++++++++++++++++++++++++++++++++++++++
 src/config.d.ts          |  5 ++++-
 src/index.js             | 13 +++++++++++-
 3 files changed, 62 insertions(+), 2 deletions(-)

diff --git a/src/__tests__/tv.test.ts b/src/__tests__/tv.test.ts
index 3424b97..641f612 100644
--- a/src/__tests__/tv.test.ts
+++ b/src/__tests__/tv.test.ts
@@ -2976,4 +2976,50 @@ describe("Tailwind Variants (TV) - Tailwind Merge", () => {
 
     expect(result).toHaveClass(["text-medium", "text-blue-500", "w-unit-4"]);
   });
+
+  it("should support legacy custom config", () => {
+    const styles = tv(
+      {
+        base: "text-small text-yellow-400 w-unit",
+        variants: {
+          size: {
+            small: "text-small w-unit-2",
+            medium: "text-medium w-unit-4",
+            large: "text-large w-unit-6",
+          },
+          color: {
+            red: "text-red-500",
+            blue: "text-blue-500",
+          },
+        },
+      },
+      {
+        twMergeConfig: {
+          theme: {
+            opacity: ["disabled"],
+            spacing: ["divider", "unit", "unit-2", "unit-4", "unit-6"],
+            borderWidth: COMMON_UNITS,
+            borderRadius: COMMON_UNITS,
+          },
+          classGroups: {
+            shadow: [{shadow: COMMON_UNITS}],
+            "font-size": [{text: ["tiny", ...COMMON_UNITS]}],
+            "bg-image": ["bg-stripe-gradient"],
+            "min-w": [
+              {
+                "min-w": ["unit", "unit-2", "unit-4", "unit-6"],
+              },
+            ],
+          },
+        },
+      },
+    );
+
+    const result = styles({
+      size: "medium",
+      color: "blue",
+    });
+
+    expect(result).toHaveClass(["text-medium", "text-blue-500", "w-unit-4"]);
+  });
 });
diff --git a/src/config.d.ts b/src/config.d.ts
index ddda1b2..8c555d4 100644
--- a/src/config.d.ts
+++ b/src/config.d.ts
@@ -2,6 +2,9 @@ import type {extendTailwindMerge} from "tailwind-merge";
 import type {TVVariants} from "./index";
 import type {TVGeneratedScreens} from "./generated";
 
+type MergeConfig = Parameters<typeof extendTailwindMerge>[0];
+type LegacyMergeConfig = Extract<MergeConfig, {extend?: unknown}>["extend"];
+
 export type TWMConfig = {
   /**
    * Whether to merge the class names with `tailwind-merge` library.
@@ -14,7 +17,7 @@ export type TWMConfig = {
    * The config object for `tailwind-merge` library.
    * @see https://github.com/dcastil/tailwind-merge/blob/v2.2.0/docs/configuration.md
    */
-  twMergeConfig?: Parameters<typeof extendTailwindMerge>[0];
+  twMergeConfig?: MergeConfig & LegacyMergeConfig;
 };
 
 export type TVConfig<
diff --git a/src/index.js b/src/index.js
index e8a1de9..920dc2b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -35,7 +35,18 @@ export const cn =
       didTwMergeConfigChange = false;
       cachedTwMerge = isEmptyObject(cachedTwMergeConfig)
         ? twMergeBase
-        : extendTailwindMerge(cachedTwMergeConfig);
+        : extendTailwindMerge({
+            ...cachedTwMergeConfig,
+            extend: {
+              // Support for legacy tailwind-merge config shape
+              theme: cachedTwMergeConfig.theme,
+              classGroups: cachedTwMergeConfig.classGroups,
+              conflictingClassGroupModifiers: cachedTwMergeConfig.conflictingClassGroupModifiers,
+              conflictingClassGroups: cachedTwMergeConfig.conflictingClassGroups,
+              // Support for new tailwind-merge config shape
+              ...cachedTwMergeConfig.extend,
+            },
+          });
     }
 
     return voidEmpty(cachedTwMerge(cnBase(classes)));