Merge pull request #172 from thefalked/fix/merge-objects-order

fix mergeObjects order
nextui-org · Mar 21, 2024 · a92499c · a92499c
2 parents 8ec5f34 + d7a0071
commit a92499c
Show file tree

Hide file tree

Showing 2 changed files with 112 additions and 3 deletions.
diff --git a/src/__tests__/tv.test.ts b/src/__tests__/tv.test.ts
@@ -2350,6 +2350,115 @@ describe("Tailwind Variants (TV) - Extends", () => {
     expect(result).toHaveClass(expectedResult);
   });
 
+  test.only("should override the extended classes with variants and compoundVariants, 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",
+        },
+      },
+      defaultVariants: {
+        isBig: true,
+        color: "red",
+      },
+      compoundVariants: [
+        {
+          isBig: true,
+          color: "red",
+          class: "bg-red-500",
+        },
+        {
+          isBig: false,
+          color: "red",
+          class: ["bg-red-500"],
+        },
+        {
+          isBig: true,
+          color: "blue",
+          class: ["bg-blue-500"],
+        },
+        {
+          isBig: false,
+          color: "blue",
+          class: "bg-blue-500",
+        },
+      ],
+    });
+
+    const h1 = tv({
+      extend: p,
+      base: "text-3xl font-bold",
+      variants: {
+        isBig: {
+          true: "text-7xl",
+          false: "text-3xl",
+        },
+        color: {
+          red: ["text-red-200", "bg-red-200"],
+          green: ["text-green-500"],
+        },
+      },
+      compoundVariants: [
+        {
+          isBig: true,
+          color: "red",
+          class: "bg-red-600",
+        },
+        {
+          isBig: false,
+          color: "red",
+          class: "bg-red-600",
+        },
+        {
+          isBig: true,
+          color: "blue",
+          class: ["bg-blue-600"],
+        },
+        {
+          isBig: false,
+          color: "blue",
+          class: ["bg-blue-600"],
+        },
+      ],
+    });
+
+    expect(h1({isBig: true, color: "red"})).toHaveClass([
+      "font-bold",
+      "text-red-200",
+      "bg-red-600",
+      "tracking-normal",
+      "text-7xl",
+    ]);
+
+    expect(h1({isBig: true, color: "blue"})).toHaveClass([
+      "font-bold",
+      "text-blue-500",
+      "bg-blue-600",
+      "text-7xl",
+    ]);
+
+    expect(h1({isBig: false, color: "red"})).toHaveClass([
+      "font-bold",
+      "text-red-200",
+      "bg-red-600",
+      "tracking-normal",
+      "text-3xl",
+    ]);
+
+    expect(h1({isBig: false, color: "blue"})).toHaveClass([
+      "font-bold",
+      "text-blue-500",
+      "bg-blue-600",
+      "text-3xl",
+    ]);
+  });
+
   test("should include the extended classes with screenVariants single values", () => {
     const p = tv({
       base: "text-base text-green-500",

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