@mgcrea/react-native-tailwind 0.15.0 → 0.15.2

package/dist/utils/mergeStyles.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Smart merge utility for StyleObject values
+ * Handles array properties (like transform) by concatenating instead of overwriting
+ */
+import type { StyleObject } from "../types/core";
+/**
+ * Merge two StyleObject instances, handling array properties specially
+ *
+ * @param target - The target object to merge into (mutated)
+ * @param source - The source object to merge from
+ * @returns The merged target object
+ *
+ * @example
+ * // Standard properties are overwritten (like Object.assign)
+ * mergeStyles({ margin: 4 }, { padding: 8 })
+ * // => { margin: 4, padding: 8 }
+ *
+ * @example
+ * // Array properties (transform) are concatenated
+ * mergeStyles(
+ *   { transform: [{ rotate: '45deg' }] },
+ *   { transform: [{ scale: 1.1 }] }
+ * )
+ * // => { transform: [{ rotate: '45deg' }, { scale: 1.1 }] }
+ */
+export declare function mergeStyles(target: StyleObject, source: StyleObject): StyleObject;

package/dist/utils/mergeStyles.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.mergeStyles=mergeStyles;var _toConsumableArray2=_interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));var ARRAY_MERGE_PROPERTIES=new Set(["transform"]);function mergeStyles(target,source){for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){var sourceValue=source[key];if(ARRAY_MERGE_PROPERTIES.has(key)&&Array.isArray(sourceValue)){var targetValue=target[key];if(Array.isArray(targetValue)){target[key]=[].concat((0,_toConsumableArray2.default)(targetValue),(0,_toConsumableArray2.default)(sourceValue));}else{target[key]=sourceValue;}}else{target[key]=sourceValue;}}}return target;}

package/dist/utils/mergeStyles.test.js

@@ -0,0 +1 @@
+var _vitest=require("vitest");var _mergeStyles=require("./mergeStyles");(0,_vitest.describe)("mergeStyles",function(){(0,_vitest.describe)("standard properties",function(){(0,_vitest.it)("should merge non-array properties like Object.assign",function(){var target={margin:4};var source={padding:8};(0,_vitest.expect)((0,_mergeStyles.mergeStyles)(target,source)).toEqual({margin:4,padding:8});});(0,_vitest.it)("should overwrite non-array properties",function(){var target={margin:4};var source={margin:8};(0,_vitest.expect)((0,_mergeStyles.mergeStyles)(target,source)).toEqual({margin:8});});(0,_vitest.it)("should handle shadowOffset as standard property (object, not array)",function(){var target={shadowOffset:{width:0,height:1}};var source={shadowOffset:{width:0,height:2}};(0,_vitest.expect)((0,_mergeStyles.mergeStyles)(target,source)).toEqual({shadowOffset:{width:0,height:2}});});});(0,_vitest.describe)("transform array merging",function(){(0,_vitest.it)("should concatenate transform arrays",function(){var target={transform:[{rotate:"45deg"}]};var source={transform:[{scale:1.1}]};(0,_vitest.expect)((0,_mergeStyles.mergeStyles)(target,source)).toEqual({transform:[{rotate:"45deg"},{scale:1.1}]});});(0,_vitest.it)("should handle multiple transforms in source",function(){var target={transform:[{rotate:"45deg"}]};var source={transform:[{scale:1.1},{translateX:10}]};(0,_vitest.expect)((0,_mergeStyles.mergeStyles)(target,source)).toEqual({transform:[{rotate:"45deg"},{scale:1.1},{translateX:10}]});});(0,_vitest.it)("should assign transform when target has no transform",function(){var target={margin:4};var source={transform:[{scale:1.1}]};(0,_vitest.expect)((0,_mergeStyles.mergeStyles)(target,source)).toEqual({margin:4,transform:[{scale:1.1}]});});(0,_vitest.it)("should handle empty target transform array",function(){var target={transform:[]};var source={transform:[{scale:1.1}]};(0,_vitest.expect)((0,_mergeStyles.mergeStyles)(target,source)).toEqual({transform:[{scale:1.1}]});});});(0,_vitest.describe)("mixed properties",function(){(0,_vitest.it)("should handle mix of standard and transform properties",function(){var target={margin:4,transform:[{rotate:"45deg"}]};var source={padding:8,transform:[{scale:1.1}]};(0,_vitest.expect)((0,_mergeStyles.mergeStyles)(target,source)).toEqual({margin:4,padding:8,transform:[{rotate:"45deg"},{scale:1.1}]});});});(0,_vitest.describe)("mutation behavior",function(){(0,_vitest.it)("should mutate and return target object",function(){var target={margin:4};var source={padding:8};var result=(0,_mergeStyles.mergeStyles)(target,source);(0,_vitest.expect)(result).toBe(target);(0,_vitest.expect)(target).toEqual({margin:4,padding:8});});});});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgcrea/react-native-tailwind",
-  "version": "0.15.0",
+  "version": "0.15.2",
   "description": "Compile-time Tailwind CSS for React Native with zero runtime overhead",
   "author": "Olivier Louvignes <olivier@mgcrea.io> (https://github.com/mgcrea)",
   "homepage": "https://github.com/mgcrea/react-native-tailwind#readme",

