@mgcrea/react-native-tailwind 0.11.1 → 0.12.1

package/src/parser/layout.ts

@@ -60,6 +60,31 @@ function parseArbitraryZIndex(value: string): number | null {
   return null;
 }
 
+/**
+ * Parse arbitrary grow/shrink value: [1.5], [2], [0.5], [.5]
+ * Returns number for valid non-negative values, null otherwise
+ */
+function parseArbitraryGrowShrink(value: string): number | null {
+  // Match: [1.5], [2], [0], [0.5], [.5] (non-negative decimals, optional leading digit)
+  const match = value.match(/^\[(\d+(?:\.\d+)?|\.\d+)\]$/);
+  if (match) {
+    return parseFloat(match[1]);
+  }
+
+  // Warn about invalid formats (negative values, unsupported formats)
+  if (value.startsWith("[") && value.endsWith("]")) {
+    /* v8 ignore next 5 */
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `[react-native-tailwind] Invalid arbitrary grow/shrink value: ${value}. Only non-negative numbers are supported (e.g., [1.5], [2], [0.5], [.5]).`,
+      );
+    }
+    return null;
+  }
+
+  return null;
+}
+
 // Display utilities
 const DISPLAY_MAP: Record<string, StyleObject> = {
   flex: { display: "flex" },
@@ -88,12 +113,17 @@ const FLEX_MAP: Record<string, StyleObject> = {
   "flex-none": { flex: 0 },
 };
 
-// Flex grow/shrink utilities
+// Flex grow/shrink utilities (includes CSS-style aliases)
 const GROW_SHRINK_MAP: Record<string, StyleObject> = {
   grow: { flexGrow: 1 },
   "grow-0": { flexGrow: 0 },
   shrink: { flexShrink: 1 },
   "shrink-0": { flexShrink: 0 },
+  // CSS-style aliases
+  "flex-grow": { flexGrow: 1 },
+  "flex-grow-0": { flexGrow: 0 },
+  "flex-shrink": { flexShrink: 1 },
+  "flex-shrink-0": { flexShrink: 0 },
 };
 
 // Justify content utilities
@@ -357,6 +387,30 @@ export function parseLayout(cls: string): StyleObject | null {
     }
   }
 
+  // Flex grow: grow-[1.5], flex-grow-[2], etc. (arbitrary values)
+  if (cls.startsWith("grow-") || cls.startsWith("flex-grow-")) {
+    const prefix = cls.startsWith("flex-grow-") ? "flex-grow-" : "grow-";
+    const growKey = cls.substring(prefix.length);
+
+    // Arbitrary values: grow-[1.5], flex-grow-[2]
+    const arbitraryGrow = parseArbitraryGrowShrink(growKey);
+    if (arbitraryGrow !== null) {
+      return { flexGrow: arbitraryGrow };
+    }
+  }
+
+  // Flex shrink: shrink-[0.5], flex-shrink-[1], etc. (arbitrary values)
+  if (cls.startsWith("shrink-") || cls.startsWith("flex-shrink-")) {
+    const prefix = cls.startsWith("flex-shrink-") ? "flex-shrink-" : "shrink-";
+    const shrinkKey = cls.substring(prefix.length);
+
+    // Arbitrary values: shrink-[0.5], flex-shrink-[1]
+    const arbitraryShrink = parseArbitraryGrowShrink(shrinkKey);
+    if (arbitraryShrink !== null) {
+      return { flexShrink: arbitraryShrink };
+    }
+  }
+
   // Try each lookup table in order
   return (
     DISPLAY_MAP[cls] ??

package/src/parser/spacing.test.ts

@@ -238,6 +238,68 @@ describe("parseSpacing - edge cases", () => {
   });
 });
 
