@mgcrea/react-native-tailwind 0.7.0 → 0.8.0

package/src/babel/utils/twProcessing.ts

@@ -0,0 +1,124 @@
+/**
+ * Utility functions for processing tw`...` and twStyle() calls
+ */
+
+import type { NodePath } from "@babel/core";
+import type * as BabelTypes from "@babel/types";
+import type { ModifierType, ParsedModifier } from "../../parser/index.js";
+import type { StyleObject } from "../../types/core.js";
+
+/**
+ * Plugin state interface (subset needed for tw processing)
+ */
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+export interface TwProcessingState {
+  styleRegistry: Map<string, StyleObject>;
+  customColors: Record<string, string>;
+  stylesIdentifier: string;
+}
+
+/**
+ * Process tw`...` or twStyle('...') call and replace with TwStyle object
+ * Generates: { style: styles._base, activeStyle: styles._active, ... }
+ */
+export function processTwCall(
+  className: string,
+  path: NodePath,
+  state: TwProcessingState,
+  parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
+  generateStyleKey: (className: string) => string,
+  splitModifierClasses: (className: string) => { baseClasses: string[]; modifierClasses: ParsedModifier[] },
+  t: typeof BabelTypes,
+): void {
+  const { baseClasses, modifierClasses } = splitModifierClasses(className);
+
+  // Build TwStyle object properties
+  const objectProperties: BabelTypes.ObjectProperty[] = [];
+
+  // Parse and add base styles
+  if (baseClasses.length > 0) {
+    const baseClassName = baseClasses.join(" ");
+    const baseStyleObject = parseClassName(baseClassName, state.customColors);
+    const baseStyleKey = generateStyleKey(baseClassName);
+    state.styleRegistry.set(baseStyleKey, baseStyleObject);
+
+    objectProperties.push(
+      t.objectProperty(
+        t.identifier("style"),
+        t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(baseStyleKey)),
+      ),
+    );
+  } else {
+    // No base classes - add empty style object
+    objectProperties.push(t.objectProperty(t.identifier("style"), t.objectExpression([])));
+  }
+
+  // Group modifiers by type
+  const modifiersByType = new Map<ModifierType, ParsedModifier[]>();
+  for (const mod of modifierClasses) {
+    if (!modifiersByType.has(mod.modifier)) {
+      modifiersByType.set(mod.modifier, []);
+    }
+    const modGroup = modifiersByType.get(mod.modifier);
+    if (modGroup) {
+      modGroup.push(mod);
+    }
+  }
+
+  // Add modifier styles
+  for (const [modifierType, modifiers] of modifiersByType) {
+    const modifierClassNames = modifiers.map((m) => m.baseClass).join(" ");
+    const modifierStyleObject = parseClassName(modifierClassNames, state.customColors);
+    const modifierStyleKey = generateStyleKey(`${modifierType}_${modifierClassNames}`);
+    state.styleRegistry.set(modifierStyleKey, modifierStyleObject);
+
+    // Map modifier type to property name: active -> activeStyle
+    const propertyName = `${modifierType}Style`;
+
+    objectProperties.push(
+      t.objectProperty(
+        t.identifier(propertyName),
+        t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(modifierStyleKey)),
+      ),
+    );
+  }
+
+  // Replace the tw`...` or twStyle('...') with the object
+  const twStyleObject = t.objectExpression(objectProperties);
+  path.replaceWith(twStyleObject);
+}
+
+/**
+ * Remove tw/twStyle imports from @mgcrea/react-native-tailwind
+ * This is called after all tw calls have been transformed
+ */
+export function removeTwImports(path: NodePath<BabelTypes.Program>, t: typeof BabelTypes): void {
+  // Traverse the program to find and remove tw/twStyle imports
+  path.traverse({
+    ImportDeclaration(importPath) {
+      const node = importPath.node;
+
+      // Only process imports from main package
+      if (node.source.value !== "@mgcrea/react-native-tailwind") {
+        return;
+      }
+
+      // Filter out tw/twStyle specifiers
+      const remainingSpecifiers = node.specifiers.filter((spec) => {
+        if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
+          const importedName = spec.imported.name;
+          return importedName !== "tw" && importedName !== "twStyle";
+        }
+        return true;
+      });
+
+      if (remainingSpecifiers.length === 0) {
+        // Remove entire import if no specifiers remain
+        importPath.remove();
+      } else if (remainingSpecifiers.length < node.specifiers.length) {
+        // Update import with remaining specifiers
+        node.specifiers = remainingSpecifiers;
+      }
+    },
+  });
+}

