feat: add support for legacy tailwind merge config

nextui-org · Feb 10, 2024 · 89dbd76 · 89dbd76
1 parent 43e3af3
commit 89dbd76
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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)));