@mgcrea/react-native-tailwind 0.12.1 → 0.14.0

package/src/babel/utils/windowDimensionsProcessing.ts

@@ -0,0 +1,121 @@
+/**
+ * Utility functions for processing window dimensions (w-screen, h-screen)
+ */
+
+import type * as BabelTypes from "@babel/types";
+import { RUNTIME_DIMENSIONS_MARKER } from "../../config/markers.js";
+import type { StyleObject } from "../../types/core.js";
+
+/**
+ * Plugin state interface (subset needed for window dimensions processing)
+ */
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+export interface WindowDimensionsProcessingState {
+  needsWindowDimensionsImport: boolean;
+  windowDimensionsVariableName: string;
+}
+
+/**
+ * Check if a style object contains runtime dimension markers
+ *
+ * @param styleObject - Style object to check
+ * @returns true if the style object contains runtime dimension markers
+ *
+ * @example
+ * hasRuntimeDimensions({ width: "{{RUNTIME:dimensions.width}}" }) // true
+ * hasRuntimeDimensions({ width: 100 }) // false
+ */
+export function hasRuntimeDimensions(styleObject: StyleObject): boolean {
+  return Object.values(styleObject).some(
+    (value) => typeof value === "string" && value.startsWith(RUNTIME_DIMENSIONS_MARKER),
+  );
+}
+
+/**
+ * Create an inline style object with runtime dimension access
+ *
+ * Converts runtime markers like "{{RUNTIME:dimensions.width}}" to
+ * AST nodes like: { width: _twDimensions.width }
+ *
+ * @param styleObject - Style object with runtime markers
+ * @param state - Plugin state
+ * @param t - Babel types
+ * @returns AST object expression for inline style
+ *
+ * @example
+ * Input: { width: "{{RUNTIME:dimensions.width}}", height: "{{RUNTIME:dimensions.height}}" }
+ * Output: { width: _twDimensions.width, height: _twDimensions.height }
+ */
+export function createRuntimeDimensionObject(
+  styleObject: StyleObject,
+  state: WindowDimensionsProcessingState,
+  t: typeof BabelTypes,
+): BabelTypes.ObjectExpression {
+  // Mark that we need useWindowDimensions import and hook injection
+  state.needsWindowDimensionsImport = true;
+
+  const properties: BabelTypes.ObjectProperty[] = [];
+
+  for (const [key, value] of Object.entries(styleObject)) {
+    let valueNode: BabelTypes.Expression;
+
+    if (typeof value === "string" && value.startsWith(RUNTIME_DIMENSIONS_MARKER)) {
+      // Extract property name: "{{RUNTIME:dimensions.width}}" -> "width"
+      const match = value.match(/dimensions\.(\w+)/);
+      const prop = match?.[1];
+
+      if (prop) {
+        // Generate: _twDimensions.width or _twDimensions.height
+        valueNode = t.memberExpression(t.identifier(state.windowDimensionsVariableName), t.identifier(prop));
+      } else {
+        // Fallback: shouldn't happen, but handle gracefully
+        valueNode = t.stringLiteral(value);
+      }
+    } else if (typeof value === "number") {
+      valueNode = t.numericLiteral(value);
+    } else if (typeof value === "string") {
+      valueNode = t.stringLiteral(value);
+    } else if (typeof value === "object" && value !== null) {
+      // Handle nested objects (e.g., transform arrays)
+      valueNode = t.valueToNode(value);
+    } else {
+      // Handle other types
+      valueNode = t.valueToNode(value);
+    }
+
+    properties.push(t.objectProperty(t.identifier(key), valueNode));
+  }
+
+  return t.objectExpression(properties);
+}
+
+/**
+ * Split a style object into static and runtime parts
+ *
+ * @param styleObject - Style object to split
+ * @returns Object with static and runtime style objects
+ *
+ * @example
+ * Input: { width: "{{RUNTIME:dimensions.width}}", padding: 16, backgroundColor: "#fff" }
+ * Output: {
+ *   static: { padding: 16, backgroundColor: "#fff" },
+ *   runtime: { width: "{{RUNTIME:dimensions.width}}" }
+ * }
+ */
+export function splitStaticAndRuntimeStyles(styleObject: StyleObject): {
+  static: StyleObject;
+  runtime: StyleObject;
+} {
+  const staticStyles: StyleObject = {};
+  const runtimeStyles: StyleObject = {};
+
+  for (const [key, value] of Object.entries(styleObject)) {
+    if (typeof value === "string" && value.startsWith(RUNTIME_DIMENSIONS_MARKER)) {
+      runtimeStyles[key] = value;
+    } else {
+      staticStyles[key] = value;
+    }
+  }
+
+  return { static: staticStyles, runtime: runtimeStyles };
+}