+describe("parseSpacing - decimal arbitrary values", () => {
+  it("should parse margin with decimal arbitrary values", () => {
+    expect(parseSpacing("m-[4.5px]")).toEqual({ margin: 4.5 });
+    expect(parseSpacing("m-[4.5]")).toEqual({ margin: 4.5 });
+    expect(parseSpacing("m-[16.75px]")).toEqual({ margin: 16.75 });
+    expect(parseSpacing("m-[16.75]")).toEqual({ margin: 16.75 });
+    expect(parseSpacing("m-[100.25px]")).toEqual({ margin: 100.25 });
+    expect(parseSpacing("m-[0.5]")).toEqual({ margin: 0.5 });
+  });
+
+  it("should parse padding with decimal arbitrary values", () => {
+    expect(parseSpacing("p-[4.5px]")).toEqual({ padding: 4.5 });
+    expect(parseSpacing("p-[4.5]")).toEqual({ padding: 4.5 });
+    expect(parseSpacing("pl-[4.5px]")).toEqual({ paddingLeft: 4.5 });
+    expect(parseSpacing("pl-[4.5]")).toEqual({ paddingLeft: 4.5 });
+    expect(parseSpacing("pr-[16.75px]")).toEqual({ paddingRight: 16.75 });
+    expect(parseSpacing("pt-[10.5]")).toEqual({ paddingTop: 10.5 });
+    expect(parseSpacing("pb-[20.25px]")).toEqual({ paddingBottom: 20.25 });
+  });
+
+  it("should parse padding horizontal/vertical with decimal arbitrary values", () => {
+    expect(parseSpacing("px-[4.5px]")).toEqual({ paddingHorizontal: 4.5 });
+    expect(parseSpacing("py-[10.75]")).toEqual({ paddingVertical: 10.75 });
+  });
+
+  it("should parse gap with decimal arbitrary values", () => {
+    expect(parseSpacing("gap-[4.5px]")).toEqual({ gap: 4.5 });
+    expect(parseSpacing("gap-[4.5]")).toEqual({ gap: 4.5 });
+    expect(parseSpacing("gap-[16.75px]")).toEqual({ gap: 16.75 });
+    expect(parseSpacing("gap-[0.5]")).toEqual({ gap: 0.5 });
+  });
+
+  it("should parse negative margin with decimal arbitrary values", () => {
+    expect(parseSpacing("-m-[4.5px]")).toEqual({ margin: -4.5 });
+    expect(parseSpacing("-m-[4.5]")).toEqual({ margin: -4.5 });
+    expect(parseSpacing("-m-[10.5px]")).toEqual({ margin: -10.5 });
+    expect(parseSpacing("-mt-[16.75px]")).toEqual({ marginTop: -16.75 });
+    expect(parseSpacing("-ml-[8.25]")).toEqual({ marginLeft: -8.25 });
+    expect(parseSpacing("-mx-[12.5px]")).toEqual({ marginHorizontal: -12.5 });
+    expect(parseSpacing("-my-[20.75]")).toEqual({ marginVertical: -20.75 });
+  });
+
+  it("should parse margin directional with decimal arbitrary values", () => {
+    expect(parseSpacing("mt-[4.5px]")).toEqual({ marginTop: 4.5 });
+    expect(parseSpacing("mr-[8.25]")).toEqual({ marginRight: 8.25 });
+    expect(parseSpacing("mb-[16.75px]")).toEqual({ marginBottom: 16.75 });
+    expect(parseSpacing("ml-[12.5]")).toEqual({ marginLeft: 12.5 });
+  });
+
+  it("should parse margin horizontal/vertical with decimal arbitrary values", () => {
+    expect(parseSpacing("mx-[4.5px]")).toEqual({ marginHorizontal: 4.5 });
+    expect(parseSpacing("my-[10.75]")).toEqual({ marginVertical: 10.75 });
+  });
+
+  it("should handle edge case decimal values", () => {
+    expect(parseSpacing("m-[0.1px]")).toEqual({ margin: 0.1 });
+    expect(parseSpacing("p-[0.001]")).toEqual({ padding: 0.001 });
+    expect(parseSpacing("gap-[999.999px]")).toEqual({ gap: 999.999 });
+    expect(parseSpacing("-m-[0.5]")).toEqual({ margin: -0.5 });
+  });
+});
+
 describe("parseSpacing - comprehensive coverage", () => {
   it("should parse all margin directions with same value", () => {
     const value = 16;

package/src/parser/spacing.ts

@@ -43,14 +43,14 @@ export const SPACING_SCALE: Record<string, number> = {
 };
 
 /**
- * Parse arbitrary spacing value: [16px], [20]
- * Returns number for px values, null for unsupported formats
+ * Parse arbitrary spacing value: [16px], [20], [4.5px], [16.75]
+ * Returns number for px values (including decimals), null for unsupported formats
  */
 function parseArbitrarySpacing(value: string): number | null {
-  // Match: [16px] or [16] (pixels only)
-  const pxMatch = value.match(/^\[(\d+)(?:px)?\]$/);
+  // Match: [16px], [16], [4.5px], [4.5] (pixels, including decimals)
+  const pxMatch = value.match(/^\[(-?\d+(?:\.\d+)?)(?:px)?\]$/);
   if (pxMatch) {
-    return parseInt(pxMatch[1], 10);
+    return parseFloat(pxMatch[1]);
   }
 
   // Warn about unsupported formats
@@ -58,7 +58,7 @@ function parseArbitrarySpacing(value: string): number | null {
     /* v8 ignore next 5 */
     if (process.env.NODE_ENV !== "production") {
       console.warn(
-        `[react-native-tailwind] Unsupported arbitrary spacing value: ${value}. Only px values are supported (e.g., [16px] or [16]).`,
+        `[react-native-tailwind] Unsupported arbitrary spacing value: ${value}. Only px values are supported (e.g., [16px], [16], [4.5px], [4.5]).`,
       );
     }
     return null;
@@ -69,7 +69,7 @@ function parseArbitrarySpacing(value: string): number | null {
 
 /**
  * Parse spacing classes (margin, padding, gap)
- * Examples: m-4, mx-2, mt-8, p-4, px-2, pt-8, gap-4, m-[16px], -m-4, -mt-[10px]
+ * Examples: m-4, mx-2, mt-8, p-4, px-2, pt-8, gap-4, m-[16px], pl-[4.5px], -m-4, -mt-[10px]
  */
 export function parseSpacing(cls: string): StyleObject | null {
   // Margin: m-4, mx-2, mt-8, m-[16px], -m-4, -mt-2, etc.

package/src/parser/typography.test.ts

@@ -39,6 +39,20 @@ describe("parseTypography - font size", () => {
     expect(parseTypography("text-[22]")).toEqual({ fontSize: 22 });
     expect(parseTypography("text-[100px]")).toEqual({ fontSize: 100 });
   });
+
+  it("should parse font size with decimal arbitrary values", () => {
+    expect(parseTypography("text-[13.5px]")).toEqual({ fontSize: 13.5 });
+    expect(parseTypography("text-[13.5]")).toEqual({ fontSize: 13.5 });
+    expect(parseTypography("text-[18.75px]")).toEqual({ fontSize: 18.75 });
+    expect(parseTypography("text-[18.75]")).toEqual({ fontSize: 18.75 });
+    expect(parseTypography("text-[22.5]")).toEqual({ fontSize: 22.5 });
+  });
+
+  it("should parse font size with Tailwind shorthand decimals", () => {
+    expect(parseTypography("text-[.5]")).toEqual({ fontSize: 0.5 });
+    expect(parseTypography("text-[.75px]")).toEqual({ fontSize: 0.75 });
+    expect(parseTypography("text-[.5px]")).toEqual({ fontSize: 0.5 });
+  });
 });
 
 describe("parseTypography - font family", () => {
@@ -136,6 +150,20 @@ describe("parseTypography - line height", () => {
     expect(parseTypography("leading-[30]")).toEqual({ lineHeight: 30 });
     expect(parseTypography("leading-[50px]")).toEqual({ lineHeight: 50 });
   });
+
+  it("should parse line height with decimal arbitrary values", () => {
+    expect(parseTypography("leading-[21.5px]")).toEqual({ lineHeight: 21.5 });
+    expect(parseTypography("leading-[21.5]")).toEqual({ lineHeight: 21.5 });
+    expect(parseTypography("leading-[28.75px]")).toEqual({ lineHeight: 28.75 });
+    expect(parseTypography("leading-[28.75]")).toEqual({ lineHeight: 28.75 });
+    expect(parseTypography("leading-[32.5]")).toEqual({ lineHeight: 32.5 });
+  });
+
+  it("should parse line height with Tailwind shorthand decimals", () => {
+    expect(parseTypography("leading-[.5]")).toEqual({ lineHeight: 0.5 });
+    expect(parseTypography("leading-[.75px]")).toEqual({ lineHeight: 0.75 });
+    expect(parseTypography("leading-[.5px]")).toEqual({ lineHeight: 0.5 });
+  });
 });
 
 describe("parseTypography - letter spacing", () => {
@@ -149,6 +177,80 @@ describe("parseTypography - letter spacing", () => {
     expect(parseTypography("tracking-wider")).toEqual({ letterSpacing: 0.8 });
     expect(parseTypography("tracking-widest")).toEqual({ letterSpacing: 1.6 });
   });
+
+  it("should parse letter spacing with arbitrary values", () => {
+    expect(parseTypography("tracking-[0.5px]")).toEqual({ letterSpacing: 0.5 });
+    expect(parseTypography("tracking-[0.5]")).toEqual({ letterSpacing: 0.5 });
+    expect(parseTypography("tracking-[0.3]")).toEqual({ letterSpacing: 0.3 });
+    expect(parseTypography("tracking-[1.2px]")).toEqual({ letterSpacing: 1.2 });
+    expect(parseTypography("tracking-[2]")).toEqual({ letterSpacing: 2 });
+  });
+
+  it("should parse letter spacing with Tailwind shorthand decimals", () => {
+    expect(parseTypography("tracking-[.5]")).toEqual({ letterSpacing: 0.5 });
+    expect(parseTypography("tracking-[.3px]")).toEqual({ letterSpacing: 0.3 });
+    expect(parseTypography("tracking-[.75]")).toEqual({ letterSpacing: 0.75 });
+  });
+
+  it("should parse negative letter spacing with arbitrary values", () => {
+    expect(parseTypography("tracking-[-0.4px]")).toEqual({ letterSpacing: -0.4 });
+    expect(parseTypography("tracking-[-0.4]")).toEqual({ letterSpacing: -0.4 });
+    expect(parseTypography("tracking-[-0.5]")).toEqual({ letterSpacing: -0.5 });
+    expect(parseTypography("tracking-[-1px]")).toEqual({ letterSpacing: -1 });
+  });
+
+  it("should parse negative letter spacing with shorthand decimals", () => {
+    expect(parseTypography("tracking-[-.4]")).toEqual({ letterSpacing: -0.4 });
+    expect(parseTypography("tracking-[-.5px]")).toEqual({ letterSpacing: -0.5 });
+  });
+
+  it("should handle edge case letter spacing values", () => {
+    expect(parseTypography("tracking-[0]")).toEqual({ letterSpacing: 0 });
+    expect(parseTypography("tracking-[0.1]")).toEqual({ letterSpacing: 0.1 });
+    expect(parseTypography("tracking-[10]")).toEqual({ letterSpacing: 10 });
+  });
+});
+
+describe("parseTypography - custom fontSize", () => {
+  const customFontSize = {
+    tiny: 10,
+    huge: 96,
+    xl: 22, // Override default (default is 20)
+    custom: 17,
+  };
+
+  it("should support custom font sizes", () => {
+    expect(parseTypography("text-tiny", undefined, customFontSize)).toEqual({ fontSize: 10 });
+    expect(parseTypography("text-huge", undefined, customFontSize)).toEqual({ fontSize: 96 });
+    expect(parseTypography("text-custom", undefined, customFontSize)).toEqual({ fontSize: 17 });
+  });
+
+  it("should allow custom fontSize to override preset sizes", () => {
+    expect(parseTypography("text-xl", undefined, customFontSize)).toEqual({ fontSize: 22 });
+  });
+
+  it("should fallback to preset sizes when custom fontSize not found", () => {
+    expect(parseTypography("text-base", undefined, customFontSize)).toEqual({ fontSize: 16 });
+    expect(parseTypography("text-lg", undefined, customFontSize)).toEqual({ fontSize: 18 });
+    expect(parseTypography("text-2xl", undefined, customFontSize)).toEqual({ fontSize: 24 });
+  });
+
+  it("should prefer arbitrary values over custom fontSize", () => {
+    expect(parseTypography("text-[15px]", undefined, customFontSize)).toEqual({ fontSize: 15 });
+    expect(parseTypography("text-[13.5]", undefined, customFontSize)).toEqual({ fontSize: 13.5 });
+  });
+
+  it("should work with both customFontFamily and customFontSize", () => {
+    const customFontFamily = { brand: "MyCustomFont" };
+    expect(parseTypography("text-tiny", customFontFamily, customFontSize)).toEqual({ fontSize: 10 });
+    expect(parseTypography("font-brand", customFontFamily, customFontSize)).toEqual({
+      fontFamily: "MyCustomFont",
+    });
+  });
+
+  it("should return null for unknown custom fontSize keys", () => {
+    expect(parseTypography("text-nonexistent", undefined, customFontSize)).toBeNull();
+  });
 });
 
 describe("parseTypography - edge cases", () => {

package/src/parser/typography.ts

@@ -113,14 +113,14 @@ const TRACKING_MAP: Record<string, StyleObject> = {
 };
 
 /**
- * Parse arbitrary font size value: [18px], [20]
- * Returns number for px values, null for unsupported formats
+ * Parse arbitrary font size value: [18px], [20], [13.5px], [.5]
+ * Returns number for px values (including decimals), null for unsupported formats
  */
 function parseArbitraryFontSize(value: string): number | null {
-  // Match: [18px] or [18] (pixels only)
-  const pxMatch = value.match(/^\[(\d+)(?:px)?\]$/);
+  // Match: [18px], [18], [13.5px], [13.5], [.5] (pixels, including decimals)
+  const pxMatch = value.match(/^\[(-?\d+(?:\.\d+)?|-?\.\d+)(?:px)?\]$/);
   if (pxMatch) {
-    return parseInt(pxMatch[1], 10);
+    return parseFloat(pxMatch[1]);
   }
 
   // Warn about unsupported formats
@@ -128,7 +128,7 @@ function parseArbitraryFontSize(value: string): number | null {
     /* v8 ignore next 5 */
     if (process.env.NODE_ENV !== "production") {
       console.warn(
-        `[react-native-tailwind] Unsupported arbitrary font size value: ${value}. Only px values are supported (e.g., [18px] or [18]).`,
+        `[react-native-tailwind] Unsupported arbitrary font size value: ${value}. Only px values are supported (e.g., [18px], [13.5px], [.5]).`,
       );
     }
     return null;
@@ -138,14 +138,14 @@ function parseArbitraryFontSize(value: string): number | null {
 }
 
 /**
- * Parse arbitrary line height value: [24px], [28]
- * Returns number for px values, null for unsupported formats
+ * Parse arbitrary line height value: [24px], [28], [21.5px], [.5]
+ * Returns number for px values (including decimals), null for unsupported formats
  */
 function parseArbitraryLineHeight(value: string): number | null {
-  // Match: [24px] or [24] (pixels only)
-  const pxMatch = value.match(/^\[(\d+)(?:px)?\]$/);
+  // Match: [24px], [24], [21.5px], [21.5], [.5] (pixels, including decimals)
+  const pxMatch = value.match(/^\[(-?\d+(?:\.\d+)?|-?\.\d+)(?:px)?\]$/);
   if (pxMatch) {
-    return parseInt(pxMatch[1], 10);
+    return parseFloat(pxMatch[1]);
   }
 
   // Warn about unsupported formats
@@ -153,7 +153,32 @@ function parseArbitraryLineHeight(value: string): number | null {
     /* v8 ignore next 5 */
     if (process.env.NODE_ENV !== "production") {
       console.warn(
-        `[react-native-tailwind] Unsupported arbitrary line height value: ${value}. Only px values are supported (e.g., [24px] or [24]).`,
+        `[react-native-tailwind] Unsupported arbitrary line height value: ${value}. Only px values are supported (e.g., [24px], [21.5px], [.5]).`,
+      );
+    }
+    return null;
+  }
+
+  return null;
+}
+
+/**
+ * Parse arbitrary letter spacing value: [0.5px], [0.3], [.5], [-0.4]
+ * Returns number for px values (including decimals), null for unsupported formats
+ */
+function parseArbitraryLetterSpacing(value: string): number | null {
+  // Match: [0.5px], [0.3], [.5], [-0.4px] (pixels, including decimals and negatives)
+  const pxMatch = value.match(/^\[(-?\d+(?:\.\d+)?|-?\.\d+)(?:px)?\]$/);
+  if (pxMatch) {
+    return parseFloat(pxMatch[1]);
+  }
+
+  // Warn about unsupported formats
+  if (value.startsWith("[") && value.endsWith("]")) {
+    /* v8 ignore next 5 */
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `[react-native-tailwind] Unsupported arbitrary letter spacing value: ${value}. Only px values are supported (e.g., [0.5px], [0.3], [.5], [-0.4]).`,
       );
     }
     return null;
@@ -166,8 +191,13 @@ function parseArbitraryLineHeight(value: string): number | null {
  * Parse typography classes
  * @param cls - Class name to parse
  * @param customFontFamily - Optional custom fontFamily from tailwind.config
+ * @param customFontSize - Optional custom fontSize from tailwind.config
  */
-export function parseTypography(cls: string, customFontFamily?: Record<string, string>): StyleObject | null {
+export function parseTypography(
+  cls: string,
+  customFontFamily?: Record<string, string>,
+  customFontSize?: Record<string, number>,
+): StyleObject | null {
   // Merge custom fontFamily with defaults (custom takes precedence)
   const fontFamilyMap = customFontFamily
     ? {
@@ -182,13 +212,18 @@ export function parseTypography(cls: string, customFontFamily?: Record<string, s
   if (cls.startsWith("text-")) {
     const sizeKey = cls.substring(5);
 
-    // Try arbitrary value first
+    // Try arbitrary value first (highest priority)
     const arbitraryValue = parseArbitraryFontSize(sizeKey);
     if (arbitraryValue !== null) {
       return { fontSize: arbitraryValue };
     }
 
-    // Try preset scale
+    // Try custom fontSize from config
+    if (customFontSize?.[sizeKey] !== undefined) {
+      return { fontSize: customFontSize[sizeKey] };
+    }
+
+    // Try preset scale (fallback)
     const fontSize = FONT_SIZES[sizeKey];
     if (fontSize !== undefined) {
       return { fontSize };
@@ -212,6 +247,17 @@ export function parseTypography(cls: string, customFontFamily?: Record<string, s
     }
   }
 
+  // Letter spacing: tracking-wide, tracking-[0.5px], tracking-[.3], etc.
+  if (cls.startsWith("tracking-")) {
+    const trackingKey = cls.substring(9);
+
+    // Try arbitrary value first
+    const arbitraryValue = parseArbitraryLetterSpacing(trackingKey);
+    if (arbitraryValue !== null) {
+      return { letterSpacing: arbitraryValue };
+    }
+  }
+
   // Try each lookup table in order
   return (
     fontFamilyMap[cls] ??

package/src/runtime.test.ts

@@ -317,7 +317,10 @@ describe("runtime", () => {
     it("should provide raw hex values for animations", () => {
       const result = tw`bg-blue-500 active:bg-blue-700`;
       // Access raw backgroundColor value for use with reanimated
-      expect(result?.style.backgroundColor).toBe("#2b7fff");
+      const style = Array.isArray(result?.style) ? result.style.find((s) => s !== false) : result?.style;
+      expect(
+        style && typeof style === "object" && "backgroundColor" in style ? style.backgroundColor : undefined,
+      ).toBe("#2b7fff");
       expect(result?.activeStyle?.backgroundColor).toBe("#1447e6");
     });
 

package/src/types/runtime.ts

@@ -7,11 +7,18 @@ export type NativeStyle = ViewStyle | TextStyle | ImageStyle;
 
 /**
  * Return type for tw/twStyle functions with separate style properties for modifiers
+ * When color-scheme modifiers (dark:, light:) are present, style becomes an array with runtime conditionals
+ * When platform modifiers (ios:, android:, web:) are present, style becomes an array with Platform.select()
  */
 export type TwStyle<T extends NativeStyle = NativeStyle> = {
-  style: T;
+  style: T | Array<T | false>;
   activeStyle?: T;
   focusStyle?: T;
   disabledStyle?: T;
   placeholderStyle?: TextStyle;
+  lightStyle?: T;
+  darkStyle?: T;
+  iosStyle?: T;
+  androidStyle?: T;
+  webStyle?: T;
 };