@mgcrea/react-native-tailwind 0.6.0 → 0.7.0

package/src/stubs/tw.ts

@@ -0,0 +1,80 @@
+/**
+ * Compile-time stub for tw/twStyle functions
+ *
+ * These functions are transformed by the Babel plugin at compile-time.
+ * If you see these errors at runtime, it means the Babel plugin is not configured correctly.
+ *
+ * For runtime parsing, use: import { tw } from '@mgcrea/react-native-tailwind/runtime'
+ */
+
+import type { ImageStyle, TextStyle, ViewStyle } from "react-native";
+
+/**
+ * Union type for all React Native style types
+ */
+export type NativeStyle = ViewStyle | TextStyle | ImageStyle;
+
+/**
+ * Return type for tw/twStyle functions with separate style properties for modifiers
+ */
+export type TwStyle<T extends NativeStyle = NativeStyle> = {
+  style: T;
+  activeStyle?: T;
+  focusStyle?: T;
+  disabledStyle?: T;
+};
+
+/**
+ * Compile-time Tailwind CSS template tag (transformed by Babel plugin)
+ *
+ * This function is replaced at compile-time by the Babel plugin.
+ * The import is removed and calls are transformed to inline style objects.
+ *
+ * @example
+ * ```tsx
+ * import { tw } from '@mgcrea/react-native-tailwind';
+ *
+ * const styles = tw`bg-blue-500 active:bg-blue-700`;
+ * // Transformed to:
+ * // const styles = {
+ * //   style: styles._bg_blue_500,
+ * //   activeStyle: styles._active_bg_blue_700
+ * // };
+ * ```
+ */
+export function tw<T extends NativeStyle = NativeStyle>(
+  _strings: TemplateStringsArray,
+  ..._values: unknown[]
+): TwStyle<T> {
+  throw new Error(
+    "tw() must be transformed by the Babel plugin. " +
+      "Ensure @mgcrea/react-native-tailwind/babel is configured in your babel.config.js. " +
+      "For runtime parsing, use: import { tw } from '@mgcrea/react-native-tailwind/runtime'",
+  );
+}
+
+/**
+ * Compile-time Tailwind CSS string function (transformed by Babel plugin)
+ *
+ * This function is replaced at compile-time by the Babel plugin.
+ * The import is removed and calls are transformed to inline style objects.
+ *
+ * @example
+ * ```tsx
+ * import { twStyle } from '@mgcrea/react-native-tailwind';
+ *
+ * const styles = twStyle('bg-blue-500 active:bg-blue-700');
+ * // Transformed to:
+ * // const styles = {
+ * //   style: styles._bg_blue_500,
+ * //   activeStyle: styles._active_bg_blue_700
+ * // };
+ * ```
+ */
+export function twStyle<T extends NativeStyle = NativeStyle>(_className: string): TwStyle<T> | undefined {
+  throw new Error(
+    "twStyle() must be transformed by the Babel plugin. " +
+      "Ensure @mgcrea/react-native-tailwind/babel is configured in your babel.config.js. " +
+      "For runtime parsing, use: import { twStyle } from '@mgcrea/react-native-tailwind/runtime'",
+  );
+}

package/src/utils/flattenColors.test.ts

