Update to tailwind-merge v2 (#148)

* feat: update to `tailwind-merge` v2

* feat: add support for legacy tailwind merge config

package.json

@@ -36,7 +36,7 @@
     "test": "jest --verbose"
   },
   "dependencies": {
-    "tailwind-merge": "^1.14.0"
+    "tailwind-merge": "^2.2.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.2.0",

src/__tests__/tv.test.ts

@@ -5,21 +5,23 @@ import {tv, cn} from "../index";
 const COMMON_UNITS = ["small", "medium", "large"];
 
 const 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"],
-      },
-    ],
+  extend: {
+    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"],
+        },
+      ],
+    },
   },
 };
 
@@ -2974,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"]);
+  });
 });

src/config.d.ts

@@ -1,20 +1,23 @@
-import type {Config as TwMergeConfig} from "tailwind-merge";
+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.
    * It's avoid to have duplicate tailwind classes. (Recommended)
-   * @see https://github.com/dcastil/tailwind-merge/blob/v1.8.1/README.md
+   * @see https://github.com/dcastil/tailwind-merge/blob/v2.2.0/README.md
    * @default true
    */
   twMerge?: boolean;
   /**
    * The config object for `tailwind-merge` library.
-   * @see https://github.com/dcastil/tailwind-merge/blob/v1.8.1/docs/configuration.md
+   * @see https://github.com/dcastil/tailwind-merge/blob/v2.2.0/docs/configuration.md
    */
-  twMergeConfig?: Partial<TwMergeConfig>;
+  twMergeConfig?: MergeConfig & LegacyMergeConfig;
 };
 
 export type TVConfig<

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)));