@mgcrea/react-native-tailwind 0.8.1 → 0.9.1

package/src/babel/plugin.ts

@@ -5,7 +5,14 @@
 
 import type { NodePath, PluginObj, PluginPass } from "@babel/core";
 import * as BabelTypes from "@babel/types";
-import { parseClassName, parsePlaceholderClasses, splitModifierClasses } from "../parser/index.js";
+import type { ParsedModifier, StateModifierType } from "../parser/index.js";
+import {
+  isPlatformModifier,
+  isStateModifier,
+  parseClassName,
+  parsePlaceholderClasses,
+  splitModifierClasses,
+} from "../parser/index.js";
 import type { StyleObject } from "../types/core.js";
 import { generateStyleKey } from "../utils/styleKey.js";
 import { extractCustomColors } from "./config-loader.js";
@@ -17,10 +24,11 @@ import {
   getTargetStyleProp,
   isAttributeSupported,
 } from "./utils/attributeMatchers.js";
-import { getComponentModifierSupport } from "./utils/componentSupport.js";
+import { getComponentModifierSupport, getStatePropertyForModifier } from "./utils/componentSupport.js";
 import { processDynamicExpression } from "./utils/dynamicProcessing.js";
 import { createStyleFunction, processStaticClassNameWithModifiers } from "./utils/modifierProcessing.js";