package/src/components/TextInput.tsx

@@ -22,21 +22,24 @@ import {
   TextInput as RNTextInput,
   type TextInputProps as RNTextInputProps,
 } from "react-native";
+import { type Simplify } from "../types/util";
 
-export type TextInputProps = Omit<RNTextInputProps, "style"> & {
-  /**
-   * Style can be a static style object/array or a function that receives focus and disabled state
-   */
-  style?:
-    | RNTextInputProps["style"]
-    | ((state: { focused: boolean; disabled: boolean }) => RNTextInputProps["style"]);
-  className?: string; // compile-time only
-  /**
-   * Convenience prop for disabled state (overrides editable if provided)
-   * When true, sets editable to false
-   */
-  disabled?: boolean;
-};
+export type TextInputProps = Simplify<
+  Omit<RNTextInputProps, "style"> & {
+    /**
+     * Style can be a static style object/array or a function that receives focus and disabled state
+     */
+    style?:
+      | RNTextInputProps["style"]
+      | ((state: { focused: boolean; disabled: boolean }) => RNTextInputProps["style"]);
+    className?: string; // compile-time only
+    /**
+     * Convenience prop for disabled state (overrides editable if provided)
+     * When true, sets editable to false
+     */
+    disabled?: boolean;
+  }
+>;
 
 /**
  * Enhanced TextInput with focus and disabled state support

package/src/config/{palettes.ts → tailwind.ts}

@@ -12,7 +12,7 @@ export type TailwindPalette = {
   "950": string;
 };
 
-export const TAILWIND_PALETTES = {
+export const TAILWIND_COLORS = {
   red: {
     "50": "#fef2f2",
     "100": "#ffe2e2",
@@ -301,4 +301,4 @@ export const TAILWIND_PALETTES = {
   },
 } satisfies Record<string, TailwindPalette>;
 
-export type TailwindColor = keyof typeof TAILWIND_PALETTES;
+export type TailwindColor = keyof typeof TAILWIND_COLORS;

package/src/index.ts

@@ -4,8 +4,7 @@
  */
 
 // Compile-time tw/twStyle functions (transformed by Babel plugin)
-export { tw, twStyle } from "./stubs/tw.js";
-export type { NativeStyle, TwStyle } from "./stubs/tw.js";
+export { tw, twStyle } from "./stubs/tw";
 
 // Main parser functions
 export { parseClass, parseClassName } from "./parser";
@@ -13,7 +12,8 @@ export { flattenColors } from "./utils/flattenColors";
 export { generateStyleKey } from "./utils/styleKey";
 
 // Re-export types
