@mgcrea/react-native-tailwind 0.15.0 → 0.15.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgcrea/react-native-tailwind",
-  "version": "0.15.0",
+  "version": "0.15.1",
   "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/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 };