@mgcrea/react-native-tailwind 0.12.0 → 0.13.0

package/{src/babel/plugin.test.ts → dist/babel/plugin/visitors/className.test.ts}

@@ -1,236 +1,8 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
-import { transformSync } from "@babel/core";
 import { describe, expect, it, vi } from "vitest";
-import babelPlugin, { type PluginOptions } from "./plugin.js";
-
-/**
- * Helper to transform code with the Babel plugin
- */
-function transform(code: string, options?: PluginOptions, includeJsx = false) {
-  const presets = includeJsx
-    ? ["@babel/preset-react", ["@babel/preset-typescript", { isTSX: true, allExtensions: true }]]
-    : [];
-
-  const result = transformSync(code, {
-    presets,
-    plugins: [[babelPlugin, options]],
-    filename: "test.tsx",
-    configFile: false,
-    babelrc: false,
-  });
-
-  return result?.code ?? "";
-}
-
-describe("Babel plugin - tw template tag transformation", () => {
-  it("should transform simple tw template literal", () => {
-    const input = `
-      import { tw } from '@mgcrea/react-native-tailwind';
-      const styles = tw\`bg-blue-500 m-4\`;
-    `;
-
-    const output = transform(input);
-
-    // Should have StyleSheet import (either ESM or CommonJS)
-    expect(output).toMatch(/import.*StyleSheet.*from "react-native"|require\("react-native"\)/);
-    expect(output).toContain("StyleSheet");
-
-    // Should have _twStyles definition
-    expect(output).toContain("_twStyles");
-    expect(output).toContain("StyleSheet.create");
-
-    // Should transform tw call to object with style property
-    expect(output).toContain("style:");
-    expect(output).toContain("_twStyles._bg_blue_500_m_4");
-
-    // Should remove tw import
-    expect(output).not.toContain("from '@mgcrea/react-native-tailwind'");
-  });
-
-  it("should transform tw with state modifiers", () => {
-    const input = `
-      import { tw } from '@mgcrea/react-native-tailwind';
-      const styles = tw\`bg-blue-500 active:bg-blue-700 disabled:bg-gray-300\`;
-    `;
-
-    const output = transform(input);
-
-    // Should have base style
-    expect(output).toContain("style:");
-    expect(output).toContain("_bg_blue_500");
-
-    // Should have activeStyle
-    expect(output).toContain("activeStyle:");
-    expect(output).toContain("_active_bg_blue_700");
-
-    // Should have disabledStyle
-    expect(output).toContain("disabledStyle:");
-    expect(output).toContain("_disabled_bg_gray_300");
-
-    // Should create StyleSheet with all styles
-    expect(output).toContain("backgroundColor:");
-  });
-
-  it("should inject StyleSheet.create after imports", () => {
-    const input = `
-      import { tw } from '@mgcrea/react-native-tailwind';
-      import { View } from 'react-native';
-
-      const styles = tw\`m-4\`;
-    `;
-
-    const output = transform(input);
-
-    // Find the position of imports and StyleSheet.create
-    const viewImportPos = output.indexOf('require("react-native")');
-    const styleSheetCreatePos = output.indexOf("_twStyles");
-
-    // StyleSheet.create should come after imports
-    expect(styleSheetCreatePos).toBeGreaterThan(viewImportPos);
-  });
-
-  it("should handle tw in object literals", () => {
-    const input = `
-      import { tw } from '@mgcrea/react-native-tailwind';
-
-      const sizeVariants = {
-        sm: {
-          container: tw\`h-9 px-3\`,
-          text: tw\`text-sm\`,
-        },
-      };
-    `;
-
-    const output = transform(input);
-
-    // Should define _twStyles before object literal
-    const twStylesPos = output.indexOf("_twStyles");
-    const sizeVariantsPos = output.indexOf("sizeVariants");
-
-    expect(twStylesPos).toBeGreaterThan(0);
-    expect(twStylesPos).toBeLessThan(sizeVariantsPos);
-
-    // Should have both styles
-    expect(output).toContain("_h_9_px_3");
-    expect(output).toContain("_text_sm");
-  });
-
-  it("should handle empty tw template literal", () => {
-    const input = `
-      import { tw } from '@mgcrea/react-native-tailwind';
-      const styles = tw\`\`;
-    `;
-
-    const output = transform(input);
-
-    // Should replace with empty style object
-    expect(output).toContain("style:");
-    expect(output).toContain("{}");
-  });
-
-  it("should preserve other imports from the same package", () => {
-    const input = `
-      import { tw, TwStyle, COLORS } from '@mgcrea/react-native-tailwind';
-      const styles = tw\`m-4\`;
-    `;
-
-    const output = transform(input);
-
-    // Should remove tw but keep other imports
-    expect(output).not.toContain('"tw"');
-    expect(output).toContain("TwStyle");
-    expect(output).toContain("COLORS");
-  });
-
-  it("should handle renamed tw import", () => {
-    const input = `
-      import { tw as customTw } from '@mgcrea/react-native-tailwind';
-      const styles = customTw\`m-4 p-2\`;
-    `;
-
-    const output = transform(input);
-
-    // Should still transform the renamed import
-    expect(output).toContain("_twStyles");
-    expect(output).toContain("_m_4_p_2");
-    expect(output).not.toContain("customTw");
-  });
-
-  it("should handle multiple tw calls", () => {
-    const input = `
-      import { tw } from '@mgcrea/react-native-tailwind';
-      const style1 = tw\`bg-red-500\`;
-      const style2 = tw\`bg-blue-500\`;
-      const style3 = tw\`bg-green-500\`;
-    `;
-
-    const output = transform(input);
-
-    // Should have all three styles in StyleSheet
-    expect(output).toContain("_bg_red_500");
-    expect(output).toContain("_bg_blue_500");
-    expect(output).toContain("_bg_green_500");
-
-    // Should have StyleSheet.create with all styles
-    expect(output).toContain("StyleSheet.create");
-  });
-
-  it("should use custom stylesIdentifier option", () => {
-    const input = `
-      import { tw } from '@mgcrea/react-native-tailwind';
-      const styles = tw\`m-4\`;
-    `;
-
-    const output = transform(input, { stylesIdentifier: "myStyles" });
-
-    // Should use custom identifier
-    expect(output).toContain("myStyles");
-    expect(output).toContain("myStyles._m_4");
-    expect(output).not.toContain("_twStyles");
-  });
-});
-
-describe("Babel plugin - twStyle function transformation", () => {
-  it("should transform twStyle function call", () => {
-    const input = `
-      import { twStyle } from '@mgcrea/react-native-tailwind';
-      const styles = twStyle('bg-blue-500 m-4');
-    `;
-
-    const output = transform(input);
-
-    // Should transform to object with style property
-    expect(output).toContain("style:");
-    expect(output).toContain("_twStyles._bg_blue_500_m_4");
-  });
-
-  it("should transform twStyle with modifiers", () => {
-    const input = `
-      import { twStyle } from '@mgcrea/react-native-tailwind';
-      const styles = twStyle('bg-blue-500 active:bg-blue-700');
-    `;
-
-    const output = transform(input);
-
-    expect(output).toContain("style:");
-    expect(output).toContain("activeStyle:");
-  });
-
-  it("should handle empty twStyle call", () => {
-    const input = `
-      import { twStyle } from '@mgcrea/react-native-tailwind';
-      const styles = twStyle('');
-    `;
-
-    const output = transform(input);
-
-    // Should replace with undefined
-    expect(output).toContain("undefined");
-  });
-});
+import { transform } from "../../../../test/helpers/babelTransform.js";
 