-import { addStyleSheetImport, injectStylesAtTop } from "./utils/styleInjection.js";
+import { processPlatformModifiers } from "./utils/platformModifierProcessing.js";
+import { addPlatformImport, addStyleSheetImport, injectStylesAtTop } from "./utils/styleInjection.js";
 import {
   addOrMergePlaceholderTextColorProp,
   findStyleAttribute,
@@ -59,6 +67,8 @@ type PluginState = PluginPass & {
   styleRegistry: Map<string, StyleObject>;
   hasClassNames: boolean;
   hasStyleSheetImport: boolean;
+  hasPlatformImport: boolean;
+  needsPlatformImport: boolean;
   customColors: Record<string, string>;
   supportedAttributes: Set<string>;
   attributePatterns: RegExp[];
@@ -66,6 +76,8 @@ type PluginState = PluginPass & {
   // Track tw/twStyle imports from main package
   twImportNames: Set<string>; // e.g., ['tw', 'twStyle'] or ['tw as customTw']
   hasTwImport: boolean;
+  // Track react-native import path for conditional StyleSheet/Platform injection
+  reactNativeImportPath?: NodePath<BabelTypes.ImportDeclaration>;
 };
 
 // Default identifier for the generated StyleSheet constant
@@ -90,6 +102,8 @@ export default function reactNativeTailwindBabelPlugin(
           state.styleRegistry = new Map();
           state.hasClassNames = false;
           state.hasStyleSheetImport = false;
+          state.hasPlatformImport = false;
+          state.needsPlatformImport = false;
           state.supportedAttributes = exactMatches;
           state.attributePatterns = patterns;
           state.stylesIdentifier = stylesIdentifier;
@@ -116,19 +130,25 @@ export default function reactNativeTailwindBabelPlugin(
             addStyleSheetImport(path, t);
           }
 
+          // Add Platform import if platform modifiers were used and not already present
+          if (state.needsPlatformImport && !state.hasPlatformImport) {
+            addPlatformImport(path, t);
+          }
+
           // Generate and inject StyleSheet.create at the beginning of the file (after imports)
           // This ensures _twStyles is defined before any code that references it
           injectStylesAtTop(path, state.styleRegistry, state.stylesIdentifier, t);
         },
       },
 
-      // Check if StyleSheet is already imported and track tw/twStyle imports
+      // Check if StyleSheet/Platform are already imported and track tw/twStyle imports
       ImportDeclaration(path, state) {
         const node = path.node;
 
-        // Track react-native StyleSheet import
+        // Track react-native StyleSheet and Platform imports
         if (node.source.value === "react-native") {
           const specifiers = node.specifiers;
+
           const hasStyleSheet = specifiers.some((spec) => {
             if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
               return spec.imported.name === "StyleSheet";
@@ -136,13 +156,25 @@ export default function reactNativeTailwindBabelPlugin(
             return false;
           });
 
+          const hasPlatform = specifiers.some((spec) => {
+            if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
+              return spec.imported.name === "Platform";
+            }
+            return false;
+          });
+
+          // Only track if imports exist - don't mutate yet
+          // Actual import injection happens in Program.exit only if needed
           if (hasStyleSheet) {
             state.hasStyleSheetImport = true;
-          } else {
-            // Add StyleSheet to existing import
-            node.specifiers.push(t.importSpecifier(t.identifier("StyleSheet"), t.identifier("StyleSheet")));
-            state.hasStyleSheetImport = true;
           }
+
+          if (hasPlatform) {
+            state.hasPlatformImport = true;
+          }
+
+          // Store reference to the react-native import for later modification if needed
+          state.reactNativeImportPath = path;
         }
 
         // Track tw/twStyle imports from main package (for compile-time transformation)
@@ -291,12 +323,15 @@ export default function reactNativeTailwindBabelPlugin(
 
           state.hasClassNames = true;
 
-          // Check if className contains modifiers (active:, hover:, focus:, placeholder:)
+          // Check if className contains modifiers (active:, hover:, focus:, placeholder:, ios:, android:, web:)
           const { baseClasses, modifierClasses } = splitModifierClasses(className);
 
-          // Separate placeholder modifiers from state modifiers
+          // Separate modifiers by type
           const placeholderModifiers = modifierClasses.filter((m) => m.modifier === "placeholder");
-          const stateModifiers = modifierClasses.filter((m) => m.modifier !== "placeholder");
+          const platformModifiers = modifierClasses.filter((m) => isPlatformModifier(m.modifier));
+          const stateModifiers = modifierClasses.filter(
+            (m) => isStateModifier(m.modifier) && m.modifier !== "placeholder",
+          );
 
           // Handle placeholder modifiers first (they generate placeholderTextColor prop, not style)
           if (placeholderModifiers.length > 0) {
@@ -322,8 +357,153 @@ export default function reactNativeTailwindBabelPlugin(
             }
           }
 
-          // If there are state modifiers, check if this component supports them
-          if (stateModifiers.length > 0) {
+          // Handle combination of modifiers
+          const hasPlatformModifiers = platformModifiers.length > 0;
+          const hasStateModifiers = stateModifiers.length > 0;
+          const hasBaseClasses = baseClasses.length > 0;
+
+          // If we have both state and platform modifiers, or platform modifiers with complex state,
+          // we need to combine them in an array expression wrapped in an arrow function
+          if (hasStateModifiers && hasPlatformModifiers) {
+            // Get the JSX opening element for component support checking
+            const jsxOpeningElement = path.parent;
+            const componentSupport = getComponentModifierSupport(jsxOpeningElement, t);
+
+            if (componentSupport) {
+              // Build style array: [baseStyle, Platform.select(...), stateConditionals]
+              const styleArrayElements: BabelTypes.Expression[] = [];
+
+              // Add base classes
+              if (hasBaseClasses) {
+                const baseClassName = baseClasses.join(" ");
+                const baseStyleObject = parseClassName(baseClassName, state.customColors);
+                const baseStyleKey = generateStyleKey(baseClassName);
+                state.styleRegistry.set(baseStyleKey, baseStyleObject);
+                styleArrayElements.push(
+                  t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(baseStyleKey)),
+                );
+              }
+
+              // Add platform modifiers as Platform.select()
+              const platformSelectExpression = processPlatformModifiers(
+                platformModifiers,
+                state,
+                parseClassName,
+                generateStyleKey,
+                t,
+              );
+              styleArrayElements.push(platformSelectExpression);
+
+              // Add state modifiers as conditionals
+              // Group by modifier type
+              const modifiersByType = new Map<StateModifierType, ParsedModifier[]>();
+              for (const mod of stateModifiers) {
+                const modType = mod.modifier as StateModifierType;
+                if (!modifiersByType.has(modType)) {
+                  modifiersByType.set(modType, []);
+                }
+                modifiersByType.get(modType)?.push(mod);
+              }
+
+              // Build conditionals for each state modifier type
+              for (const [modifierType, modifiers] of modifiersByType) {
+                if (!componentSupport.supportedModifiers.includes(modifierType)) {
+                  continue; // Skip unsupported modifiers
+                }
+
+                const modifierClassNames = modifiers.map((m) => m.baseClass).join(" ");
+                const modifierStyleObject = parseClassName(modifierClassNames, state.customColors);
+                const modifierStyleKey = generateStyleKey(`${modifierType}_${modifierClassNames}`);
+                state.styleRegistry.set(modifierStyleKey, modifierStyleObject);
+
+                const stateProperty = getStatePropertyForModifier(modifierType);
+                const conditionalExpression = t.logicalExpression(
+                  "&&",
+                  t.identifier(stateProperty),
+                  t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(modifierStyleKey)),
+                );
+
+                styleArrayElements.push(conditionalExpression);
+              }
+
+              // Wrap in arrow function for state support
+              const usedModifiers = Array.from(new Set(stateModifiers.map((m) => m.modifier))).filter((mod) =>
+                componentSupport.supportedModifiers.includes(mod),
+              );
+              const styleArrayExpression = t.arrayExpression(styleArrayElements);
+              const styleFunctionExpression = createStyleFunction(styleArrayExpression, usedModifiers, t);
+
+              const styleAttribute = findStyleAttribute(path, targetStyleProp, t);
+              if (styleAttribute) {
+                mergeStyleFunctionAttribute(path, styleAttribute, styleFunctionExpression, t);
+              } else {
+                replaceWithStyleFunctionAttribute(path, styleFunctionExpression, targetStyleProp, t);
+              }
+              return;
+            } else {
+              // Component doesn't support state modifiers, but we can still use platform modifiers
+              // Fall through to platform-only handling
+            }
+          }
+
+          // Handle platform-only modifiers (no state modifiers)
+          if (hasPlatformModifiers && !hasStateModifiers) {
+            // Build style array/expression: [baseStyle, Platform.select(...)]
+            const styleExpressions: BabelTypes.Expression[] = [];
+
+            // Add base classes
+            if (hasBaseClasses) {
+              const baseClassName = baseClasses.join(" ");
+              const baseStyleObject = parseClassName(baseClassName, state.customColors);
+              const baseStyleKey = generateStyleKey(baseClassName);
+              state.styleRegistry.set(baseStyleKey, baseStyleObject);
+              styleExpressions.push(
+                t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(baseStyleKey)),
+              );
+            }
+
+            // Add platform modifiers as Platform.select()
+            const platformSelectExpression = processPlatformModifiers(
+              platformModifiers,
+              state,
+              parseClassName,
+              generateStyleKey,
+              t,
+            );
+            styleExpressions.push(platformSelectExpression);
+
+            // Generate style attribute
+            const styleExpression =
+              styleExpressions.length === 1 ? styleExpressions[0] : t.arrayExpression(styleExpressions);
+
+            const styleAttribute = findStyleAttribute(path, targetStyleProp, t);
+            if (styleAttribute) {
+              // Merge with existing style attribute
+              const existingStyle = styleAttribute.value;
+              if (
+                t.isJSXExpressionContainer(existingStyle) &&
+                !t.isJSXEmptyExpression(existingStyle.expression)
+              ) {
+                const existing = existingStyle.expression;
+                // Merge as array: [ourStyles, existingStyles]
+                const mergedArray = t.isArrayExpression(existing)
+                  ? t.arrayExpression([styleExpression, ...existing.elements])
+                  : t.arrayExpression([styleExpression, existing]);
+                styleAttribute.value = t.jsxExpressionContainer(mergedArray);
+              } else {
+                styleAttribute.value = t.jsxExpressionContainer(styleExpression);
+              }
+              path.remove();
+            } else {
+              // Replace className with style prop containing our expression
+              path.node.name = t.jsxIdentifier(targetStyleProp);
+              path.node.value = t.jsxExpressionContainer(styleExpression);
+            }
+            return;
+          }
+
+          // If there are state modifiers (and no platform modifiers), check if this component supports them
+          if (hasStateModifiers) {
             // Get the JSX opening element (the direct parent of the attribute)
             const jsxOpeningElement = path.parent;
             const componentSupport = getComponentModifierSupport(jsxOpeningElement, t);

package/src/babel/utils/platformModifierProcessing.ts

@@ -0,0 +1,80 @@
+/**
+ * Utility functions for processing platform modifiers (ios:, android:, web:)
+ */
+
+import type * as BabelTypes from "@babel/types";
+import type { ParsedModifier, PlatformModifierType } from "../../parser/index.js";
+import type { StyleObject } from "../../types/core.js";
+
+/**
+ * Plugin state interface (subset needed for platform modifier processing)
+ */
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+export interface PlatformModifierProcessingState {
+  styleRegistry: Map<string, StyleObject>;
+  customColors: Record<string, string>;
+  stylesIdentifier: string;
+  needsPlatformImport: boolean;
+}
+
+/**
+ * Process platform modifiers and generate Platform.select() expression
+ *
+ * @param platformModifiers - Array of parsed platform modifiers
+ * @param state - Plugin state
+ * @param parseClassName - Function to parse class names into style objects
+ * @param generateStyleKey - Function to generate unique style keys
+ * @param t - Babel types
+ * @returns AST node for Platform.select() call
+ *
+ * @example
+ * Input: [{ modifier: "ios", baseClass: "shadow-lg" }, { modifier: "android", baseClass: "elevation-4" }]
+ * Output: Platform.select({ ios: styles._ios_shadow_lg, android: styles._android_elevation_4 })
+ */
+export function processPlatformModifiers(
+  platformModifiers: ParsedModifier[],
+  state: PlatformModifierProcessingState,
+  parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
+  generateStyleKey: (className: string) => string,
+  t: typeof BabelTypes,
+): BabelTypes.Expression {
+  // Mark that we need Platform import
+  state.needsPlatformImport = true;
+
+  // Group modifiers by platform
+  const modifiersByPlatform = new Map<PlatformModifierType, ParsedModifier[]>();
+
+  for (const mod of platformModifiers) {
+    const platform = mod.modifier as PlatformModifierType;
+    if (!modifiersByPlatform.has(platform)) {
+      modifiersByPlatform.set(platform, []);
+    }
+    const platformGroup = modifiersByPlatform.get(platform);
+    if (platformGroup) {
+      platformGroup.push(mod);
+    }
+  }
+
+  // Build Platform.select() object properties
+  const selectProperties: BabelTypes.ObjectProperty[] = [];
+
+  for (const [platform, modifiers] of modifiersByPlatform) {
+    // Parse all classes for this platform together
+    const classNames = modifiers.map((m) => m.baseClass).join(" ");
+    const styleObject = parseClassName(classNames, state.customColors);
+    const styleKey = generateStyleKey(`${platform}_${classNames}`);
+
+    // Register style in the registry
+    state.styleRegistry.set(styleKey, styleObject);
+
+    // Create property: ios: styles._ios_shadow_lg
+    const styleReference = t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(styleKey));
+
+    selectProperties.push(t.objectProperty(t.identifier(platform), styleReference));
+  }
+
+  // Create Platform.select({ ios: ..., android: ... })
+  return t.callExpression(t.memberExpression(t.identifier("Platform"), t.identifier("select")), [
+    t.objectExpression(selectProperties),
+  ]);
+}

package/src/babel/utils/styleInjection.ts

@@ -7,16 +7,61 @@ import type * as BabelTypes from "@babel/types";
 import type { StyleObject } from "../../types/core.js";
 
 /**
- * Add StyleSheet import to the file
+ * Add StyleSheet import to the file or merge with existing react-native import
  */
 export function addStyleSheetImport(path: NodePath<BabelTypes.Program>, t: typeof BabelTypes): void {
-  const importDeclaration = t.importDeclaration(
-    [t.importSpecifier(t.identifier("StyleSheet"), t.identifier("StyleSheet"))],
-    t.stringLiteral("react-native"),
-  );
+  // Check if there's already a react-native import
+  const body = path.node.body;
+  let reactNativeImport: BabelTypes.ImportDeclaration | null = null;
+
+  for (const statement of body) {
+    if (t.isImportDeclaration(statement) && statement.source.value === "react-native") {
+      reactNativeImport = statement;
+      break;
+    }
+  }
 
-  // Add import at the top of the file
-  path.unshiftContainer("body", importDeclaration);
+  if (reactNativeImport) {
+    // Add StyleSheet to existing react-native import
+    reactNativeImport.specifiers.push(
+      t.importSpecifier(t.identifier("StyleSheet"), t.identifier("StyleSheet")),
+    );
+  } else {
+    // Create new react-native import with StyleSheet
+    const importDeclaration = t.importDeclaration(
+      [t.importSpecifier(t.identifier("StyleSheet"), t.identifier("StyleSheet"))],
+      t.stringLiteral("react-native"),
+    );
+    path.unshiftContainer("body", importDeclaration);
+  }
+}
+
+/**
+ * Add Platform import to the file or merge with existing react-native import
+ */
+export function addPlatformImport(path: NodePath<BabelTypes.Program>, t: typeof BabelTypes): void {
+  // Check if there's already a react-native import
+  const body = path.node.body;
+  let reactNativeImport: BabelTypes.ImportDeclaration | null = null;
+
+  for (const statement of body) {
+    if (t.isImportDeclaration(statement) && statement.source.value === "react-native") {
+      reactNativeImport = statement;
+      break;
+    }
+  }
+
+  if (reactNativeImport) {
+    // Add Platform to existing react-native import
+    reactNativeImport.specifiers.push(t.importSpecifier(t.identifier("Platform"), t.identifier("Platform")));
+  } else {
+    // Create new react-native import with Platform
+    const importDeclaration = t.importDeclaration(
+      [t.importSpecifier(t.identifier("Platform"), t.identifier("Platform"))],
+      t.stringLiteral("react-native"),
+    );
+    path.unshiftContainer("body", importDeclaration);
+  }
 }
 
 /**

package/src/babel/utils/styleTransforms.ts

@@ -242,6 +242,7 @@ export function addOrMergePlaceholderTextColorProp(
   if (existingProp) {
     // If explicit prop exists, don't override it (explicit props take precedence)
     // This matches the behavior of style prop precedence
+    /* v8 ignore next 5 */
     if (process.env.NODE_ENV !== "production") {
       console.warn(
         `[react-native-tailwind] placeholderTextColor prop will be overridden by className placeholder: modifier. ` +

package/src/parser/aspectRatio.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, it } from "vitest";
 import { ASPECT_RATIO_PRESETS, parseAspectRatio } from "./aspectRatio";
+import { parseClassName } from "./index";
 
 describe("ASPECT_RATIO_PRESETS", () => {
   it("should export aspect ratio presets", () => {
@@ -29,8 +30,8 @@ describe("parseAspectRatio - preset values", () => {
   });
 
   it("should parse aspect-auto", () => {
-    // aspect-auto removes the aspect ratio constraint
-    expect(parseAspectRatio("aspect-auto")).toEqual({});
+    // aspect-auto removes the aspect ratio constraint by explicitly setting to undefined
+    expect(parseAspectRatio("aspect-auto")).toEqual({ aspectRatio: undefined });
   });
 });
 
@@ -131,6 +132,28 @@ describe("parseAspectRatio - type validation", () => {
   });
 });
 
+describe("parseAspectRatio - override behavior", () => {
+  it("should allow aspect-auto to override previously set aspect ratios", () => {
+    // This tests the fix for issue #3 - aspect-auto must explicitly set aspectRatio: undefined
+    // to override previous aspect ratio values when using Object.assign
+    const result = parseClassName("aspect-square aspect-auto");
+    expect(result).toEqual({ aspectRatio: undefined });
+  });
+
+  it("should allow aspect ratios to override aspect-auto", () => {
+    const result = parseClassName("aspect-auto aspect-square");
+    expect(result).toEqual({ aspectRatio: 1 });
+  });
+
+  it("should apply last aspect ratio in sequence", () => {
+    const result = parseClassName("aspect-square aspect-video aspect-auto");
+    expect(result).toEqual({ aspectRatio: undefined });
+
+    const result2 = parseClassName("aspect-auto aspect-square aspect-video");
+    expect(result2).toEqual({ aspectRatio: 16 / 9 });
+  });
+});
+
 describe("parseAspectRatio - comprehensive coverage", () => {
   it("should parse all preset variants without errors", () => {
     const presets = ["aspect-auto", "aspect-square", "aspect-video"];

package/src/parser/aspectRatio.ts

@@ -26,6 +26,7 @@ function parseArbitraryAspectRatio(value: string): number | null {
     const denominator = Number.parseInt(match[2], 10);
 
     if (denominator === 0) {
+      /* v8 ignore next 3 */
       if (process.env.NODE_ENV !== "production") {
         console.warn(`[react-native-tailwind] Invalid aspect ratio: ${value}. Denominator cannot be zero.`);
       }
@@ -51,10 +52,10 @@ export function parseAspectRatio(cls: string): StyleObject | null {
   // Check for preset values
   if (cls in ASPECT_RATIO_PRESETS) {
     const aspectRatio = ASPECT_RATIO_PRESETS[cls];
-    // aspect-auto removes the aspect ratio constraint by returning empty object
-    // (this effectively unsets the aspectRatio property)
+    // aspect-auto removes the aspect ratio constraint by explicitly setting to undefined
+    // This ensures it overrides any previously set aspectRatio in Object.assign
     if (aspectRatio === undefined) {
-      return {};
+      return { aspectRatio: undefined };
     }
     return { aspectRatio };
   }

package/src/parser/borders.ts

@@ -69,6 +69,7 @@ function parseArbitraryBorderWidth(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 border width value: ${value}. Only px values are supported (e.g., [8px] or [8]).`,
@@ -93,6 +94,7 @@ function parseArbitraryBorderRadius(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 border radius value: ${value}. Only px values are supported (e.g., [12px] or [12]).`,

package/src/parser/colors.ts

@@ -70,6 +70,7 @@ function parseArbitraryColor(value: string): string | 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 color value: ${value}. Only hex colors are supported (e.g., [#ff0000], [#f00], or [#ff0000aa]).`,
@@ -101,6 +102,7 @@ export function parseColor(cls: string, customColors?: Record<string, string>):
 
       // Validate opacity range (0-100)
       if (opacity < 0 || opacity > 100) {
+        /* v8 ignore next 5 */
         if (process.env.NODE_ENV !== "production") {
           console.warn(
             `[react-native-tailwind] Invalid opacity value: ${opacity}. Opacity must be between 0 and 100.`,

package/src/parser/index.ts

@@ -62,6 +62,7 @@ export function parseClass(cls: string, customColors?: Record<string, string>):
   }
 
   // Warn about unknown class in development
+  /* v8 ignore next 3 */
   if (process.env.NODE_ENV !== "production") {
     console.warn(`[react-native-tailwind] Unknown class: "${cls}"`);
   }
@@ -82,5 +83,11 @@ export { parseTransform } from "./transforms";
 export { parseTypography } from "./typography";
 
 // Re-export modifier utilities
-export { hasModifier, parseModifier, splitModifierClasses } from "./modifiers";
-export type { ModifierType, ParsedModifier } from "./modifiers";
+export {
+  hasModifier,
+  isPlatformModifier,
+  isStateModifier,
+  parseModifier,
+  splitModifierClasses,
+} from "./modifiers";
+export type { ModifierType, ParsedModifier, PlatformModifierType, StateModifierType } from "./modifiers";

package/src/parser/layout.ts

@@ -23,6 +23,7 @@ function parseArbitraryInset(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 inset unit: ${value}. Only px and % are supported.`,
@@ -47,6 +48,7 @@ function parseArbitraryZIndex(value: string): number | null {
 
   // Unsupported format - warn and reject
   if (value.startsWith("[") && value.endsWith("]")) {
+    /* v8 ignore next 5 */
     if (process.env.NODE_ENV !== "production") {
       console.warn(
         `[react-native-tailwind] Invalid arbitrary z-index: ${value}. Only integers are supported.`,

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. ` +