@mgcrea/react-native-tailwind 0.8.1 → 0.9.0

package/dist/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[];
@@ -90,6 +100,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 +128,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,6 +154,13 @@ 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;
+          });
+
           if (hasStyleSheet) {
             state.hasStyleSheetImport = true;
           } else {
@@ -143,6 +168,10 @@ export default function reactNativeTailwindBabelPlugin(
             node.specifiers.push(t.importSpecifier(t.identifier("StyleSheet"), t.identifier("StyleSheet")));
             state.hasStyleSheetImport = true;
           }
+
+          if (hasPlatform) {
+            state.hasPlatformImport = true;
+          }
         }
 
         // Track tw/twStyle imports from main package (for compile-time transformation)
@@ -291,12 +320,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 +354,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/dist/babel/utils/platformModifierProcessing.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Utility functions for processing platform modifiers (ios:, android:, web:)
+ */
+import type * as BabelTypes from "@babel/types";
+import type { ParsedModifier } from "../../parser/index.js";
+import type { StyleObject } from "../../types/core.js";
+/**
+ * Plugin state interface (subset needed for platform modifier processing)
+ */
+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 declare function processPlatformModifiers(platformModifiers: ParsedModifier[], state: PlatformModifierProcessingState, parseClassName: (className: string, customColors: Record<string, string>) => StyleObject, generateStyleKey: (className: string) => string, t: typeof BabelTypes): BabelTypes.Expression;

package/dist/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/dist/babel/utils/styleInjection.d.ts

@@ -8,6 +8,10 @@ import type { StyleObject } from "../../types/core.js";
  * Add StyleSheet import to the file
  */
 export declare function addStyleSheetImport(path: NodePath<BabelTypes.Program>, t: typeof BabelTypes): void;