package/src/components/TouchableOpacity.tsx

@@ -0,0 +1,71 @@
+/**
+ * Enhanced TouchableOpacity component with modifier support
+ * Adds active state support for active: modifier via onPressIn/onPressOut
+ */
+
+import type { ComponentRef } from "react";
+import { forwardRef, useCallback, useState } from "react";
+import {
+  TouchableOpacity as RNTouchableOpacity,
+  type TouchableOpacityProps as RNTouchableOpacityProps,
+  type StyleProp,
+  type ViewStyle,
+} from "react-native";
+
+// TouchableOpacity state for style function
+type TouchableOpacityState = { active: boolean; disabled: boolean | null | undefined };
+
+export type TouchableOpacityProps = Omit<RNTouchableOpacityProps, "style"> & {
+  /**
+   * Style can be a static style object/array or a function that receives TouchableOpacity state
+   */
+  style?: StyleProp<ViewStyle> | ((state: TouchableOpacityState) => StyleProp<ViewStyle>);
+  className?: string; // compile-time only
+};
+
+/**
+ * Enhanced TouchableOpacity that supports active: and disabled: modifiers
+ *
+ * @example
+ * <TouchableOpacity
+ *   disabled={isLoading}
+ *   className="bg-blue-500 active:bg-blue-700 disabled:bg-gray-400"
+ * >
+ *   <Text>Submit</Text>
+ * </TouchableOpacity>
+ */
+export const TouchableOpacity = forwardRef<ComponentRef<typeof RNTouchableOpacity>, TouchableOpacityProps>(
+  function TouchableOpacity({ style, disabled = false, onPressIn, onPressOut, ...props }, ref) {
+    const [isActive, setIsActive] = useState(false);
+
+    const handlePressIn = useCallback(
+      (event: Parameters<NonNullable<RNTouchableOpacityProps["onPressIn"]>>[0]) => {
+        setIsActive(true);
+        onPressIn?.(event);
+      },
+      [onPressIn],
+    );
+
+    const handlePressOut = useCallback(
+      (event: Parameters<NonNullable<RNTouchableOpacityProps["onPressOut"]>>[0]) => {
+        setIsActive(false);
+        onPressOut?.(event);
+      },
+      [onPressOut],
+    );
+
+    // Inject active and disabled state into style function context
+    const resolvedStyle = typeof style === "function" ? style({ active: isActive, disabled }) : style;
+
+    return (
+      <RNTouchableOpacity
+        ref={ref}
+        disabled={disabled}
+        style={resolvedStyle}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        {...props}
+      />
+    );
+  },
+);

package/src/components/index.ts

@@ -0,0 +1,3 @@
+export * from "./Pressable";
+export * from "./TextInput";
+export * from "./TouchableOpacity";

package/src/config/markers.ts

@@ -0,0 +1,5 @@
+/**
+ * Runtime marker prefix for window dimension values
+ * Used to mark style values that need runtime evaluation via useWindowDimensions()
+ */
+export const RUNTIME_DIMENSIONS_MARKER = "{{RUNTIME:dimensions.";

package/src/index.ts

@@ -15,6 +15,9 @@ export { generateStyleKey } from "./utils/styleKey";
 export type { StyleObject } from "./types/core";
 export type { NativeStyle, TwStyle } from "./types/runtime";
 