package/src/index.ts

@@ -9,6 +9,7 @@ export { tw, twStyle } from "./stubs/tw";
 // Main parser functions
 export { parseClass, parseClassName } from "./parser";
 export { flattenColors } from "./utils/flattenColors";
+export { mergeStyles } from "./utils/mergeStyles";
 export { generateStyleKey } from "./utils/styleKey";
 
 // Re-export types

package/src/parser/index.ts

@@ -4,6 +4,7 @@
  */
 
 import type { StyleObject } from "../types";
+import { mergeStyles } from "../utils/mergeStyles";
 import { parseAspectRatio } from "./aspectRatio";
 import { parseBorder } from "./borders";
 import { parseColor } from "./colors";
@@ -36,7 +37,7 @@ export function parseClassName(className: string, customTheme?: CustomTheme): St
 
   for (const cls of classes) {
     const parsedStyle = parseClass(cls, customTheme);
-    Object.assign(style, parsedStyle);
+    mergeStyles(style, parsedStyle);
   }
 
   return style;

package/src/parser/spacing.test.ts

@@ -416,6 +416,43 @@ describe("parseSpacing - logical padding (RTL-aware)", () => {
   });
 });
 
+describe("parseSpacing - auto margin", () => {
+  it("should parse m-auto", () => {
+    expect(parseSpacing("m-auto")).toEqual({ margin: "auto" });
+  });
+
+  it("should parse mx-auto", () => {
+    expect(parseSpacing("mx-auto")).toEqual({ marginHorizontal: "auto" });
+  });
+
+  it("should parse my-auto", () => {
+    expect(parseSpacing("my-auto")).toEqual({ marginVertical: "auto" });
+  });
+
+  it("should parse directional auto margins", () => {
+    expect(parseSpacing("mt-auto")).toEqual({ marginTop: "auto" });
+    expect(parseSpacing("mr-auto")).toEqual({ marginRight: "auto" });
+    expect(parseSpacing("mb-auto")).toEqual({ marginBottom: "auto" });
+    expect(parseSpacing("ml-auto")).toEqual({ marginLeft: "auto" });
+  });
+
+  it("should parse logical auto margins (RTL-aware)", () => {
+    expect(parseSpacing("ms-auto")).toEqual({ marginStart: "auto" });
+    expect(parseSpacing("me-auto")).toEqual({ marginEnd: "auto" });
+  });
+
+  it("should not parse padding auto (not valid in Tailwind)", () => {
+    expect(parseSpacing("p-auto")).toBeNull();
+    expect(parseSpacing("px-auto")).toBeNull();
+    expect(parseSpacing("py-auto")).toBeNull();
+    expect(parseSpacing("pt-auto")).toBeNull();
+  });
+
+  it("should not parse gap auto (not valid in Tailwind)", () => {
+    expect(parseSpacing("gap-auto")).toBeNull();
+  });
+});
+
 describe("parseSpacing - custom spacing", () => {
   const customSpacing = {
     xs: 4,

package/src/parser/spacing.ts

@@ -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], pl-[4.5px], -m-4, -mt-[10px], ms-4, pe-2
+ * Examples: m-4, mx-2, mt-8, p-4, px-2, pt-8, gap-4, m-[16px], pl-[4.5px], -m-4, -mt-[10px], ms-4, pe-2, mx-auto
  * @param cls - The class name to parse
  * @param customSpacing - Optional custom spacing values from tailwind.config
  */
@@ -77,6 +77,14 @@ export function parseSpacing(cls: string, customSpacing?: Record<string, number>
   // Merge custom spacing with defaults (custom takes precedence)
   const spacingMap = customSpacing ? { ...SPACING_SCALE, ...customSpacing } : SPACING_SCALE;
 
+  // Auto margins: m-auto, mx-auto, my-auto, mt-auto, mr-auto, mb-auto, ml-auto, ms-auto, me-auto
+  // Note: Only margins support auto values (not padding or gap)
+  const autoMarginMatch = cls.match(/^m([xytrblse]?)-auto$/);
+  if (autoMarginMatch) {
+    const dir = autoMarginMatch[1];
+    return getMarginStyle(dir, "auto");
+  }
+
   // Margin: m-4, mx-2, mt-8, ms-4, me-2, m-[16px], -m-4, -mt-2, etc.
   // Supports negative values for margins (but not padding or gap)
   // s = start (RTL-aware), e = end (RTL-aware)
@@ -143,7 +151,7 @@ export function parseSpacing(cls: string, customSpacing?: Record<string, number>
 /**
  * Get margin style object based on direction
  */
-function getMarginStyle(dir: string, value: number): StyleObject {
+function getMarginStyle(dir: string, value: number | "auto"): StyleObject {
   switch (dir) {
     case "":
       return { margin: value };

package/src/parser/transforms.test.ts

@@ -1,4 +1,5 @@
 import { describe, expect, it } from "vitest";
+import { parseClassName } from "./index";
 import { PERSPECTIVE_SCALE, ROTATE_MAP, SCALE_MAP, SKEW_MAP, parseTransform } from "./transforms";
 
 describe("SCALE_MAP", () => {
@@ -373,3 +374,85 @@ describe("parseTransform - custom spacing", () => {
     expect(parseTransform("perspective-500", customSpacing)).toEqual({ transform: [{ perspective: 500 }] });
   });
 });
+
+describe("parseClassName - multiple transforms", () => {
+  it("should combine rotate and scale transforms", () => {
+    const result = parseClassName("rotate-45 scale-110");
+    expect(result).toEqual({
+      transform: [{ rotate: "45deg" }, { scale: 1.1 }],
+    });
+  });
+
+  it("should combine scale and rotate with arbitrary values", () => {
+    const result = parseClassName("rotate-45 scale-[0.2]");
+    expect(result).toEqual({
+      transform: [{ rotate: "45deg" }, { scale: 0.2 }],
+    });
+  });
+
+  it("should combine multiple different transforms", () => {
+    const result = parseClassName("rotate-45 scale-110 translate-x-4");
+    expect(result).toEqual({
+      transform: [{ rotate: "45deg" }, { scale: 1.1 }, { translateX: 16 }],
+    });
+  });
+
+  it("should preserve order of transforms", () => {
+    // Order matters in React Native transforms!
+    const result1 = parseClassName("rotate-45 scale-110");
+    const result2 = parseClassName("scale-110 rotate-45");
+
+    expect(result1.transform).toEqual([{ rotate: "45deg" }, { scale: 1.1 }]);
+    expect(result2.transform).toEqual([{ scale: 1.1 }, { rotate: "45deg" }]);
+  });
+
+  it("should combine transforms with other properties", () => {
+    const result = parseClassName("m-4 rotate-45 scale-110 p-2");
+    expect(result).toEqual({
+      margin: 16,
+      padding: 8,
+      transform: [{ rotate: "45deg" }, { scale: 1.1 }],
+    });
+  });
+
+  it("should handle all transform types together", () => {
+    const result = parseClassName("perspective-500 rotate-45 scale-110 translate-x-4 skew-x-6");
+    expect(result).toEqual({
+      transform: [
+        { perspective: 500 },
+        { rotate: "45deg" },
+        { scale: 1.1 },
+        { translateX: 16 },
+        { skewX: "6deg" },
+      ],
+    });
+  });
+
+  it("should handle negative transforms", () => {
+    const result = parseClassName("-rotate-45 -translate-x-4");
+    expect(result).toEqual({
+      transform: [{ rotate: "-45deg" }, { translateX: -16 }],
+    });
+  });
+
+  it("should handle scale-x and scale-y together", () => {
+    const result = parseClassName("scale-x-50 scale-y-150");
+    expect(result).toEqual({
+      transform: [{ scaleX: 0.5 }, { scaleY: 1.5 }],
+    });
+  });
+
+  it("should handle single transform (backward compatibility)", () => {
+    const result = parseClassName("rotate-45");
+    expect(result).toEqual({
+      transform: [{ rotate: "45deg" }],
+    });
+  });
+
+  it("should handle arbitrary values combined", () => {
+    const result = parseClassName("rotate-[37deg] scale-[0.2] translate-x-[50px]");
+    expect(result).toEqual({
+      transform: [{ rotate: "37deg" }, { scale: 0.2 }, { translateX: 50 }],
+    });
+  });
+});

package/src/utils/mergeStyles.test.ts

@@ -0,0 +1,83 @@
+import { describe, expect, it } from "vitest";
+import { mergeStyles } from "./mergeStyles";
+
+describe("mergeStyles", () => {
+  describe("standard properties", () => {
+    it("should merge non-array properties like Object.assign", () => {
+      const target = { margin: 4 };
+      const source = { padding: 8 };
+      expect(mergeStyles(target, source)).toEqual({ margin: 4, padding: 8 });
+    });
+
+    it("should overwrite non-array properties", () => {
+      const target = { margin: 4 };
+      const source = { margin: 8 };
+      expect(mergeStyles(target, source)).toEqual({ margin: 8 });
+    });
+
+    it("should handle shadowOffset as standard property (object, not array)", () => {
+      const target = { shadowOffset: { width: 0, height: 1 } };
+      const source = { shadowOffset: { width: 0, height: 2 } };
+      expect(mergeStyles(target, source)).toEqual({
+        shadowOffset: { width: 0, height: 2 },
+      });
+    });
+  });
+
+  describe("transform array merging", () => {
+    it("should concatenate transform arrays", () => {
+      const target = { transform: [{ rotate: "45deg" }] };
+      const source = { transform: [{ scale: 1.1 }] };
+      expect(mergeStyles(target, source)).toEqual({
+        transform: [{ rotate: "45deg" }, { scale: 1.1 }],
+      });
+    });
+
+    it("should handle multiple transforms in source", () => {
+      const target = { transform: [{ rotate: "45deg" }] };
+      const source = { transform: [{ scale: 1.1 }, { translateX: 10 }] };
+      expect(mergeStyles(target, source)).toEqual({
+        transform: [{ rotate: "45deg" }, { scale: 1.1 }, { translateX: 10 }],
+      });
+    });
+
+    it("should assign transform when target has no transform", () => {
+      const target = { margin: 4 };
+      const source = { transform: [{ scale: 1.1 }] };
+      expect(mergeStyles(target, source)).toEqual({
+        margin: 4,
+        transform: [{ scale: 1.1 }],
+      });
+    });
+
+    it("should handle empty target transform array", () => {
+      const target = { transform: [] as Array<{ scale?: number }> };
+      const source = { transform: [{ scale: 1.1 }] };
+      expect(mergeStyles(target, source)).toEqual({
+        transform: [{ scale: 1.1 }],
+      });
+    });
+  });
+
+  describe("mixed properties", () => {
+    it("should handle mix of standard and transform properties", () => {
+      const target = { margin: 4, transform: [{ rotate: "45deg" }] };
+      const source = { padding: 8, transform: [{ scale: 1.1 }] };
+      expect(mergeStyles(target, source)).toEqual({
+        margin: 4,
+        padding: 8,
+        transform: [{ rotate: "45deg" }, { scale: 1.1 }],
+      });
+    });
+  });
+
+  describe("mutation behavior", () => {
+    it("should mutate and return target object", () => {
+      const target = { margin: 4 };
+      const source = { padding: 8 };
+      const result = mergeStyles(target, source);
+      expect(result).toBe(target);
+      expect(target).toEqual({ margin: 4, padding: 8 });
+    });
+  });
+});

package/src/utils/mergeStyles.ts

@@ -0,0 +1,56 @@
+/**
+ * Smart merge utility for StyleObject values
+ * Handles array properties (like transform) by concatenating instead of overwriting
+ */
+
+import type { StyleObject } from "../types/core";
+
+/**
+ * Properties that should be merged as arrays (concatenated) rather than overwritten
+ */
+const ARRAY_MERGE_PROPERTIES = new Set<string>(["transform"]);
+
+/**
+ * Merge two StyleObject instances, handling array properties specially
+ *
+ * @param target - The target object to merge into (mutated)
+ * @param source - The source object to merge from
+ * @returns The merged target object
+ *
+ * @example
+ * // Standard properties are overwritten (like Object.assign)
+ * mergeStyles({ margin: 4 }, { padding: 8 })
+ * // => { margin: 4, padding: 8 }
+ *
+ * @example
+ * // Array properties (transform) are concatenated
+ * mergeStyles(
+ *   { transform: [{ rotate: '45deg' }] },
+ *   { transform: [{ scale: 1.1 }] }
+ * )
+ * // => { transform: [{ rotate: '45deg' }, { scale: 1.1 }] }
+ */
+export function mergeStyles(target: StyleObject, source: StyleObject): StyleObject {
+  for (const key in source) {
+    if (Object.prototype.hasOwnProperty.call(source, key)) {
+      const sourceValue = source[key];
+
+      // Handle array merge properties (like transform)
+      if (ARRAY_MERGE_PROPERTIES.has(key) && Array.isArray(sourceValue)) {
+        const targetValue = target[key];
+        if (Array.isArray(targetValue)) {
+          // Concatenate arrays
+          (target as Record<string, unknown>)[key] = [...targetValue, ...sourceValue];
+        } else {
+          // No existing array, just assign
+          target[key] = sourceValue;
+        }
+      } else {
+        // Standard Object.assign behavior for non-array properties
+        target[key] = sourceValue;
+      }
+    }
+  }
+
+  return target;
+}