@mgcrea/react-native-tailwind 0.8.1 → 0.9.0

package/src/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/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.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.`);
       }

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

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",
+    );
+  });
+});