+// Re-export colors
+export { TAILWIND_COLORS } from "./config/tailwind";
+
 // Re-export individual parsers for advanced usage
 export {
   parseAspectRatio,
@@ -39,8 +42,4 @@ export { SPACING_SCALE } from "./parser/spacing";
 export { FONT_SIZES, LETTER_SPACING_SCALE } from "./parser/typography";
 
 // Re-export enhanced components with modifier support
-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";
+export * from "./components";

package/src/parser/borders.test.ts

@@ -327,3 +327,165 @@ describe("parseBorder - comprehensive coverage", () => {
     });
   });
 });
+
+describe("parseBorder - color pattern detection", () => {
+  it("should return null for directional border colors with preset values", () => {
+    // These should be handled by parseColor
+    expect(parseBorder("border-t-red-500")).toBeNull();
+    expect(parseBorder("border-r-blue-500")).toBeNull();
+    expect(parseBorder("border-b-green-500")).toBeNull();
+    expect(parseBorder("border-l-yellow-500")).toBeNull();
+  });
+
+  it("should return null for directional border colors with basic values", () => {
+    // These should be handled by parseColor
+    expect(parseBorder("border-t-white")).toBeNull();
+    expect(parseBorder("border-r-black")).toBeNull();
+    expect(parseBorder("border-b-transparent")).toBeNull();
+    expect(parseBorder("border-l-white")).toBeNull();
+  });
+
+  it("should return null for directional border colors with arbitrary hex values", () => {
+    // These should be handled by parseColor
+    expect(parseBorder("border-t-[#ff0000]")).toBeNull();
+    expect(parseBorder("border-r-[#3B82F6]")).toBeNull();
+    expect(parseBorder("border-b-[#abc]")).toBeNull();
+    expect(parseBorder("border-l-[#00FF00AA]")).toBeNull();
+  });
+
+  it("should return null for directional border colors with opacity", () => {
+    // These should be handled by parseColor
+    expect(parseBorder("border-t-red-500/50")).toBeNull();
+    expect(parseBorder("border-r-blue-500/80")).toBeNull();
+    expect(parseBorder("border-b-[#ff0000]/60")).toBeNull();
+    expect(parseBorder("border-l-black/25")).toBeNull();
+  });
+
+  it("should return null for directional border colors with custom colors", () => {
+    // These should be handled by parseColor (assuming brand-primary is a custom color)
+    expect(parseBorder("border-t-brand-primary")).toBeNull();
+    expect(parseBorder("border-r-accent")).toBeNull();
+    expect(parseBorder("border-b-brand-secondary")).toBeNull();
+    expect(parseBorder("border-l-custom")).toBeNull();
+  });
+
+  it("should still handle directional border widths correctly", () => {
+    // These should NOT be detected as color patterns
+    expect(parseBorder("border-t-2")).toEqual({ borderTopWidth: 2 });
+    expect(parseBorder("border-r-4")).toEqual({ borderRightWidth: 4 });
+    expect(parseBorder("border-b-8")).toEqual({ borderBottomWidth: 8 });
+    expect(parseBorder("border-l-0")).toEqual({ borderLeftWidth: 0 });
+  });
+
+  it("should still handle directional border width arbitrary values", () => {
+    // These should NOT be detected as color patterns
+    expect(parseBorder("border-t-[3px]")).toEqual({ borderTopWidth: 3 });
+    expect(parseBorder("border-r-[5px]")).toEqual({ borderRightWidth: 5 });
+    expect(parseBorder("border-b-[10]")).toEqual({ borderBottomWidth: 10 });
+    expect(parseBorder("border-l-[8px]")).toEqual({ borderLeftWidth: 8 });
+  });
+});
+
+describe("parseBorder - logical border width (RTL-aware)", () => {
+  it("should parse border start width", () => {
+    expect(parseBorder("border-s")).toEqual({ borderStartWidth: 1 });
+    expect(parseBorder("border-s-0")).toEqual({ borderStartWidth: 0 });
+    expect(parseBorder("border-s-2")).toEqual({ borderStartWidth: 2 });
+    expect(parseBorder("border-s-4")).toEqual({ borderStartWidth: 4 });
+    expect(parseBorder("border-s-8")).toEqual({ borderStartWidth: 8 });
+  });
+
+  it("should parse border end width", () => {
+    expect(parseBorder("border-e")).toEqual({ borderEndWidth: 1 });
+    expect(parseBorder("border-e-0")).toEqual({ borderEndWidth: 0 });
+    expect(parseBorder("border-e-2")).toEqual({ borderEndWidth: 2 });
+    expect(parseBorder("border-e-4")).toEqual({ borderEndWidth: 4 });
+    expect(parseBorder("border-e-8")).toEqual({ borderEndWidth: 8 });
+  });
+
+  it("should parse border start/end with arbitrary values", () => {
+    expect(parseBorder("border-s-[3px]")).toEqual({ borderStartWidth: 3 });
+    expect(parseBorder("border-s-[5]")).toEqual({ borderStartWidth: 5 });
+    expect(parseBorder("border-e-[3px]")).toEqual({ borderEndWidth: 3 });
+    expect(parseBorder("border-e-[5]")).toEqual({ borderEndWidth: 5 });
+  });
+});
+
+describe("parseBorder - logical border radius sides (RTL-aware)", () => {
+  it("should parse rounded start (both top and bottom start corners)", () => {
+    expect(parseBorder("rounded-s")).toEqual({
+      borderTopStartRadius: 4,
+      borderBottomStartRadius: 4,
+    });
+    expect(parseBorder("rounded-s-lg")).toEqual({
+      borderTopStartRadius: 8,
+      borderBottomStartRadius: 8,
+    });
+    expect(parseBorder("rounded-s-[12px]")).toEqual({
+      borderTopStartRadius: 12,
+      borderBottomStartRadius: 12,
+    });
+  });
+
+  it("should parse rounded end (both top and bottom end corners)", () => {
+    expect(parseBorder("rounded-e")).toEqual({
+      borderTopEndRadius: 4,
+      borderBottomEndRadius: 4,
+    });
+    expect(parseBorder("rounded-e-lg")).toEqual({
+      borderTopEndRadius: 8,
+      borderBottomEndRadius: 8,
+    });
+    expect(parseBorder("rounded-e-[12px]")).toEqual({
+      borderTopEndRadius: 12,
+      borderBottomEndRadius: 12,
+    });
+  });
+});
+
+describe("parseBorder - logical border radius corners (RTL-aware)", () => {
+  it("should parse rounded start-start (top-start corner)", () => {
+    expect(parseBorder("rounded-ss")).toEqual({ borderTopStartRadius: 4 });
+    expect(parseBorder("rounded-ss-lg")).toEqual({ borderTopStartRadius: 8 });
+    expect(parseBorder("rounded-ss-[12px]")).toEqual({
+      borderTopStartRadius: 12,
+    });
+  });
+
+  it("should parse rounded start-end (top-end corner)", () => {
+    expect(parseBorder("rounded-se")).toEqual({ borderTopEndRadius: 4 });
+    expect(parseBorder("rounded-se-lg")).toEqual({ borderTopEndRadius: 8 });
+    expect(parseBorder("rounded-se-[12px]")).toEqual({
+      borderTopEndRadius: 12,
+    });
+  });
+
+  it("should parse rounded end-start (bottom-start corner)", () => {
+    expect(parseBorder("rounded-es")).toEqual({ borderBottomStartRadius: 4 });
+    expect(parseBorder("rounded-es-lg")).toEqual({ borderBottomStartRadius: 8 });
+    expect(parseBorder("rounded-es-[12px]")).toEqual({
+      borderBottomStartRadius: 12,
+    });
+  });
+
+  it("should parse rounded end-end (bottom-end corner)", () => {
+    expect(parseBorder("rounded-ee")).toEqual({ borderBottomEndRadius: 4 });
+    expect(parseBorder("rounded-ee-lg")).toEqual({ borderBottomEndRadius: 8 });
+    expect(parseBorder("rounded-ee-[12px]")).toEqual({
+      borderBottomEndRadius: 12,
+    });
+  });
+
+  it("should parse all logical corners with different sizes", () => {
+    // Using full scale to verify all sizes work
+    expect(parseBorder("rounded-ss-none")).toEqual({ borderTopStartRadius: 0 });
+    expect(parseBorder("rounded-se-sm")).toEqual({ borderTopEndRadius: 2 });
+    expect(parseBorder("rounded-es-md")).toEqual({ borderBottomStartRadius: 6 });
+    expect(parseBorder("rounded-ee-xl")).toEqual({ borderBottomEndRadius: 12 });
+    expect(parseBorder("rounded-ss-2xl")).toEqual({ borderTopStartRadius: 16 });
+    expect(parseBorder("rounded-se-3xl")).toEqual({ borderTopEndRadius: 24 });
+    expect(parseBorder("rounded-es-full")).toEqual({
+      borderBottomStartRadius: 9999,
+    });
+  });
+});