-export type { RNStyle, StyleObject } from "./types";
+export type { StyleObject } from "./types/core";
+export type { NativeStyle, TwStyle } from "./types/runtime";
 
 // Re-export individual parsers for advanced usage
 export {
@@ -21,6 +21,8 @@ export {
   parseBorder,
   parseColor,
   parseLayout,
+  parsePlaceholderClass,
+  parsePlaceholderClasses,
   parseShadow,
   parseSizing,
   parseSpacing,
@@ -41,3 +43,4 @@ export { Pressable } from "./components/Pressable";
 export type { PressableProps } from "./components/Pressable";
 export { TextInput } from "./components/TextInput";
 export type { TextInputProps } from "./components/TextInput";
+export { TAILWIND_COLORS } from "./config/tailwind";

package/src/parser/colors.ts

@@ -2,13 +2,13 @@
  * Color utilities (background, text, border colors)
  */
 
-import { TAILWIND_PALETTES } from "../config/palettes";
+import { TAILWIND_COLORS } from "../config/tailwind";
 import type { StyleObject } from "../types";
 import { flattenColors } from "../utils/flattenColors";
 
 // Tailwind color palette (flattened from config)
 export const COLORS: Record<string, string> = {
-  ...flattenColors(TAILWIND_PALETTES),
+  ...flattenColors(TAILWIND_COLORS),
   // Add basic colors
   white: "#FFFFFF",
   black: "#000000",

package/src/parser/index.ts

@@ -74,6 +74,7 @@ export { parseAspectRatio } from "./aspectRatio";
 export { parseBorder } from "./borders";
 export { parseColor } from "./colors";
 export { parseLayout } from "./layout";
+export { parsePlaceholderClass, parsePlaceholderClasses } from "./placeholder";
 export { parseShadow } from "./shadows";
 export { parseSizing } from "./sizing";
 export { parseSpacing } from "./spacing";

package/src/parser/modifiers.ts

@@ -1,8 +1,8 @@
 /**
- * Modifier parsing utilities for state-based class names (active:, hover:, focus:)
+ * Modifier parsing utilities for state-based class names (active:, hover:, focus:, placeholder:)
  */
 
-export type ModifierType = "active" | "hover" | "focus" | "disabled";
+export type ModifierType = "active" | "hover" | "focus" | "disabled" | "placeholder";
 
 export type ParsedModifier = {
   modifier: ModifierType;
@@ -10,9 +10,15 @@ export type ParsedModifier = {
 };
 
 /**
- * Supported modifiers that map to component states
+ * Supported modifiers that map to component states or pseudo-elements
  */
-const SUPPORTED_MODIFIERS: readonly ModifierType[] = ["active", "hover", "focus", "disabled"] as const;
+const SUPPORTED_MODIFIERS: readonly ModifierType[] = [
+  "active",
+  "hover",
+  "focus",
+  "disabled",
+  "placeholder",
+] as const;
 
 /**
  * Parse a class name to detect and extract modifiers

package/src/parser/placeholder.test.ts

@@ -0,0 +1,105 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import { describe, expect, it, vi } from "vitest";
+import { parsePlaceholderClass, parsePlaceholderClasses } from "./placeholder";
+
+describe("parsePlaceholderClass", () => {
+  it("should parse text color classes", () => {
+    // Using actual colors from this project's custom palette (src/config/tailwind.ts)
+    expect(parsePlaceholderClass("text-red-500")).toBe("#fb2c36");
+    expect(parsePlaceholderClass("text-blue-500")).toBe("#2b7fff");
+    expect(parsePlaceholderClass("text-gray-400")).toBe("#99a1af");
+  });
+
+  it("should parse text colors with opacity", () => {
+    // Using actual colors from custom palette
+    // Note: opacity conversion uppercases hex values
+    expect(parsePlaceholderClass("text-red-500/50")).toBe("#FB2C3680"); // 50% opacity
+    expect(parsePlaceholderClass("text-blue-500/75")).toBe("#2B7FFFBF"); // 75% opacity
+    expect(parsePlaceholderClass("text-gray-400/25")).toBe("#99A1AF40"); // 25% opacity
+  });
+
+  it("should parse arbitrary color values", () => {
+    expect(parsePlaceholderClass("text-[#ff0000]")).toBe("#ff0000");
+    expect(parsePlaceholderClass("text-[#ff0000aa]")).toBe("#ff0000aa");
+  });
+
+  it("should parse custom colors", () => {
+    const customColors = {
+      "brand-primary": "#123456",
+      "brand-secondary": "#654321",
+    };
+    expect(parsePlaceholderClass("text-brand-primary", customColors)).toBe("#123456");
+    expect(parsePlaceholderClass("text-brand-secondary", customColors)).toBe("#654321");
+  });
+
+  it("should return null for non-text color classes", () => {
+    expect(parsePlaceholderClass("font-bold")).toBeNull();
+    expect(parsePlaceholderClass("text-lg")).toBeNull();
+    expect(parsePlaceholderClass("text-center")).toBeNull();
+    expect(parsePlaceholderClass("italic")).toBeNull();
+  });
+
+  it("should warn about unsupported utilities in development", () => {
+    const consoleSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const originalEnv = process.env.NODE_ENV;
+    process.env.NODE_ENV = "development";
+
+    parsePlaceholderClass("font-bold");
+    expect(consoleSpy).toHaveBeenCalledWith(
+      expect.stringContaining("Only text color utilities are supported in placeholder: modifier"),
+    );
+
+    parsePlaceholderClass("text-lg");
+    expect(consoleSpy).toHaveBeenCalledWith(
+      expect.stringContaining("Only text color utilities are supported in placeholder: modifier"),
+    );
+
+    process.env.NODE_ENV = originalEnv;
+    consoleSpy.mockRestore();
+  });
+
+  it("should not warn in production", () => {
+    const consoleSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const originalEnv = process.env.NODE_ENV;
+    process.env.NODE_ENV = "production";
+
+    parsePlaceholderClass("font-bold");
+    expect(consoleSpy).not.toHaveBeenCalled();
+
+    process.env.NODE_ENV = originalEnv;
+    consoleSpy.mockRestore();
+  });
+
+  it("should return null for invalid color values", () => {
+    expect(parsePlaceholderClass("text-invalid-color")).toBeNull();
+    expect(parsePlaceholderClass("text-[invalid]")).toBeNull();
+  });
+});
+
+describe("parsePlaceholderClasses", () => {
+  it("should parse multiple color classes (last wins)", () => {
+    expect(parsePlaceholderClasses("text-red-500 text-blue-500")).toBe("#2b7fff"); // blue-500
+    expect(parsePlaceholderClasses("text-gray-400 text-green-500")).toBe("#00c950"); // green-500
+  });
+
+  it("should ignore non-color classes and return last valid color", () => {
+    expect(parsePlaceholderClasses("text-red-500 font-bold text-blue-500")).toBe("#2b7fff");
+    expect(parsePlaceholderClasses("font-bold text-red-500 text-lg")).toBe("#fb2c36");
+  });
+
+  it("should return null if no valid colors found", () => {
+    expect(parsePlaceholderClasses("font-bold italic text-lg")).toBeNull();
+    expect(parsePlaceholderClasses("")).toBeNull();
+  });
+
+  it("should handle opacity modifiers", () => {
+    // Note: opacity conversion uppercases hex values
+    expect(parsePlaceholderClasses("text-red-500/50")).toBe("#FB2C3680");
+    expect(parsePlaceholderClasses("text-red-500 text-blue-500/75")).toBe("#2B7FFFBF");
+  });
+
+  it("should work with custom colors", () => {
+    const customColors = { "brand-primary": "#123456" };
+    expect(parsePlaceholderClasses("text-red-500 text-brand-primary", customColors)).toBe("#123456");
+  });
+});

package/src/parser/placeholder.ts

@@ -0,0 +1,78 @@
+/**
+ * Placeholder text color utilities (placeholder:text-{color})
+ *
+ * React Native only supports styling the COLOR of placeholder text via placeholderTextColor prop.
+ * Other text styling properties (font-size, font-weight, etc.) are not supported.
+ */
+
+import { parseColor } from "./colors.js";
+
+/**
+ * Parse placeholder modifier classes to extract color
+ *
+ * Only text-{color} classes are supported inside placeholder: modifier.
+ * Other utilities (font-*, text-lg, etc.) will log warnings.
+ *
+ * @param cls - Class name inside placeholder: modifier (e.g., "text-red-500")
+ * @param customColors - Optional custom color palette from tailwind.config
+ * @returns Color string (hex with optional alpha) or null if invalid
+ *
+ * @example
+ * parsePlaceholderClass("text-red-500") // "#ef4444"
+ * parsePlaceholderClass("text-red-500/50", {}) // "#ef444480"
+ * parsePlaceholderClass("text-brand-primary", { "brand-primary": "#123456" }) // "#123456"
+ * parsePlaceholderClass("font-bold") // null (+ warning)
+ */
+export function parsePlaceholderClass(cls: string, customColors?: Record<string, string>): string | null {
+  // Check if it's a text color class
+  if (!cls.startsWith("text-")) {
+    // Warn about unsupported utilities
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `[react-native-tailwind] Only text color utilities are supported in placeholder: modifier. ` +
+          `Class "${cls}" will be ignored. React Native only supports placeholderTextColor prop.`,
+      );
+    }
+    return null;
+  }
+
+  // Parse as color using existing color parser
+  // This handles text-red-500, text-red-500/50, text-[#ff0000], etc.
+  const styleObject = parseColor(cls, customColors);
+
+  if (!styleObject?.color) {
+    return null;
+  }
+
+  // Return the color value
+  return styleObject.color as string;
+}
+
+/**
+ * Parse multiple placeholder classes and return the last valid color
+ * (Later classes override earlier ones, matching CSS cascade behavior)
+ *
+ * @param classes - Space-separated class names
+ * @param customColors - Optional custom color palette
+ * @returns Color string or null
+ *
+ * @example
+ * parsePlaceholderClasses("text-red-500 text-blue-500") // "#3b82f6" (blue wins)
+ * parsePlaceholderClasses("text-red-500 font-bold") // "#ef4444" (ignores font-bold)
+ */
+export function parsePlaceholderClasses(
+  classes: string,
+  customColors?: Record<string, string>,
+): string | null {
+  const classList = classes.trim().split(/\s+/).filter(Boolean);
+  let finalColor: string | null = null;
+
+  for (const cls of classList) {
+    const color = parsePlaceholderClass(cls, customColors);
+    if (color) {
+      finalColor = color; // Later colors override earlier ones
+    }
+  }
+
+  return finalColor;
+}

package/src/parser/typography.test.ts

@@ -118,6 +118,17 @@ describe("parseTypography - line height", () => {
     expect(parseTypography("leading-loose")).toEqual({ lineHeight: 32 });
   });
 
+  it("should parse line height with numeric scale", () => {
+    expect(parseTypography("leading-3")).toEqual({ lineHeight: 12 });
+    expect(parseTypography("leading-4")).toEqual({ lineHeight: 16 });
+    expect(parseTypography("leading-5")).toEqual({ lineHeight: 20 });
+    expect(parseTypography("leading-6")).toEqual({ lineHeight: 24 });
+    expect(parseTypography("leading-7")).toEqual({ lineHeight: 28 });
+    expect(parseTypography("leading-8")).toEqual({ lineHeight: 32 });
+    expect(parseTypography("leading-9")).toEqual({ lineHeight: 36 });
+    expect(parseTypography("leading-10")).toEqual({ lineHeight: 40 });
+  });
+
   it("should parse line height with arbitrary pixel values", () => {
     expect(parseTypography("leading-[24px]")).toEqual({ lineHeight: 24 });
     expect(parseTypography("leading-[24]")).toEqual({ lineHeight: 24 });

package/src/parser/typography.ts

@@ -80,7 +80,19 @@ const TEXT_TRANSFORM_MAP: Record<string, StyleObject> = {
   "normal-case": { textTransform: "none" },
 };
 
-// Line height utilities
+// Line height scale (numeric)
+export const LINE_HEIGHT_SCALE: Record<string, number> = {
+  3: 12,
+  4: 16,
+  5: 20,
+  6: 24,
+  7: 28,
+  8: 32,
+  9: 36,
+  10: 40,
+};
+
+// Line height utilities (named)
 const LINE_HEIGHT_MAP: Record<string, StyleObject> = {
   "leading-none": { lineHeight: 16 },
   "leading-tight": { lineHeight: 20 },
@@ -169,7 +181,7 @@ export function parseTypography(cls: string): StyleObject | null {
     }
   }
 
-  // Line height: leading-normal, leading-[24px], etc.
+  // Line height: leading-normal, leading-6, leading-[24px], etc.
   if (cls.startsWith("leading-")) {
     const heightKey = cls.substring(8);
 
@@ -178,6 +190,12 @@ export function parseTypography(cls: string): StyleObject | null {
     if (arbitraryValue !== null) {
       return { lineHeight: arbitraryValue };
     }
+
+    // Try numeric scale (leading-3, leading-6, etc.)
+    const lineHeight = LINE_HEIGHT_SCALE[heightKey];
+    if (lineHeight !== undefined) {
+      return { lineHeight };
+    }
   }
 
   // Try each lookup table in order

package/src/runtime.ts

@@ -1,23 +1,8 @@
-import type { ImageStyle, TextStyle, ViewStyle } from "react-native";
 import { parseClassName } from "./parser/index.js";
+import type { NativeStyle, TwStyle } from "./types/runtime.js";
 import { flattenColors } from "./utils/flattenColors.js";
 import { hasModifiers, splitModifierClasses } from "./utils/modifiers.js";
 
-/**
- * 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;
-};
-
 /**
  * Runtime configuration type matching Tailwind config structure
  */

package/src/stubs/tw.ts

@@ -7,22 +7,7 @@
  * 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;
-};
+import type { NativeStyle, TwStyle } from "../types/runtime.js";
 
 /**
  * Compile-time Tailwind CSS template tag (transformed by Babel plugin)

package/src/{types.ts → types/core.ts}

@@ -2,10 +2,6 @@
  * Core type definitions
  */
 
-import type { ImageStyle, TextStyle, ViewStyle } from "react-native";
-
-export type RNStyle = ViewStyle | TextStyle | ImageStyle;
-
 // Transform types for React Native
 export type TransformStyle =
   | { scale?: number }

package/src/types/index.ts

@@ -0,0 +1,2 @@
+export * from "./core";
+export * from "./util";

package/src/types/runtime.ts

@@ -0,0 +1,17 @@
+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;
+  placeholderStyle?: TextStyle;
+};

package/src/types/util.ts

@@ -0,0 +1 @@
+export type Simplify<T> = { [KeyType in keyof T]: T[KeyType] } & {};