@mgcrea/react-native-tailwind 0.11.0 → 0.12.0

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/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;
 };