@mgcrea/react-native-tailwind 0.8.0 → 0.9.0

package/src/parser/modifiers.ts

@@ -1,8 +1,12 @@
 /**
- * Modifier parsing utilities for state-based class names (active:, hover:, focus:, placeholder:)
+ * Modifier parsing utilities for state-based and platform-specific class names
+ * - State modifiers: active:, hover:, focus:, disabled:, placeholder:
+ * - Platform modifiers: ios:, android:, web:
  */
 
-export type ModifierType = "active" | "hover" | "focus" | "disabled" | "placeholder";
+export type StateModifierType = "active" | "hover" | "focus" | "disabled" | "placeholder";
+export type PlatformModifierType = "ios" | "android" | "web";
+export type ModifierType = StateModifierType | PlatformModifierType;
 
 export type ParsedModifier = {
   modifier: ModifierType;
@@ -10,9 +14,9 @@ export type ParsedModifier = {
 };
 
 /**
- * Supported modifiers that map to component states or pseudo-elements
+ * Supported state modifiers that map to component states or pseudo-elements
  */
-const SUPPORTED_MODIFIERS: readonly ModifierType[] = [
+const STATE_MODIFIERS: readonly StateModifierType[] = [
   "active",
   "hover",
   "focus",
@@ -20,6 +24,16 @@ const SUPPORTED_MODIFIERS: readonly ModifierType[] = [
   "placeholder",
 ] as const;
 
+/**
+ * Supported platform modifiers that map to Platform.OS values
+ */
+const PLATFORM_MODIFIERS: readonly PlatformModifierType[] = ["ios", "android", "web"] as const;
+
+/**
+ * All supported modifiers (state + platform)
+ */
+const SUPPORTED_MODIFIERS: readonly ModifierType[] = [...STATE_MODIFIERS, ...PLATFORM_MODIFIERS] as const;
+
 /**
  * Parse a class name to detect and extract modifiers
  *
@@ -73,6 +87,26 @@ export function hasModifier(cls: string): boolean {
   return parseModifier(cls) !== null;
 }
 
+/**
+ * Check if a modifier is a state modifier (active, hover, focus, disabled, placeholder)
+ *
+ * @param modifier - Modifier type to check
+ * @returns true if modifier is a state modifier
+ */
+export function isStateModifier(modifier: ModifierType): modifier is StateModifierType {
+  return STATE_MODIFIERS.includes(modifier as StateModifierType);
+}
+
+/**
+ * Check if a modifier is a platform modifier (ios, android, web)
+ *
+ * @param modifier - Modifier type to check
+ * @returns true if modifier is a platform modifier
+ */
+export function isPlatformModifier(modifier: ModifierType): modifier is PlatformModifierType {
+  return PLATFORM_MODIFIERS.includes(modifier as PlatformModifierType);
+}
+
 /**
  * Split a space-separated className string into base and modifier classes
  *

package/src/parser/placeholder.ts

@@ -27,6 +27,7 @@ export function parsePlaceholderClass(cls: string, customColors?: Record<string,
   // Check if it's a text color class
   if (!cls.startsWith("text-")) {
     // Warn about unsupported utilities
+    /* v8 ignore next 5 */
     if (process.env.NODE_ENV !== "production") {
       console.warn(
         `[react-native-tailwind] Only text color utilities are supported in placeholder: modifier. ` +

package/src/parser/sizing.ts

@@ -80,6 +80,7 @@ function parseArbitrarySize(value: string): number | string | null {
 
   // Unsupported units (rem, em, vh, vw, etc.) - warn and reject
   if (value.startsWith("[") && value.endsWith("]")) {
+    /* v8 ignore next 5 */
     if (process.env.NODE_ENV !== "production") {
       console.warn(
         `[react-native-tailwind] Unsupported arbitrary size unit: ${value}. Only px and % are supported.`,

package/src/parser/spacing.ts

@@ -55,6 +55,7 @@ function parseArbitrarySpacing(value: string): number | null {
 
   // 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 spacing value: ${value}. Only px values are supported (e.g., [16px] or [16]).`,

package/src/parser/transforms.ts

@@ -70,6 +70,7 @@ function parseArbitraryScale(value: string): number | null {
 
   // Unsupported format
   if (value.startsWith("[") && value.endsWith("]")) {
+    /* v8 ignore next 5 */
     if (process.env.NODE_ENV !== "production") {
       console.warn(
         `[react-native-tailwind] Invalid arbitrary scale value: ${value}. Only numbers are supported (e.g., [1.5], [0.75]).`,
@@ -93,6 +94,7 @@ function parseArbitraryRotation(value: string): string | null {
 
   // Unsupported format
   if (value.startsWith("[") && value.endsWith("]")) {
+    /* v8 ignore next 5 */
     if (process.env.NODE_ENV !== "production") {
       console.warn(
         `[react-native-tailwind] Invalid arbitrary rotation value: ${value}. Only deg unit is supported (e.g., [45deg], [-15deg]).`,
@@ -123,6 +125,7 @@ function parseArbitraryTranslation(value: string): number | string | null {
 
   // Unsupported units
   if (value.startsWith("[") && value.endsWith("]")) {
+    /* v8 ignore next 5 */
     if (process.env.NODE_ENV !== "production") {
       console.warn(
         `[react-native-tailwind] Unsupported arbitrary translation unit: ${value}. Only px and % are supported.`,
@@ -146,6 +149,7 @@ function parseArbitraryPerspective(value: string): number | null {
 
   // Unsupported format
   if (value.startsWith("[") && value.endsWith("]")) {
+    /* v8 ignore next 5 */
     if (process.env.NODE_ENV !== "production") {
       console.warn(
         `[react-native-tailwind] Invalid arbitrary perspective value: ${value}. Only integers are supported (e.g., [1500]).`,
@@ -164,6 +168,7 @@ function parseArbitraryPerspective(value: string): number | null {
 export function parseTransform(cls: string): StyleObject | null {
   // Transform origin warning (not supported in React Native)
   if (cls.startsWith("origin-")) {
+    /* v8 ignore next 5 */
     if (process.env.NODE_ENV !== "production") {
       console.warn(
         `[react-native-tailwind] transform-origin is not supported in React Native. Class "${cls}" will be ignored.`,

package/src/parser/typography.ts

@@ -125,6 +125,7 @@ function parseArbitraryFontSize(value: string): number | null {
 
   // 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 font size value: ${value}. Only px values are supported (e.g., [18px] or [18]).`,
@@ -149,6 +150,7 @@ function parseArbitraryLineHeight(value: string): number | null {
 
   // 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 line height value: ${value}. Only px values are supported (e.g., [24px] or [24]).`,

package/src/stubs/tw.test.ts

@@ -0,0 +1,27 @@
+import { describe, expect, it } from "vitest";
+import { tw, twStyle } from "./tw";
+
+describe("tw stub", () => {
+  it("should throw error when tw() is called without Babel transformation", () => {
+    expect(() => tw`bg-blue-500`).toThrow(
+      "tw() must be transformed by the Babel plugin. " +
+        "Ensure @mgcrea/react-native-tailwind/babel is configured in your babel.config.js. " +
+        "For runtime parsing, use: import { tw } from '@mgcrea/react-native-tailwind/runtime'",
+    );
+  });
+
+  it("should throw error when twStyle() is called without Babel transformation", () => {
+    expect(() => twStyle("bg-blue-500")).toThrow(
+      "twStyle() must be transformed by the Babel plugin. " +
+        "Ensure @mgcrea/react-native-tailwind/babel is configured in your babel.config.js. " +
+        "For runtime parsing, use: import { twStyle } from '@mgcrea/react-native-tailwind/runtime'",
+    );
+  });
+
+  it("should throw error with template literal interpolation", () => {
+    const dynamic = "active";
+    expect(() => tw`bg-blue-500 ${dynamic}:bg-blue-700`).toThrow(
+      "tw() must be transformed by the Babel plugin",
+    );
+  });
+});

package/src/utils/flattenColors.test.ts

@@ -358,4 +358,104 @@ describe("flattenColors", () => {
 
     expect(keys).toEqual(["z", "a", "m"]);
   });
+
+  it("should handle DEFAULT key in color scale objects", () => {
+    const colors = {
+      primary: {
+        "50": "#eefdfd",
+        "100": "#d4f9f9",
+        "200": "#aef2f3",
+        "500": "#1bacb5",
+        "900": "#1e4f5b",
+        DEFAULT: "#1bacb5",
+      },
+    };
+
+    expect(flattenColors(colors)).toEqual({
+      primary: "#1bacb5", // DEFAULT becomes the parent key
+      "primary-50": "#eefdfd",
+      "primary-100": "#d4f9f9",
+      "primary-200": "#aef2f3",
+      "primary-500": "#1bacb5",
+      "primary-900": "#1e4f5b",
+    });
+  });
+
+  it("should handle DEFAULT key with multiple color scales", () => {
+    const colors = {
+      primary: {
+        DEFAULT: "#1bacb5",
+        "500": "#1bacb5",
+      },
+      secondary: {
+        DEFAULT: "#ff6b6b",
+        "500": "#ff6b6b",
+      },
+    };
+
+    expect(flattenColors(colors)).toEqual({
+      primary: "#1bacb5",
+      "primary-500": "#1bacb5",
+      secondary: "#ff6b6b",
+      "secondary-500": "#ff6b6b",
+    });
+  });
+
+  it("should handle DEFAULT key in nested structures", () => {
+    const colors = {
+      brand: {
+        primary: {
+          DEFAULT: "#1bacb5",
+          light: "#d4f9f9",
+          dark: "#0e343e",
+        },
+      },
+    };
+
+    expect(flattenColors(colors)).toEqual({
+      "brand-primary": "#1bacb5", // DEFAULT uses parent key
+      "brand-primary-light": "#d4f9f9",
+      "brand-primary-dark": "#0e343e",
+    });
+  });
+
+  it("should handle DEFAULT at top level (edge case)", () => {
+    const colors = {
+      DEFAULT: "#000000",
+      primary: "#ff0000",
+    };
+
+    expect(flattenColors(colors)).toEqual({
+      DEFAULT: "#000000", // Top-level DEFAULT kept as-is (no parent)
+      primary: "#ff0000",
+    });
+  });
+
+  it("should handle mixed DEFAULT and regular keys", () => {
+    const colors = {
+      gray: {
+        "50": "#f9fafb",
+        "100": "#f3f4f6",
+        DEFAULT: "#6b7280",
+        "500": "#6b7280",
+        "900": "#111827",
+      },
+      white: "#ffffff",
+      brand: {
+        DEFAULT: "#ff6b6b",
+        accent: "#4ecdc4",
+      },
+    };
+
+    expect(flattenColors(colors)).toEqual({
+      "gray-50": "#f9fafb",
+      "gray-100": "#f3f4f6",
+      gray: "#6b7280", // DEFAULT becomes parent key
+      "gray-500": "#6b7280",
+      "gray-900": "#111827",
+      white: "#ffffff",
+      brand: "#ff6b6b", // DEFAULT becomes parent key
+      "brand-accent": "#4ecdc4",
+    });
+  });
 });

package/src/utils/flattenColors.ts

@@ -8,6 +8,7 @@ type NestedColors = {
 /**
  * Flatten nested color objects into flat key-value map
  * Example: { brand: { light: '#fff', dark: '#000' } } => { 'brand-light': '#fff', 'brand-dark': '#000' }
+ * Special handling for DEFAULT: { primary: { DEFAULT: '#000', 500: '#333' } } => { 'primary': '#000', 'primary-500': '#333' }
  *
  * @param colors - Nested color object where values can be strings or objects
  * @param prefix - Optional prefix for nested keys (used for recursion)
@@ -17,7 +18,8 @@ export function flattenColors(colors: NestedColors, prefix = ""): Record<string,
   const result: Record<string, string> = {};
 
   for (const [key, value] of Object.entries(colors)) {
-    const newKey = prefix ? `${prefix}-${key}` : key;
+    // Special handling for DEFAULT key - use parent key without suffix
+    const newKey = key === "DEFAULT" && prefix ? prefix : prefix ? `${prefix}-${key}` : key;
 
     if (typeof value === "string") {
       result[newKey] = value;