@@ -0,0 +1,361 @@
+import { describe, expect, it } from "vitest";
+import { flattenColors } from "./flattenColors";
+
+describe("flattenColors", () => {
+  it("should handle flat color objects", () => {
+    const colors = {
+      red: "#ff0000",
+      blue: "#0000ff",
+      green: "#00ff00",
+    };
+
+    expect(flattenColors(colors)).toEqual({
+      red: "#ff0000",
+      blue: "#0000ff",
+      green: "#00ff00",
+    });
+  });
+
+  it("should flatten single-level nested objects", () => {
+    const colors = {
+      brand: {
+        primary: "#ff6b6b",
+        secondary: "#4ecdc4",
+      },
+    };
+
+    expect(flattenColors(colors)).toEqual({
+      "brand-primary": "#ff6b6b",
+      "brand-secondary": "#4ecdc4",
+    });
+  });
+
+  it("should flatten multi-level nested objects", () => {
+    const colors = {
+      brand: {
+        light: {
+          primary: "#ffcccc",
+          secondary: "#ccffff",
+        },
+        dark: {
+          primary: "#990000",
+          secondary: "#006666",
+        },
+      },
+    };
+
+    expect(flattenColors(colors)).toEqual({
+      "brand-light-primary": "#ffcccc",
+      "brand-light-secondary": "#ccffff",
+      "brand-dark-primary": "#990000",
+      "brand-dark-secondary": "#006666",
+    });
+  });
+
+  it("should handle mixed flat and nested objects", () => {
+    const colors = {
+      white: "#ffffff",
+      black: "#000000",
+      brand: {
+        primary: "#ff6b6b",
+        secondary: "#4ecdc4",
+      },
+      accent: "#ffe66d",
+    };
+
+    expect(flattenColors(colors)).toEqual({
+      white: "#ffffff",
+      black: "#000000",
+      "brand-primary": "#ff6b6b",
+      "brand-secondary": "#4ecdc4",
+      accent: "#ffe66d",
+    });
+  });
+
+  it("should handle Tailwind-style color scale objects", () => {
+    const colors = {
+      gray: {
+        "50": "#f9fafb",
+        "100": "#f3f4f6",
+        "200": "#e5e7eb",
+        "500": "#6b7280",
+        "900": "#111827",
+      },
+    };
+
+    expect(flattenColors(colors)).toEqual({
+      "gray-50": "#f9fafb",
+      "gray-100": "#f3f4f6",
+      "gray-200": "#e5e7eb",
+      "gray-500": "#6b7280",
+      "gray-900": "#111827",
+    });
+  });
+
+  it("should handle empty object", () => {
+    expect(flattenColors({})).toEqual({});
+  });
+
+  it("should handle single color", () => {
+    const colors = {
+      primary: "#ff0000",
+    };
+
+    expect(flattenColors(colors)).toEqual({
+      primary: "#ff0000",
+    });
+  });
+
+  it("should handle deeply nested objects (3+ levels)", () => {
+    const colors = {
+      theme: {
+        light: {
+          brand: {
+            primary: "#ff6b6b",
+            secondary: "#4ecdc4",
+          },
+        },
+        dark: {
+          brand: {
+            primary: "#990000",
+            secondary: "#006666",
+          },
+        },
+      },
+    };
+
+    expect(flattenColors(colors)).toEqual({
+      "theme-light-brand-primary": "#ff6b6b",
+      "theme-light-brand-secondary": "#4ecdc4",
+      "theme-dark-brand-primary": "#990000",
+      "theme-dark-brand-secondary": "#006666",
+    });
+  });
+
+  it("should handle numeric keys", () => {
+    const colors = {
+      blue: {
+        "100": "#dbeafe",
+        "500": "#3b82f6",
+        "900": "#1e3a8a",
+      },
+    };
+
+    expect(flattenColors(colors)).toEqual({
+      "blue-100": "#dbeafe",
+      "blue-500": "#3b82f6",
+      "blue-900": "#1e3a8a",
+    });
+  });
+
+  it("should handle keys with hyphens", () => {
+    const colors = {
+      "brand-primary": "#ff0000",
+      "brand-secondary": {
+        light: "#00ff00",
+        dark: "#006600",
+      },
+    };
+
+    expect(flattenColors(colors)).toEqual({
+      "brand-primary": "#ff0000",
+      "brand-secondary-light": "#00ff00",
+      "brand-secondary-dark": "#006600",
+    });
+  });
+
+  it("should handle uppercase and lowercase hex values", () => {
+    const colors = {
+      red: "#FF0000",
+      blue: "#0000ff",
+      green: "#00Ff00",
+    };
+
+    expect(flattenColors(colors)).toEqual({
+      red: "#FF0000",
+      blue: "#0000ff",
+      green: "#00Ff00",
+    });
+  });
+
+  it("should handle 3-digit hex values", () => {
+    const colors = {
+      red: "#f00",
+      blue: "#00f",
+      green: "#0f0",
+    };
+
+    expect(flattenColors(colors)).toEqual({
+      red: "#f00",
+      blue: "#00f",
+      green: "#0f0",
+    });
+  });
+
+  it("should handle 8-digit hex values (with alpha)", () => {
+    const colors = {
+      "red-50": "#ff000080",
+      "blue-50": "#0000ff80",
+    };
+
+    expect(flattenColors(colors)).toEqual({
+      "red-50": "#ff000080",
+      "blue-50": "#0000ff80",
+    });
+  });
+
+  it("should handle complex real-world Tailwind config", () => {
+    const colors = {
+      transparent: "transparent",
+      current: "currentColor",
+      white: "#ffffff",
+      black: "#000000",
+      gray: {
+        "50": "#f9fafb",
+        "100": "#f3f4f6",
+        "500": "#6b7280",
+        "900": "#111827",
+      },
+      brand: {
+        primary: "#ff6b6b",
+        secondary: "#4ecdc4",
+        accent: {
+          light: "#ffe66d",
+          dark: "#ffb900",
+        },
+      },
+    };
+
+    expect(flattenColors(colors)).toEqual({
+      transparent: "transparent",
+      current: "currentColor",
+      white: "#ffffff",
+      black: "#000000",
+      "gray-50": "#f9fafb",
+      "gray-100": "#f3f4f6",
+      "gray-500": "#6b7280",
+      "gray-900": "#111827",
+      "brand-primary": "#ff6b6b",
+      "brand-secondary": "#4ecdc4",
+      "brand-accent-light": "#ffe66d",
+      "brand-accent-dark": "#ffb900",
+    });
+  });
+
+  it("should not mutate input object", () => {
+    const colors = {
+      brand: {
+        primary: "#ff6b6b",
+        secondary: "#4ecdc4",
+      },
+    };
+
+    const original = JSON.parse(JSON.stringify(colors));
+    flattenColors(colors);
+
+    expect(colors).toEqual(original);
+  });
+
+  it("should handle undefined values gracefully", () => {
+    const colors = {
+      red: "#ff0000",
+      blue: undefined as unknown as string, // Testing runtime edge case
+      green: "#00ff00",
+    };
+
+    // undefined values are skipped (not objects or strings)
+    expect(flattenColors(colors)).toEqual({
+      red: "#ff0000",
+      green: "#00ff00",
+    });
+  });
+
+  it("should handle special color keywords", () => {
+    const colors = {
+      transparent: "transparent",
+      current: "currentColor",
+      inherit: "inherit",
+    };
+
+    expect(flattenColors(colors)).toEqual({
+      transparent: "transparent",
+      current: "currentColor",
+      inherit: "inherit",
+    });
+  });
+
+  it("should handle RGB/RGBA color values", () => {
+    const colors = {
+      primary: "rgb(255, 0, 0)",
+      secondary: "rgba(0, 255, 0, 0.5)",
+    };
+
+    expect(flattenColors(colors)).toEqual({
+      primary: "rgb(255, 0, 0)",
+      secondary: "rgba(0, 255, 0, 0.5)",
+    });
+  });
+
+  it("should handle very deeply nested structures (stress test)", () => {
+    const colors = {
+      level1: {
+        level2: {
+          level3: {
+            level4: {
+              level5: "#ff0000",
+            },
+          },
+        },
+      },
+    };
+
+    expect(flattenColors(colors)).toEqual({
+      "level1-level2-level3-level4-level5": "#ff0000",
+    });
+  });
+
+  it("should handle camelCase keys", () => {
+    const colors = {
+      brandPrimary: "#ff0000",
+      accentColor: {
+        lightShade: "#ffcccc",
+        darkShade: "#cc0000",
+      },
+    };
+
+    expect(flattenColors(colors)).toEqual({
+      brandPrimary: "#ff0000",
+      "accentColor-lightShade": "#ffcccc",
+      "accentColor-darkShade": "#cc0000",
+    });
+  });
+
+  it("should produce consistent output", () => {
+    const colors = {
+      brand: {
+        primary: "#ff6b6b",
+        secondary: "#4ecdc4",
+      },
+    };
+
+    const result1 = flattenColors(colors);
+    const result2 = flattenColors(colors);
+    const result3 = flattenColors(colors);
+
+    expect(result1).toEqual(result2);
+    expect(result2).toEqual(result3);
+  });
+
+  it("should maintain key order (insertion order)", () => {
+    const colors = {
+      z: "#000001",
+      a: "#000002",
+      m: "#000003",
+    };
+
+    const flattened = flattenColors(colors);
+    const keys = Object.keys(flattened);
+
+    expect(keys).toEqual(["z", "a", "m"]);
+  });
+});

package/src/utils/flattenColors.ts

@@ -0,0 +1,32 @@
+/**
+ * Type representing a nested color structure that can be arbitrarily deep
+ */
+type NestedColors = {
+  [key: string]: string | NestedColors;
+};
+
+/**
+ * Flatten nested color objects into flat key-value map
+ * Example: { brand: { light: '#fff', dark: '#000' } } => { 'brand-light': '#fff', 'brand-dark': '#000' }
+ *
+ * @param colors - Nested color object where values can be strings or objects
+ * @param prefix - Optional prefix for nested keys (used for recursion)
+ * @returns Flattened color map with dash-separated keys
+ */
+export function flattenColors(colors: NestedColors, prefix = ""): Record<string, string> {
+  const result: Record<string, string> = {};
+
+  for (const [key, value] of Object.entries(colors)) {
+    const newKey = prefix ? `${prefix}-${key}` : key;
+
+    if (typeof value === "string") {
+      result[newKey] = value;
+    } else if (typeof value === "object" && value !== null) {
+      // Recursively flatten nested objects
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+      Object.assign(result, flattenColors(value as NestedColors, newKey));
+    }
+  }
+
+  return result;
+}