+/**
+ * Add Platform import to the file or merge with existing react-native import
+ */
+export declare function addPlatformImport(path: NodePath<BabelTypes.Program>, t: typeof BabelTypes): void;
 /**
  * Inject StyleSheet.create with all collected styles at the top of the file
  * This ensures the styles object is defined before any code that references it

package/dist/babel/utils/styleInjection.ts

@@ -19,6 +19,34 @@ export function addStyleSheetImport(path: NodePath<BabelTypes.Program>, t: typeo
   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);
+  }
+}
+
 /**
  * Inject StyleSheet.create with all collected styles at the top of the file
  * This ensures the styles object is defined before any code that references it

package/dist/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/dist/parser/index.d.ts

@@ -27,5 +27,5 @@ export { parseSizing } from "./sizing";
 export { parseSpacing } from "./spacing";
 export { parseTransform } from "./transforms";
 export { parseTypography } from "./typography";
-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/dist/parser/index.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"hasModifier",{enumerable:true,get:function get(){return _modifiers.hasModifier;}});Object.defineProperty(exports,"parseAspectRatio",{enumerable:true,get:function get(){return _aspectRatio.parseAspectRatio;}});Object.defineProperty(exports,"parseBorder",{enumerable:true,get:function get(){return _borders.parseBorder;}});exports.parseClass=parseClass;exports.parseClassName=parseClassName;Object.defineProperty(exports,"parseColor",{enumerable:true,get:function get(){return _colors.parseColor;}});Object.defineProperty(exports,"parseLayout",{enumerable:true,get:function get(){return _layout.parseLayout;}});Object.defineProperty(exports,"parseModifier",{enumerable:true,get:function get(){return _modifiers.parseModifier;}});Object.defineProperty(exports,"parsePlaceholderClass",{enumerable:true,get:function get(){return _placeholder.parsePlaceholderClass;}});Object.defineProperty(exports,"parsePlaceholderClasses",{enumerable:true,get:function get(){return _placeholder.parsePlaceholderClasses;}});Object.defineProperty(exports,"parseShadow",{enumerable:true,get:function get(){return _shadows.parseShadow;}});Object.defineProperty(exports,"parseSizing",{enumerable:true,get:function get(){return _sizing.parseSizing;}});Object.defineProperty(exports,"parseSpacing",{enumerable:true,get:function get(){return _spacing.parseSpacing;}});Object.defineProperty(exports,"parseTransform",{enumerable:true,get:function get(){return _transforms.parseTransform;}});Object.defineProperty(exports,"parseTypography",{enumerable:true,get:function get(){return _typography.parseTypography;}});Object.defineProperty(exports,"splitModifierClasses",{enumerable:true,get:function get(){return _modifiers.splitModifierClasses;}});var _aspectRatio=require("./aspectRatio");var _borders=require("./borders");var _colors=require("./colors");var _layout=require("./layout");var _shadows=require("./shadows");var _sizing=require("./sizing");var _spacing=require("./spacing");var _transforms=require("./transforms");var _typography=require("./typography");var _placeholder=require("./placeholder");var _modifiers=require("./modifiers");function parseClassName(className,customColors){var classes=className.split(/\s+/).filter(Boolean);var style={};for(var cls of classes){var parsedStyle=parseClass(cls,customColors);Object.assign(style,parsedStyle);}return style;}function parseClass(cls,customColors){var parsers=[_spacing.parseSpacing,_borders.parseBorder,function(cls){return(0,_colors.parseColor)(cls,customColors);},_layout.parseLayout,_typography.parseTypography,_sizing.parseSizing,_shadows.parseShadow,_aspectRatio.parseAspectRatio,_transforms.parseTransform];for(var parser of parsers){var result=parser(cls);if(result!==null){return result;}}if(process.env.NODE_ENV!=="production"){console.warn(`[react-native-tailwind] Unknown class: "${cls}"`);}return{};}
+Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"hasModifier",{enumerable:true,get:function get(){return _modifiers.hasModifier;}});Object.defineProperty(exports,"isPlatformModifier",{enumerable:true,get:function get(){return _modifiers.isPlatformModifier;}});Object.defineProperty(exports,"isStateModifier",{enumerable:true,get:function get(){return _modifiers.isStateModifier;}});Object.defineProperty(exports,"parseAspectRatio",{enumerable:true,get:function get(){return _aspectRatio.parseAspectRatio;}});Object.defineProperty(exports,"parseBorder",{enumerable:true,get:function get(){return _borders.parseBorder;}});exports.parseClass=parseClass;exports.parseClassName=parseClassName;Object.defineProperty(exports,"parseColor",{enumerable:true,get:function get(){return _colors.parseColor;}});Object.defineProperty(exports,"parseLayout",{enumerable:true,get:function get(){return _layout.parseLayout;}});Object.defineProperty(exports,"parseModifier",{enumerable:true,get:function get(){return _modifiers.parseModifier;}});Object.defineProperty(exports,"parsePlaceholderClass",{enumerable:true,get:function get(){return _placeholder.parsePlaceholderClass;}});Object.defineProperty(exports,"parsePlaceholderClasses",{enumerable:true,get:function get(){return _placeholder.parsePlaceholderClasses;}});Object.defineProperty(exports,"parseShadow",{enumerable:true,get:function get(){return _shadows.parseShadow;}});Object.defineProperty(exports,"parseSizing",{enumerable:true,get:function get(){return _sizing.parseSizing;}});Object.defineProperty(exports,"parseSpacing",{enumerable:true,get:function get(){return _spacing.parseSpacing;}});Object.defineProperty(exports,"parseTransform",{enumerable:true,get:function get(){return _transforms.parseTransform;}});Object.defineProperty(exports,"parseTypography",{enumerable:true,get:function get(){return _typography.parseTypography;}});Object.defineProperty(exports,"splitModifierClasses",{enumerable:true,get:function get(){return _modifiers.splitModifierClasses;}});var _aspectRatio=require("./aspectRatio");var _borders=require("./borders");var _colors=require("./colors");var _layout=require("./layout");var _shadows=require("./shadows");var _sizing=require("./sizing");var _spacing=require("./spacing");var _transforms=require("./transforms");var _typography=require("./typography");var _placeholder=require("./placeholder");var _modifiers=require("./modifiers");function parseClassName(className,customColors){var classes=className.split(/\s+/).filter(Boolean);var style={};for(var cls of classes){var parsedStyle=parseClass(cls,customColors);Object.assign(style,parsedStyle);}return style;}function parseClass(cls,customColors){var parsers=[_spacing.parseSpacing,_borders.parseBorder,function(cls){return(0,_colors.parseColor)(cls,customColors);},_layout.parseLayout,_typography.parseTypography,_sizing.parseSizing,_shadows.parseShadow,_aspectRatio.parseAspectRatio,_transforms.parseTransform];for(var parser of parsers){var result=parser(cls);if(result!==null){return result;}}if(process.env.NODE_ENV!=="production"){console.warn(`[react-native-tailwind] Unknown class: "${cls}"`);}return{};}

package/dist/parser/modifiers.d.ts

@@ -1,7 +1,11 @@
 /**
- * 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;
     baseClass: string;
@@ -25,6 +29,20 @@ export declare function parseModifier(cls: string): ParsedModifier | null;
  * @returns true if class has a supported modifier prefix
  */
 export declare function hasModifier(cls: string): boolean;
