fix: mergeObjects order and added tests

nextui-org · Mar 20, 2024 · ae6b8eb · ae6b8eb
1 parent 8ec5f34
commit ae6b8eb
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 5 deletions.
diff --git a/src/__tests__/tv.test.ts b/src/__tests__/tv.test.ts
@@ -2093,6 +2093,48 @@ describe("Tailwind Variants (TV) - Extends", () => {
     expect(result).toHaveClass(expectedResult);
   });
 
+  test("should override the extended classes with variants, both using array", () => {
+    const p = tv({
+      base: "text-base text-green-500",
+      variants: {
+        isBig: {
+          true: "text-5xl",
+          false: "text-2xl",
+        },
+        color: {
+          red: ["text-red-500 bg-red-100", "tracking-normal"],
+          blue: "text-blue-500",
+        },
+      },
+    });
+
+    const h1 = tv({
+      extend: p,
+      base: "text-3xl font-bold",
+      variants: {
+        color: {
+          red: ["text-red-200", "bg-red-200"],
+          green: "text-green-500",
+        },
+      },
+    });
+
+    const result = h1({
+      isBig: true,
+      color: "red",
+    });
+
+    const expectedResult = [
+      "font-bold",
+      "text-red-200",
+      "bg-red-200",
+      "tracking-normal",
+      "text-5xl",
+    ];
+
+    expect(result).toHaveClass(expectedResult);
+  });
+
   test("should include the extended classes with defaultVariants - parent", () => {
     const p = tv({
       base: "text-base text-green-500",
@@ -2320,7 +2362,7 @@ describe("Tailwind Variants (TV) - Extends", () => {
         {
           isBig: true,
           color: "red",
-          class: "bg-red-500",
+          class: ["bg-red-500"],
         },
       ],
     });
@@ -2338,7 +2380,7 @@ describe("Tailwind Variants (TV) - Extends", () => {
         {
           isBig: true,
           color: "red",
-          class: "bg-red-600",
+          class: ["bg-red-600"],
         },
       ],
     });

diff --git a/src/utils.js b/src/utils.js
@@ -35,10 +35,10 @@ export const mergeObjects = (obj1, obj2) => {
       const val1 = obj1[key];
       const val2 = obj2[key];
 
-      if (typeof val1 === "object" && typeof val2 === "object") {
-        result[key] = mergeObjects(val1, val2);
-      } else if (Array.isArray(val1) || Array.isArray(val2)) {
+      if (Array.isArray(val1) || Array.isArray(val2)) {
         result[key] = flatMergeArrays(val2, val1);
+      } else if (typeof val1 === "object" && typeof val2 === "object") {
+        result[key] = mergeObjects(val1, val2);
       } else {
         result[key] = val2 + " " + val1;
       }