-// Note: JSX tests require @babel/preset-react
-describe("Babel plugin - className transformation (existing behavior)", () => {
+describe("className visitor - basic transformation", () => {
   it("should still transform className props", () => {
     const input = `
       import { View } from 'react-native';
@@ -419,7 +191,7 @@ describe("Babel plugin - className transformation (existing behavior)", () => {
   });
 });
 
-describe("Babel plugin - placeholder: modifier transformation", () => {
+describe("className visitor - placeholder: modifier", () => {
   it("should transform placeholder:text-{color} to placeholderTextColor prop", () => {
     const input = `
       import { TextInput } from 'react-native';
@@ -566,7 +338,7 @@ describe("Babel plugin - placeholder: modifier transformation", () => {
   });
 });
 
-describe("Babel plugin - platform modifier transformation", () => {
+describe("className visitor - platform modifiers", () => {
   it("should transform platform modifiers to Platform.select()", () => {
     const input = `
       import React from 'react';
@@ -807,7 +579,7 @@ describe("Babel plugin - platform modifier transformation", () => {
   });
 });
 
-describe("Babel plugin - color scheme modifier transformation", () => {
+describe("className visitor - color scheme modifiers", () => {
   it("should transform dark: modifier to conditional expression", () => {
     const input = `
       import React from 'react';
@@ -1107,7 +879,7 @@ describe("Babel plugin - color scheme modifier transformation", () => {
   });
 });
 
-describe("Babel plugin - custom color scheme hook import", () => {
+describe("className visitor - custom color scheme hook", () => {
   it("should use custom import source for color scheme hook", () => {
     const input = `
       import React from 'react';
@@ -1407,506 +1179,134 @@ describe("Babel plugin - custom color scheme hook import", () => {
   });
 });
 
-describe("Babel plugin - import injection", () => {
-  it("should not add StyleSheet import to files without className usage", () => {
+describe("className visitor - directional border colors", () => {
+  it("should transform directional border colors with preset values", () => {
     const input = `
-      import { View, Text } from 'react-native';
-
-      function MyComponent() {
-        return <View><Text>Hello</Text></View>;
+      import { View } from 'react-native';
+      export function Component() {
+        return <View className="border-t-red-500 border-l-blue-500" />;
       }
     `;
 
     const output = transform(input, undefined, true);
 
-    // Should not mutate the import by adding StyleSheet
-    // Count occurrences of "StyleSheet" in output
-    const styleSheetCount = (output.match(/StyleSheet/g) ?? []).length;
-    expect(styleSheetCount).toBe(0);
+    // Should have StyleSheet
+    expect(output).toContain("StyleSheet.create");
 
-    // Should not have _twStyles definition
-    expect(output).not.toContain("_twStyles");
-    expect(output).not.toContain("StyleSheet.create");
+    // Should generate styles with borderTopColor and borderLeftColor
+    expect(output).toMatch(/borderTopColor[:\s]*['"]#[0-9A-F]{6}['"]/i);
+    expect(output).toMatch(/borderLeftColor[:\s]*['"]#[0-9A-F]{6}['"]/i);
 
-    // Original imports should remain unchanged
-    expect(output).toContain("View");
-    expect(output).toContain("Text");
+    // Should not have className in output
+    expect(output).not.toContain("className");
   });
 
-  it("should add StyleSheet import only when className is used", () => {
+  it("should combine directional border width and color", () => {
     const input = `
       import { View } from 'react-native';
-
-      function MyComponent() {
-        return <View className="m-4 p-2" />;
+      export function Component() {
+        return <View className="border-l-2 border-l-red-500" />;
       }
     `;
 
     const output = transform(input, undefined, true);
 
-    // Should have StyleSheet import (both single and double quotes)
-    expect(output).toMatch(/import.*StyleSheet.*from ['"]react-native['"]|require\(['"]react-native['"]\)/);
+    // Should have both borderLeftWidth and borderLeftColor in the StyleSheet
+    expect(output).toMatch(/borderLeftWidth[:\s]*2/);
+    expect(output).toMatch(/borderLeftColor[:\s]*['"]#[0-9A-F]{6}['"]/i);
 
-    // Should have _twStyles definition
-    expect(output).toContain("_twStyles");
-    expect(output).toContain("StyleSheet.create");
+    // Should not have className in output
+    expect(output).not.toContain("className");
   });
 
-  it("should add Platform import only when platform modifiers are used", () => {
+  it("should support directional border colors with opacity", () => {
     const input = `
       import { View } from 'react-native';
-
-      function MyComponent() {
-        return <View className="ios:m-4 android:m-2" />;
+      export function Component() {
+        return <View className="border-t-red-500/50 border-b-blue-500/80" />;
       }
     `;
 
     const output = transform(input, undefined, true);
 
-    // Should have Platform import
-    expect(output).toContain("Platform");
-
-    // Should have StyleSheet import too
-    expect(output).toContain("StyleSheet");
-
-    // Should use Platform.select
-    expect(output).toContain("Platform.select");
+    // Should have 8-digit hex colors with alpha channel
+    expect(output).toMatch(/borderTopColor[:\s]*['"]#[0-9A-F]{8}['"]/i);
+    expect(output).toMatch(/borderBottomColor[:\s]*['"]#[0-9A-F]{8}['"]/i);
   });
 
-  it("should not add Platform import without platform modifiers", () => {
+  it("should support directional border colors with arbitrary hex values", () => {
     const input = `
       import { View } from 'react-native';
-
-      function MyComponent() {
-        return <View className="m-4 p-2" />;
+      export function Component() {
+        return <View className="border-t-[#ff0000] border-r-[#abc]" />;
       }
     `;
 
     const output = transform(input, undefined, true);
 
-    // Should not have Platform import
-    const platformCount = (output.match(/Platform/g) ?? []).length;
-    expect(platformCount).toBe(0);
-
-    // Should still have StyleSheet
-    expect(output).toContain("StyleSheet");
+    // Should have borderTopColor and borderRightColor
+    expect(output).toMatch(/borderTopColor[:\s]*['"]#[0-9a-fA-F]{6}['"]/);
+    expect(output).toMatch(/borderRightColor[:\s]*['"]#[0-9a-fA-F]{6}['"]/);
   });
-});
 
-describe("Babel plugin - scheme: modifier", () => {
-  it.skip("should expand scheme: modifier into dark: and light: modifiers", () => {
-    // Note: This test requires tailwind.config.js with custom colors defined
-    // The scheme: modifier expands to dark: and light: modifiers which require
-    // the color variants to exist in customColors (e.g., systemGray-dark, systemGray-light)
-    //
-    // Integration test should be done in a real project with tailwind.config.js
+  it("should support all four directional border colors", () => {
     const input = `
       import { View } from 'react-native';
-
-      function MyComponent() {
-        return <View className="scheme:text-systemGray" />;
+      export function Component() {
+        return (
+          <View className="border-t-red-500 border-r-blue-500 border-b-green-500 border-l-yellow-500" />
+        );
       }
     `;
 
     const output = transform(input, undefined, true);
 
-    // Should generate both dark and light variants
-    expect(output).toContain("_dark_text_systemGray_dark");
-    expect(output).toContain("_light_text_systemGray_light");
-
-    // Should inject useColorScheme hook
-    expect(output).toContain("useColorScheme");
-    expect(output).toContain("_twColorScheme");
-
-    // Should have conditional expressions
-    expect(output).toContain("_twColorScheme === 'dark'");
-    expect(output).toContain("_twColorScheme === 'light'");
-  });
-});
-
-describe("Babel plugin - color scheme modifiers in tw/twStyle", () => {
-  it("should transform tw with dark: modifier inside component", () => {
-    const input = `
-      import { tw } from '@mgcrea/react-native-tailwind';
-
-      function MyComponent() {
-        const styles = tw\`bg-white dark:bg-gray-900\`;
-        return null;
-      }
-    `;
-
-    const output = transform(input);
-
-    // Should inject useColorScheme hook
-    expect(output).toContain("useColorScheme");
-    expect(output).toContain("_twColorScheme");
-
-    // Should generate style array with conditionals
-    expect(output).toContain("style: [");
-    expect(output).toContain('_twColorScheme === "dark"');
-    expect(output).toContain("_twStyles._dark_bg_gray_900");
-    expect(output).toContain("_twStyles._bg_white");
-
-    // Should have StyleSheet.create
-    expect(output).toContain("StyleSheet.create");
+    // Should have all four directional color properties
+    expect(output).toMatch(/borderTopColor[:\s]*['"]#[0-9A-F]{6}['"]/i);
+    expect(output).toMatch(/borderRightColor[:\s]*['"]#[0-9A-F]{6}['"]/i);
+    expect(output).toMatch(/borderBottomColor[:\s]*['"]#[0-9A-F]{6}['"]/i);
+    expect(output).toMatch(/borderLeftColor[:\s]*['"]#[0-9A-F]{6}['"]/i);
   });
 
-  it("should transform twStyle with light: modifier inside component", () => {
+  it("should combine directional widths, colors, and general border color", () => {
     const input = `
-      import { twStyle } from '@mgcrea/react-native-tailwind';
-
-      export const MyComponent = () => {
-        const buttonStyles = twStyle('text-gray-900 light:text-gray-100');
-        return null;
-      };
-    `;
-
-    const output = transform(input);
-
-    // Should inject useColorScheme hook
-    expect(output).toContain("useColorScheme");
-    expect(output).toContain("_twColorScheme");
-
-    // Should generate style array with conditionals
-    expect(output).toContain("style: [");
-    expect(output).toContain('_twColorScheme === "light"');
-    expect(output).toContain("_twStyles._light_text_gray_100");
-    expect(output).toContain("_twStyles._text_gray_900");
-  });
-
-  it("should transform tw with both dark: and light: modifiers", () => {
-    const input = `
-      import { tw } from '@mgcrea/react-native-tailwind';
-
-      function MyComponent() {
-        const styles = tw\`bg-blue-500 dark:bg-blue-900 light:bg-blue-100\`;
-        return null;
-      }
-    `;
-
-    const output = transform(input);
-
-    // Should have both conditionals
-    expect(output).toContain('_twColorScheme === "dark"');
-    expect(output).toContain('_twColorScheme === "light"');
-    expect(output).toContain("_twStyles._dark_bg_blue_900");
-    expect(output).toContain("_twStyles._light_bg_blue_100");
-    expect(output).toContain("_twStyles._bg_blue_500");
-  });
-
-  it("should combine color scheme modifiers with state modifiers", () => {
-    const input = `
-      import { tw } from '@mgcrea/react-native-tailwind';
-
-      function MyComponent() {
-        const styles = tw\`bg-white dark:bg-gray-900 active:bg-blue-500\`;
-        return null;
-      }
-    `;
-
-    const output = transform(input);
-
-    // Should have color scheme conditionals in style array
-    expect(output).toContain("style: [");
-    expect(output).toContain('_twColorScheme === "dark"');
-
-    // Should have activeStyle property (separate from color scheme)
-    expect(output).toContain("activeStyle:");
-    expect(output).toContain("_twStyles._active_bg_blue_500");
-  });
-
-  it("should warn if tw with color scheme modifiers used outside component", () => {
-    const consoleWarnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
-
-    const input = `
-      import { tw } from '@mgcrea/react-native-tailwind';
-
-      const globalStyles = tw\`bg-white dark:bg-gray-900\`;
-    `;
-
-    const output = transform(input);
-
-    // Should warn about usage outside component
-    expect(consoleWarnSpy).toHaveBeenCalledWith(
-      expect.stringContaining("Color scheme modifiers (dark:, light:) in tw/twStyle calls"),
-    );
-
-    // Should not inject hook (no component scope)
-    expect(output).not.toContain("useColorScheme");
-
-    // Should still generate styles but without runtime conditionals
-    expect(output).toContain("_twStyles");
-
-    consoleWarnSpy.mockRestore();
-  });
-
-  it("should handle tw with only dark: modifier (no base class)", () => {
-    const input = `
-      import { tw } from '@mgcrea/react-native-tailwind';
-
-      function MyComponent() {
-        const styles = tw\`dark:bg-gray-900\`;
-        return null;
-      }
-    `;
-
-    const output = transform(input);
-
-    // Should still generate style array
-    expect(output).toContain("style: [");
-    expect(output).toContain('_twColorScheme === "dark"');
-    expect(output).toContain("_twStyles._dark_bg_gray_900");
-  });
-
-  it("should work with custom color scheme hook import", () => {
-    const input = `
-      import { tw } from '@mgcrea/react-native-tailwind';
-      import { useTheme } from '@react-navigation/native';
-
-      function MyComponent() {
-        const styles = tw\`bg-white dark:bg-gray-900\`;
-        return null;
-      }
-    `;
-
-    const options: PluginOptions = {
-      colorScheme: {
-        importFrom: "@react-navigation/native",
-        importName: "useTheme",
-      },
-    };
-
-    const output = transform(input, options);
-
-    // Should use existing import (not duplicate)
-    const themeImportCount = (output.match(/useTheme/g) ?? []).length;
-    // Should appear in import statement and hook call
-    expect(themeImportCount).toBeGreaterThanOrEqual(2);
-
-    // Should call the custom hook
-    expect(output).toContain("useTheme()");
-  });
-
-  it("should generate both style array and darkStyle/lightStyle properties", () => {
-    const input = `
-      import { tw } from '@mgcrea/react-native-tailwind';
-
-      function MyComponent() {
-        const styles = tw\`bg-white dark:bg-gray-900 light:bg-gray-50\`;
-        return null;
-      }
-    `;
-
-    const output = transform(input);
-
-    // Should have runtime conditional in style array
-    expect(output).toContain("style: [");
-    expect(output).toContain('_twColorScheme === "dark"');
-    expect(output).toContain('_twColorScheme === "light"');
-
-    // Should ALSO have darkStyle and lightStyle properties for manual access
-    expect(output).toContain("darkStyle:");
-    expect(output).toContain("lightStyle:");
-    expect(output).toContain("_twStyles._dark_bg_gray_900");
-    expect(output).toContain("_twStyles._light_bg_gray_50");
-  });
-
-  it("should allow accessing raw color values from darkStyle/lightStyle", () => {
-    const input = `
-      import { tw } from '@mgcrea/react-native-tailwind';
-
-      function MyComponent() {
-        const btnStyles = tw\`bg-blue-500 dark:bg-blue-900\`;
-        // User can access raw hex for Reanimated
-        const darkBgColor = btnStyles.darkStyle?.backgroundColor;
-        return null;
-      }
-    `;
-
-    const output = transform(input);
-
-    // Should have darkStyle property available
-    expect(output).toContain("darkStyle:");
-    expect(output).toContain("_twStyles._dark_bg_blue_900");
-
-    // The actual usage line should be preserved (TypeScript/Babel doesn't remove it)
-    expect(output).toContain("btnStyles.darkStyle");
-  });
-
-  // Platform modifier tests for tw/twStyle
-  it("should transform tw with ios: modifier", () => {
-    const input = `
-      import { tw } from '@mgcrea/react-native-tailwind';
-
-      function MyComponent() {
-        const styles = tw\`bg-white ios:p-6\`;
-        return null;
-      }
-    `;
-
-    const output = transform(input);
-
-    // Should add Platform import
-    expect(output).toContain("Platform");
-    expect(output).toContain('from "react-native"');
-
-    // Should generate style array with Platform.select()
-    expect(output).toContain("style: [");
-    expect(output).toContain("Platform.select");
-    expect(output).toContain("ios:");
-    expect(output).toContain("_twStyles._ios_p_6");
-    expect(output).toContain("_twStyles._bg_white");
-
-    // Should have StyleSheet.create
-    expect(output).toContain("StyleSheet.create");
-  });
-
-  it("should transform twStyle with android: modifier", () => {
-    const input = `
-      import { twStyle } from '@mgcrea/react-native-tailwind';
-
-      export const MyComponent = () => {
-        const buttonStyles = twStyle('bg-blue-500 android:p-8');
-        return null;
-      };
-    `;
-
-    const output = transform(input);
-
-    // Should add Platform import
-    expect(output).toContain("Platform");
-
-    // Should generate style array with Platform.select()
-    expect(output).toContain("style: [");
-    expect(output).toContain("Platform.select");
-    expect(output).toContain("android:");
-    expect(output).toContain("_twStyles._android_p_8");
-    expect(output).toContain("_twStyles._bg_blue_500");
-  });
-
-  it("should transform tw with multiple platform modifiers", () => {
-    const input = `
-      import { tw } from '@mgcrea/react-native-tailwind';
-
-      function MyComponent() {
-        const styles = tw\`bg-white ios:p-6 android:p-8 web:p-4\`;
-        return null;
-      }
-    `;
-
-    const output = transform(input);
-
-    // Should generate Platform.select() with all platforms
-    expect(output).toContain("Platform.select");
-    expect(output).toContain("ios:");
-    expect(output).toContain("android:");
-    expect(output).toContain("web:");
-    expect(output).toContain("_twStyles._ios_p_6");
-    expect(output).toContain("_twStyles._android_p_8");
-    expect(output).toContain("_twStyles._web_p_4");
-  });
-
-  it("should combine platform modifiers with color-scheme modifiers", () => {
-    const input = `
-      import { tw } from '@mgcrea/react-native-tailwind';
-
-      function MyComponent() {
-        const styles = tw\`bg-white ios:p-6 dark:bg-gray-900\`;
-        return null;
-      }
-    `;
-
-    const output = transform(input);
-
-    // Should have both Platform and useColorScheme
-    expect(output).toContain("Platform");
-    expect(output).toContain("useColorScheme");
-    expect(output).toContain("_twColorScheme");
-
-    // Should have both conditionals in style array
-    expect(output).toContain("Platform.select");
-    expect(output).toContain('_twColorScheme === "dark"');
-  });
-
-  it("should generate iosStyle/androidStyle/webStyle properties for manual access", () => {
-    const input = `
-      import { tw } from '@mgcrea/react-native-tailwind';
-
-      function MyComponent() {
-        const styles = tw\`bg-white ios:p-6 android:p-8 web:p-4\`;
-        return null;
+      import { View } from 'react-native';
+      export function Component() {
+        return (
+          <View className="border border-gray-300 border-l-4 border-l-blue-500" />
+        );
       }
     `;
 
-    const output = transform(input);
-
-    // Should have separate platform style properties
-    expect(output).toContain("iosStyle:");
-    expect(output).toContain("_twStyles._ios_p_6");
-    expect(output).toContain("androidStyle:");
-    expect(output).toContain("_twStyles._android_p_8");
-    expect(output).toContain("webStyle:");
-    expect(output).toContain("_twStyles._web_p_4");
-
-    // Should also have runtime Platform.select() in style array
-    expect(output).toContain("Platform.select");
-  });
-
-  it("should work with only platform modifiers (no base class)", () => {
-    const input = `
-      import { tw } from '@mgcrea/react-native-tailwind';
-
-      function MyComponent() {
-        const styles = tw\`ios:p-6 android:p-8\`;
-        return null;
-      }
-    `;
+    const output = transform(input, undefined, true);
 
-    const output = transform(input);
+    // Should have general border properties
+    expect(output).toMatch(/borderWidth[:\s]*1/);
+    expect(output).toMatch(/borderColor[:\s]*['"]#[0-9A-F]{6}['"]/i);
 
-    // Should generate Platform.select() even without base classes
-    expect(output).toContain("Platform.select");
-    expect(output).toContain("_twStyles._ios_p_6");
-    expect(output).toContain("_twStyles._android_p_8");
+    // Should have directional left border properties
+    expect(output).toMatch(/borderLeftWidth[:\s]*4/);
+    expect(output).toMatch(/borderLeftColor[:\s]*['"]#[0-9A-F]{6}['"]/i);
   });
 
-  it("should allow accessing platform-specific styles manually", () => {
+  it("should work with dynamic className containing directional border colors", () => {
     const input = `
-      import { tw } from '@mgcrea/react-native-tailwind';
-
-      function MyComponent() {
-        const btnStyles = tw\`bg-blue-500 ios:p-6\`;
-        const iosPadding = btnStyles.iosStyle;
-        return null;
+      import { View } from 'react-native';
+      export function Component({ isError }) {
+        return (
+          <View className={\`border-t-2 \${isError ? 'border-t-red-500' : 'border-t-gray-300'}\`} />
+        );
       }
     `;
 
-    const output = transform(input);
-
-    // Should have iosStyle property available
-    expect(output).toContain("iosStyle:");
-    expect(output).toContain("_twStyles._ios_p_6");
-
-    // The actual usage line should be preserved
-    expect(output).toContain("btnStyles.iosStyle");
-  });
-
-  it("should combine state modifiers with platform modifiers", () => {
-    const input = `
-      import { tw } from '@mgcrea/react-native-tailwind';
-
-      function MyComponent() {
-        const styles = tw\`bg-white active:bg-blue-500 ios:p-6\`;
-        return null;
-      }
-    `;
+    const output = transform(input, undefined, true);
 
-    const output = transform(input);
+    // Should have StyleSheet with both color options
+    expect(output).toContain("_border_t_2");
+    expect(output).toContain("_border_t_red_500");
+    expect(output).toContain("_border_t_gray_300");
 
-    // Should have both activeStyle and platform modifiers
-    expect(output).toContain("activeStyle:");
-    expect(output).toContain("_twStyles._active_bg_blue_500");
-    expect(output).toContain("Platform.select");
-    expect(output).toContain("_twStyles._ios_p_6");
+    // Should have conditional expression with both styles
+    expect(output).toMatch(/isError\s*\?\s*_twStyles\._border_t_red_500/);
   });
 });