+/**
+ * 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 declare function isStateModifier(modifier: ModifierType): modifier is 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 declare function isPlatformModifier(modifier: ModifierType): modifier is PlatformModifierType;
 /**
  * Split a space-separated className string into base and modifier classes
  *

package/dist/parser/modifiers.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:true});exports.hasModifier=hasModifier;exports.parseModifier=parseModifier;exports.splitModifierClasses=splitModifierClasses;var SUPPORTED_MODIFIERS=["active","hover","focus","disabled","placeholder"];function parseModifier(cls){var colonIndex=cls.indexOf(":");if(colonIndex===-1){return null;}var potentialModifier=cls.slice(0,colonIndex);var baseClass=cls.slice(colonIndex+1);if(!SUPPORTED_MODIFIERS.includes(potentialModifier)){return null;}if(baseClass.includes(":")){return null;}if(!baseClass){return null;}return{modifier:potentialModifier,baseClass:baseClass};}function hasModifier(cls){return parseModifier(cls)!==null;}function splitModifierClasses(className){var classes=className.trim().split(/\s+/).filter(Boolean);var baseClasses=[];var modifierClasses=[];for(var cls of classes){var parsed=parseModifier(cls);if(parsed){modifierClasses.push(parsed);}else{baseClasses.push(cls);}}return{baseClasses:baseClasses,modifierClasses:modifierClasses};}
+Object.defineProperty(exports,"__esModule",{value:true});exports.hasModifier=hasModifier;exports.isPlatformModifier=isPlatformModifier;exports.isStateModifier=isStateModifier;exports.parseModifier=parseModifier;exports.splitModifierClasses=splitModifierClasses;var STATE_MODIFIERS=["active","hover","focus","disabled","placeholder"];var PLATFORM_MODIFIERS=["ios","android","web"];var SUPPORTED_MODIFIERS=[].concat(STATE_MODIFIERS,PLATFORM_MODIFIERS);function parseModifier(cls){var colonIndex=cls.indexOf(":");if(colonIndex===-1){return null;}var potentialModifier=cls.slice(0,colonIndex);var baseClass=cls.slice(colonIndex+1);if(!SUPPORTED_MODIFIERS.includes(potentialModifier)){return null;}if(baseClass.includes(":")){return null;}if(!baseClass){return null;}return{modifier:potentialModifier,baseClass:baseClass};}function hasModifier(cls){return parseModifier(cls)!==null;}function isStateModifier(modifier){return STATE_MODIFIERS.includes(modifier);}function isPlatformModifier(modifier){return PLATFORM_MODIFIERS.includes(modifier);}function splitModifierClasses(className){var classes=className.trim().split(/\s+/).filter(Boolean);var baseClasses=[];var modifierClasses=[];for(var cls of classes){var parsed=parseModifier(cls);if(parsed){modifierClasses.push(parsed);}else{baseClasses.push(cls);}}return{baseClasses:baseClasses,modifierClasses:modifierClasses};}