@mgcrea/react-native-tailwind 0.15.4 → 0.15.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgcrea/react-native-tailwind",
-  "version": "0.15.4",
+  "version": "0.15.5",
   "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

@@ -25,6 +25,7 @@ export {
   parseBorder,
   parseColor,
   parseLayout,
+  parseOutline,
   parsePlaceholderClass,
   parsePlaceholderClasses,
   parseShadow,

package/src/parser/colors.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest";
-import { COLORS, parseColor } from "./colors";
 import { applyOpacity } from "../utils/colorUtils";
+import { COLORS, parseColor } from "./colors";
 
 describe("COLORS", () => {
   it("should export complete color palette", () => {

package/src/parser/colors.ts

@@ -116,6 +116,25 @@ export function parseColor(cls: string, customColors?: Record<string, string>):
     }
   }
 
+  // Outline color: outline-blue-500, outline-blue-500/50, outline-[#ff0000]/80
+  if (cls.startsWith("outline-") && !cls.match(/^outline-[0-9]/) && !cls.startsWith("outline-offset-")) {
+    const colorKey = cls.substring(8); // "outline-".length = 8
+
+    // Skip outline-style values
+    if (["solid", "dashed", "dotted", "none"].includes(colorKey)) {
+      return null;
+    }
+
+    // Skip arbitrary values that don't look like colors (e.g., outline-[3px] is width)
+    if (colorKey.startsWith("[") && !colorKey.startsWith("[#")) {
+      return null;
+    }
+    const color = parseColorWithOpacity(colorKey);
+    if (color) {
+      return { outlineColor: color };
+    }
+  }
+
   // Directional border colors: border-t-red-500, border-l-blue-500/50, border-r-[#ff0000]
   const dirBorderMatch = cls.match(/^border-([trblxy])-(.+)$/);
   if (dirBorderMatch) {

package/src/parser/index.ts

@@ -9,6 +9,7 @@ import { parseAspectRatio } from "./aspectRatio";
 import { parseBorder } from "./borders";
 import { parseColor } from "./colors";
 import { parseLayout } from "./layout";
+import { parseOutline } from "./outline";
 import { parseShadow } from "./shadows";
 import { parseSizing } from "./sizing";
 import { parseSpacing } from "./spacing";
@@ -56,6 +57,7 @@ export function parseClass(cls: string, customTheme?: CustomTheme): StyleObject
   const parsers: Array<(cls: string) => StyleObject | null> = [
     (cls: string) => parseSpacing(cls, customTheme?.spacing),
     (cls: string) => parseBorder(cls, customTheme?.colors),
+    parseOutline,
     (cls: string) => parseColor(cls, customTheme?.colors),
     (cls: string) => parseLayout(cls, customTheme?.spacing),
     (cls: string) => parseTypography(cls, customTheme?.fontFamily, customTheme?.fontSize),
@@ -86,6 +88,7 @@ export { parseAspectRatio } from "./aspectRatio";
 export { parseBorder } from "./borders";
 export { parseColor } from "./colors";
 export { parseLayout } from "./layout";
+export { parseOutline } from "./outline";
 export { parsePlaceholderClass, parsePlaceholderClasses } from "./placeholder";
 export { parseShadow } from "./shadows";
 export { parseSizing } from "./sizing";

package/src/parser/outline.test.ts

@@ -0,0 +1,57 @@
+import { describe, expect, it } from "vitest";
+import { parseOutline } from "./outline";
+
+describe("parseOutline", () => {
+  it("should parse outline shorthand", () => {
+    expect(parseOutline("outline")).toEqual({
+      outlineWidth: 1,
+      outlineStyle: "solid",
+    });
+  });
+
+  it("should parse outline-none", () => {
+    expect(parseOutline("outline-none")).toEqual({ outlineWidth: 0 });
+  });
+
+  it("should parse outline width with preset values", () => {
+    expect(parseOutline("outline-0")).toEqual({ outlineWidth: 0 });
+    expect(parseOutline("outline-2")).toEqual({ outlineWidth: 2 });
+    expect(parseOutline("outline-4")).toEqual({ outlineWidth: 4 });
+    expect(parseOutline("outline-8")).toEqual({ outlineWidth: 8 });
+  });
+
+  it("should parse outline width with arbitrary values", () => {
+    expect(parseOutline("outline-[5px]")).toEqual({ outlineWidth: 5 });
+    expect(parseOutline("outline-[10]")).toEqual({ outlineWidth: 10 });
+  });
+
+  it("should parse outline style", () => {
+    expect(parseOutline("outline-solid")).toEqual({ outlineStyle: "solid" });
+    expect(parseOutline("outline-dashed")).toEqual({ outlineStyle: "dashed" });
+    expect(parseOutline("outline-dotted")).toEqual({ outlineStyle: "dotted" });
+  });
+
+  it("should parse outline offset with preset values", () => {
+    expect(parseOutline("outline-offset-0")).toEqual({ outlineOffset: 0 });
+    expect(parseOutline("outline-offset-2")).toEqual({ outlineOffset: 2 });
+    expect(parseOutline("outline-offset-4")).toEqual({ outlineOffset: 4 });
+    expect(parseOutline("outline-offset-8")).toEqual({ outlineOffset: 8 });
+  });
+
+  it("should parse outline offset with arbitrary values", () => {
+    expect(parseOutline("outline-offset-[3px]")).toEqual({ outlineOffset: 3 });
+    expect(parseOutline("outline-offset-[5]")).toEqual({ outlineOffset: 5 });
+  });
+
+  it("should return null for invalid outline values", () => {
+    expect(parseOutline("outline-invalid")).toBeNull();
+    expect(parseOutline("outline-3")).toBeNull(); // Not in scale
+    expect(parseOutline("outline-offset-3")).toBeNull(); // Not in scale
+    expect(parseOutline("outline-[5rem]")).toBeNull(); // Unsupported unit
+  });
+
+  it("should return null for outline colors (handled by parseColor)", () => {
+    expect(parseOutline("outline-red-500")).toBeNull();
+    expect(parseOutline("outline-[#ff0000]")).toBeNull();
+  });
+});

package/src/parser/outline.ts

@@ -0,0 +1,101 @@
+/**
+ * Outline utilities (outline width, style, offset)
+ */
+
+import type { StyleObject } from "../types";
+import { BORDER_WIDTH_SCALE } from "./borders";
+
+/**
+ * Parse arbitrary outline width/offset value: [8px], [4]
+ * Returns number for px values, null for unsupported formats
+ */
+function parseArbitraryOutlineValue(value: string): number | null {
+  // Match: [8px] or [8] (pixels only)
+  const pxMatch = value.match(/^\[(\d+)(?:px)?\]$/);
+  if (pxMatch) {
+    return parseInt(pxMatch[1], 10);
+  }
+
+  // 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 outline value: ${value}. Only px values are supported (e.g., [8px] or [8]).`,
+      );
+    }
+    return null;
+  }
+
+  return null;
+}
+
+/**
+ * Parse outline classes
+ * @param cls - The class name to parse
+ */
+export function parseOutline(cls: string): StyleObject | null {
+  // Shorthand: outline (width: 1, style: solid)
+  if (cls === "outline") {
+    return { outlineWidth: 1, outlineStyle: "solid" };
+  }
+
+  // Outline none
+  if (cls === "outline-none") {
+    return { outlineWidth: 0 };
+  }
+
+  // Outline style
+  if (cls === "outline-solid") return { outlineStyle: "solid" };
+  if (cls === "outline-dotted") return { outlineStyle: "dotted" };
+  if (cls === "outline-dashed") return { outlineStyle: "dashed" };
+
+  // Outline offset: outline-offset-2, outline-offset-[3px]
+  if (cls.startsWith("outline-offset-")) {
+    const valueStr = cls.substring(15); // "outline-offset-".length = 15
+
+    // Try arbitrary value first
+    if (valueStr.startsWith("[")) {
+      const arbitraryValue = parseArbitraryOutlineValue(valueStr);
+      if (arbitraryValue !== null) {
+        return { outlineOffset: arbitraryValue };
+      }
+      return null;
+    }
+
+    // Try preset scale (reuse border width scale for consistency with default Tailwind)
+    const scaleValue = BORDER_WIDTH_SCALE[valueStr];
+    if (scaleValue !== undefined) {
+      return { outlineOffset: scaleValue };
+    }
+
+    return null;
+  }
+
+  // Outline width: outline-0, outline-2, outline-[5px]
+  // Must handle potential collision with outline-red-500 (colors)
+  // Logic: if it matches width pattern, return width. If it looks like color, return null (let parseColor handle it)
+
+  const widthMatch = cls.match(/^outline-(\d+)$/);
+  if (widthMatch) {
+    const value = BORDER_WIDTH_SCALE[widthMatch[1]];
+    if (value !== undefined) {
+      return { outlineWidth: value };
+    }
+  }
+
+  const arbMatch = cls.match(/^outline-(\[.+\])$/);
+  if (arbMatch) {
+    // Check if it's a color first? No, colors usually look like [#...] or [rgb(...)]
+    // parseArbitraryOutlineValue only accepts [123] or [123px]
+    // If it fails, it might be a color, so we return null
+    const arbitraryValue = parseArbitraryOutlineValue(arbMatch[1]);
+    if (arbitraryValue !== null) {
+      return { outlineWidth: arbitraryValue };
+    }
+    return null;
+  }
+
+  // If it's outline-{color}, return null so parseColor (called later in index.ts) handles it
+  return null;
+}

package/src/parser/shadows.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest";
-import { SHADOW_COLORS, SHADOW_SCALE, parseShadow } from "./shadows";
 import { applyOpacity } from "../utils/colorUtils";
+import { SHADOW_COLORS, SHADOW_SCALE, parseShadow } from "./shadows";
 
 describe("SHADOW_SCALE", () => {
   it("should export complete shadow scale", () => {

package/src/parser/shadows.ts

@@ -97,4 +97,4 @@ export function parseShadow(cls: string, customColors?: Record<string, string>):
 }
 
 // Export shadow scale and colors for testing/advanced usage
-export { SHADOW_SCALE, COLORS as SHADOW_COLORS };
+export { COLORS as SHADOW_COLORS, SHADOW_SCALE };

package/src/parser/sizing.test.ts

@@ -310,3 +310,85 @@ describe("parseSizing - custom spacing", () => {
     expect(parseSizing("h-8")).toEqual({ height: 32 }); // Default behavior
   });
 });
+
+describe("parseSizing - size (width + height)", () => {
+  it("should parse size with numeric values", () => {
+    expect(parseSizing("size-0")).toEqual({ width: 0, height: 0 });
+    expect(parseSizing("size-4")).toEqual({ width: 16, height: 16 });
+    expect(parseSizing("size-8")).toEqual({ width: 32, height: 32 });
+    expect(parseSizing("size-96")).toEqual({ width: 384, height: 384 });
+  });
+
+  it("should parse size with fractional values", () => {
+    expect(parseSizing("size-0.5")).toEqual({ width: 2, height: 2 });
+    expect(parseSizing("size-1.5")).toEqual({ width: 6, height: 6 });
+    expect(parseSizing("size-2.5")).toEqual({ width: 10, height: 10 });
+  });
+
+  it("should parse size with percentage values", () => {
+    expect(parseSizing("size-full")).toEqual({ width: "100%", height: "100%" });
+    expect(parseSizing("size-1/2")).toEqual({ width: "50%", height: "50%" });
+    expect(parseSizing("size-1/3")).toEqual({ width: "33.333333%", height: "33.333333%" });
+    expect(parseSizing("size-2/3")).toEqual({ width: "66.666667%", height: "66.666667%" });
+    expect(parseSizing("size-1/4")).toEqual({ width: "25%", height: "25%" });
+    expect(parseSizing("size-3/4")).toEqual({ width: "75%", height: "75%" });
+  });
+
+  it("should parse size with special values", () => {
+    expect(parseSizing("size-auto")).toEqual({ width: "auto", height: "auto" });
+  });
+
+  it("should parse size with arbitrary pixel values", () => {
+    expect(parseSizing("size-[123px]")).toEqual({ width: 123, height: 123 });
+    expect(parseSizing("size-[200]")).toEqual({ width: 200, height: 200 });
+    expect(parseSizing("size-[50px]")).toEqual({ width: 50, height: 50 });
+  });
+
+  it("should parse size with arbitrary percentage values", () => {
+    expect(parseSizing("size-[50%]")).toEqual({ width: "50%", height: "50%" });
+    expect(parseSizing("size-[33.333%]")).toEqual({ width: "33.333%", height: "33.333%" });
+    expect(parseSizing("size-[85%]")).toEqual({ width: "85%", height: "85%" });
+  });
+
+  it("should support custom spacing values for size", () => {
+    const customSpacing = { sm: 8, md: 16, lg: 32, xl: 64 };
+    expect(parseSizing("size-sm", customSpacing)).toEqual({ width: 8, height: 8 });
+    expect(parseSizing("size-md", customSpacing)).toEqual({ width: 16, height: 16 });
+    expect(parseSizing("size-lg", customSpacing)).toEqual({ width: 32, height: 32 });
+    expect(parseSizing("size-xl", customSpacing)).toEqual({ width: 64, height: 64 });
+  });
+
+  it("should allow custom spacing to override preset values", () => {
+    const customSpacing = { "4": 20 }; // Override default (16)
+    expect(parseSizing("size-4", customSpacing)).toEqual({ width: 20, height: 20 });
+  });
+
+  it("should prefer arbitrary values over custom spacing", () => {
+    expect(parseSizing("size-[24px]", { "4": 20 })).toEqual({ width: 24, height: 24 });
+    expect(parseSizing("size-[50]", { sm: 8 })).toEqual({ width: 50, height: 50 });
+  });
+
+  it("should handle all fractional percentage variants", () => {
+    expect(parseSizing("size-1/5")).toEqual({ width: "20%", height: "20%" });
+    expect(parseSizing("size-2/5")).toEqual({ width: "40%", height: "40%" });
+    expect(parseSizing("size-3/5")).toEqual({ width: "60%", height: "60%" });
+    expect(parseSizing("size-4/5")).toEqual({ width: "80%", height: "80%" });
+    expect(parseSizing("size-1/6")).toEqual({ width: "16.666667%", height: "16.666667%" });
+    expect(parseSizing("size-5/6")).toEqual({ width: "83.333333%", height: "83.333333%" });
+  });
+
+  it("should handle edge case size values", () => {
+    expect(parseSizing("size-0")).toEqual({ width: 0, height: 0 });
+  });
+
+  it("should return null for invalid size values", () => {
+    expect(parseSizing("size-invalid")).toBeNull();
+    expect(parseSizing("size-999")).toBeNull();
+  });
+
+  it("should return null for arbitrary values with unsupported units", () => {
+    expect(parseSizing("size-[16rem]")).toBeNull();
+    expect(parseSizing("size-[2em]")).toBeNull();
+    expect(parseSizing("size-[50vh]")).toBeNull();
+  });
+});

package/src/parser/sizing.ts

@@ -102,6 +102,34 @@ export function parseSizing(cls: string, customSpacing?: Record<string, number>)
   // Merge custom spacing with defaults (custom takes precedence)
   const sizeMap = customSpacing ? { ...SIZE_SCALE, ...customSpacing } : SIZE_SCALE;
 
+  // Size (both width AND height)
+  if (cls.startsWith("size-")) {
+    const sizeKey = cls.substring(5); // "size-".length = 5
+
+    // Arbitrary values: size-[123px], size-[50%] (highest priority)
+    const arbitrarySize = parseArbitrarySize(sizeKey);
+    if (arbitrarySize !== null) {
+      return { width: arbitrarySize, height: arbitrarySize };
+    }
+
+    // Percentage sizes: size-full, size-1/2, etc.
+    const percentage = SIZE_PERCENTAGES[sizeKey];
+    if (percentage) {
+      return { width: percentage, height: percentage };
+    }
+
+    // Numeric sizes: size-4, size-8, etc. (includes custom spacing)
+    const numericSize = sizeMap[sizeKey];
+    if (numericSize !== undefined) {
+      return { width: numericSize, height: numericSize };
+    }
+
+    // Special values
+    if (sizeKey === "auto") {
+      return { width: "auto", height: "auto" };
+    }
+  }
+
   // Width
   if (cls.startsWith("w-")) {
     const sizeKey = cls.substring(2);