@mgcrea/react-native-tailwind 0.7.0 → 0.8.1

package/src/utils/flattenColors.test.ts

@@ -358,4 +358,104 @@ describe("flattenColors", () => {
 
     expect(keys).toEqual(["z", "a", "m"]);
   });
+
+  it("should handle DEFAULT key in color scale objects", () => {
+    const colors = {
+      primary: {
+        "50": "#eefdfd",
+        "100": "#d4f9f9",
+        "200": "#aef2f3",
+        "500": "#1bacb5",
+        "900": "#1e4f5b",
+        DEFAULT: "#1bacb5",
+      },
+    };
+
+    expect(flattenColors(colors)).toEqual({
+      primary: "#1bacb5", // DEFAULT becomes the parent key
+      "primary-50": "#eefdfd",
+      "primary-100": "#d4f9f9",
+      "primary-200": "#aef2f3",
+      "primary-500": "#1bacb5",
+      "primary-900": "#1e4f5b",
+    });
+  });
+
+  it("should handle DEFAULT key with multiple color scales", () => {
+    const colors = {
+      primary: {
+        DEFAULT: "#1bacb5",
+        "500": "#1bacb5",
+      },
+      secondary: {
+        DEFAULT: "#ff6b6b",
+        "500": "#ff6b6b",
+      },
+    };
+
+    expect(flattenColors(colors)).toEqual({
+      primary: "#1bacb5",
+      "primary-500": "#1bacb5",
+      secondary: "#ff6b6b",
+      "secondary-500": "#ff6b6b",
+    });
+  });
+
+  it("should handle DEFAULT key in nested structures", () => {
+    const colors = {
+      brand: {
+        primary: {
+          DEFAULT: "#1bacb5",
+          light: "#d4f9f9",
+          dark: "#0e343e",
+        },
+      },
+    };
+
+    expect(flattenColors(colors)).toEqual({
+      "brand-primary": "#1bacb5", // DEFAULT uses parent key
+      "brand-primary-light": "#d4f9f9",
+      "brand-primary-dark": "#0e343e",
+    });
+  });
+
+  it("should handle DEFAULT at top level (edge case)", () => {
+    const colors = {
+      DEFAULT: "#000000",
+      primary: "#ff0000",
+    };
+
+    expect(flattenColors(colors)).toEqual({
+      DEFAULT: "#000000", // Top-level DEFAULT kept as-is (no parent)
+      primary: "#ff0000",
+    });
+  });
+
+  it("should handle mixed DEFAULT and regular keys", () => {
+    const colors = {
+      gray: {
+        "50": "#f9fafb",
+        "100": "#f3f4f6",
+        DEFAULT: "#6b7280",
+        "500": "#6b7280",
+        "900": "#111827",
+      },
+      white: "#ffffff",
+      brand: {
+        DEFAULT: "#ff6b6b",
+        accent: "#4ecdc4",
+      },
+    };
+
+    expect(flattenColors(colors)).toEqual({
+      "gray-50": "#f9fafb",
+      "gray-100": "#f3f4f6",
+      gray: "#6b7280", // DEFAULT becomes parent key
+      "gray-500": "#6b7280",
+      "gray-900": "#111827",
+      white: "#ffffff",
+      brand: "#ff6b6b", // DEFAULT becomes parent key
+      "brand-accent": "#4ecdc4",
+    });
+  });
 });

package/src/utils/flattenColors.ts

@@ -8,6 +8,7 @@ type NestedColors = {
 /**
  * Flatten nested color objects into flat key-value map
  * Example: { brand: { light: '#fff', dark: '#000' } } => { 'brand-light': '#fff', 'brand-dark': '#000' }
+ * Special handling for DEFAULT: { primary: { DEFAULT: '#000', 500: '#333' } } => { 'primary': '#000', 'primary-500': '#333' }
  *
  * @param colors - Nested color object where values can be strings or objects
  * @param prefix - Optional prefix for nested keys (used for recursion)
@@ -17,7 +18,8 @@ export function flattenColors(colors: NestedColors, prefix = ""): Record<string,
   const result: Record<string, string> = {};
 
   for (const [key, value] of Object.entries(colors)) {
-    const newKey = prefix ? `${prefix}-${key}` : key;
+    // Special handling for DEFAULT key - use parent key without suffix
+    const newKey = key === "DEFAULT" && prefix ? prefix : prefix ? `${prefix}-${key}` : key;
 
     if (typeof value === "string") {
       result[newKey] = value;