package/src/parser/borders.ts

@@ -3,6 +3,7 @@
  */
 
 import type { StyleObject } from "../types";
+import { parseColor } from "./colors";
 
 // Border width scale
 export const BORDER_WIDTH_SCALE: Record<string, number> = {
@@ -34,10 +35,12 @@ const BORDER_WIDTH_PROP_MAP: Record<string, string> = {
   r: "borderRightWidth",
   b: "borderBottomWidth",
   l: "borderLeftWidth",
+  s: "borderStartWidth",
+  e: "borderEndWidth",
 };
 
 /**
- * Property mapping for border radius corners
+ * Property mapping for border radius corners (physical)
  */
 const BORDER_RADIUS_CORNER_MAP: Record<string, string> = {
   tl: "borderTopLeftRadius",
@@ -46,6 +49,18 @@ const BORDER_RADIUS_CORNER_MAP: Record<string, string> = {
   br: "borderBottomRightRadius",
 };
 
+/**
+ * Property mapping for border radius corners (logical/RTL-aware)
+ * ss = start-start (top-start), se = start-end (top-end)
+ * es = end-start (bottom-start), ee = end-end (bottom-end)
+ */
+const BORDER_RADIUS_LOGICAL_CORNER_MAP: Record<string, string> = {
+  ss: "borderTopStartRadius",
+  se: "borderTopEndRadius",
+  es: "borderBottomStartRadius",
+  ee: "borderBottomEndRadius",
+};
+
 /**
  * Property mapping for border radius sides (returns array of properties)
  */
@@ -54,6 +69,8 @@ const BORDER_RADIUS_SIDE_MAP: Record<string, string[]> = {
   r: ["borderTopRightRadius", "borderBottomRightRadius"],
   b: ["borderBottomLeftRadius", "borderBottomRightRadius"],
   l: ["borderTopLeftRadius", "borderBottomLeftRadius"],
+  s: ["borderTopStartRadius", "borderBottomStartRadius"],
+  e: ["borderTopEndRadius", "borderBottomEndRadius"],
 };
 
 /**
@@ -108,8 +125,10 @@ function parseArbitraryBorderRadius(value: string): number | null {
 
 /**
  * Parse border classes
+ * @param cls - The class name to parse
+ * @param customColors - Optional custom colors from tailwind.config (used to detect color patterns)
  */
-export function parseBorder(cls: string): StyleObject | null {
+export function parseBorder(cls: string, customColors?: Record<string, string>): StyleObject | null {
   // Border style (must come before parseBorderWidth)
   if (cls === "border-solid") return { borderStyle: "solid" };
   if (cls === "border-dotted") return { borderStyle: "dotted" };
@@ -117,7 +136,7 @@ export function parseBorder(cls: string): StyleObject | null {
 
   // Border width (border-0, border-t, border-[8px], etc.)
   if (cls.startsWith("border-")) {
-    return parseBorderWidth(cls);
+    return parseBorderWidth(cls, customColors);
   }
 
   if (cls === "border") {
@@ -134,14 +153,27 @@ export function parseBorder(cls: string): StyleObject | null {
 
 /**
  * Parse border width classes
+ * @param cls - The class name to parse
+ * @param customColors - Optional custom colors (passed to parseColor for pattern detection)
  */
-function parseBorderWidth(cls: string): StyleObject | null {
-  // Directional borders: border-t, border-t-2, border-t-[8px]
-  const dirMatch = cls.match(/^border-([trbl])(?:-(.+))?$/);
+function parseBorderWidth(cls: string, customColors?: Record<string, string>): StyleObject | null {
+  // Directional borders: border-t, border-t-2, border-t-[8px], border-s, border-e (RTL-aware)
+  // Note: border-x and border-y are handled by parseColor for colors only
+  const dirMatch = cls.match(/^border-([trblse])(?:-(.+))?$/);
   if (dirMatch) {
     const dir = dirMatch[1];
     const valueStr = dirMatch[2] || ""; // empty string for border-t
 
+    // If it's a color pattern, let parseColor handle it
+    // Try to parse as color - if it succeeds, return null (let parseColor handle it)
+    // Note: We skip color check for s/e since React Native doesn't support borderStartColor/borderEndColor
+    if (valueStr && dir !== "s" && dir !== "e") {
+      const colorResult = parseColor(cls, customColors);
+      if (colorResult !== null) {
+        return null; // It's a color, let parseColor handle it
+      }
+    }
+
     // Try arbitrary value first (if it starts with [)
     if (valueStr.startsWith("[")) {
       const arbitraryValue = parseArbitraryBorderWidth(valueStr);
@@ -205,7 +237,7 @@ function parseBorderRadius(cls: string): StyleObject | null {
     return null;
   }
 
-  // Specific corners: rounded-tl, rounded-tl-lg, rounded-tl-[8px]
+  // Specific physical corners: rounded-tl, rounded-tl-lg, rounded-tl-[8px]
   const cornerMatch = rest.match(/^(tl|tr|bl|br)(?:-(.+))?$/);
   if (cornerMatch) {
     const corner = cornerMatch[1];
@@ -229,8 +261,34 @@ function parseBorderRadius(cls: string): StyleObject | null {
     return null;
   }
 
-  // Sides: rounded-t, rounded-t-lg, rounded-t-[8px]
-  const sideMatch = rest.match(/^([trbl])(?:-(.+))?$/);
+  // Logical corners (RTL-aware): rounded-ss, rounded-se, rounded-es, rounded-ee
+  // ss = start-start (top-start), se = start-end (top-end)
+  // es = end-start (bottom-start), ee = end-end (bottom-end)
+  const logicalCornerMatch = rest.match(/^(ss|se|es|ee)(?:-(.+))?$/);
+  if (logicalCornerMatch) {
+    const corner = logicalCornerMatch[1];
+    const valueStr = logicalCornerMatch[2] || ""; // empty string for rounded-ss
+
+    // Try arbitrary value first
+    if (valueStr.startsWith("[")) {
+      const arbitraryValue = parseArbitraryBorderRadius(valueStr);
+      if (arbitraryValue !== null) {
+        return { [BORDER_RADIUS_LOGICAL_CORNER_MAP[corner]]: arbitraryValue };
+      }
+      return null;
+    }
+
+    // Try preset scale
+    const scaleValue = BORDER_RADIUS_SCALE[valueStr];
+    if (scaleValue !== undefined) {
+      return { [BORDER_RADIUS_LOGICAL_CORNER_MAP[corner]]: scaleValue };
+    }
+
+    return null;
+  }
+
+  // Sides: rounded-t, rounded-t-lg, rounded-t-[8px], rounded-s, rounded-e (RTL-aware)
+  const sideMatch = rest.match(/^([trblse])(?:-(.+))?$/);
   if (sideMatch) {
     const side = sideMatch[1];
     const valueStr = sideMatch[2] || ""; // empty string for rounded-t