@mgcrea/react-native-tailwind 0.11.0 → 0.12.0

package/dist/babel/plugin.test.ts

@@ -7,7 +7,9 @@ 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"] : [];
+  const presets = includeJsx
+    ? ["@babel/preset-react", ["@babel/preset-typescript", { isTSX: true, allExtensions: true }]]
+    : [];
 
   const result = transformSync(code, {
     presets,
@@ -332,6 +334,89 @@ describe("Babel plugin - className transformation (existing behavior)", () => {
     // Should not have className in output
     expect(output).not.toContain("className");
   });
+
+  it('should transform className={"..."} (string literal in expression container)', () => {
+    const input = `
+      import { View } from 'react-native';
+      export function Component() {
+        return <View className={"flex-row items-center justify-start"} />;
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should have StyleSheet
+    expect(output).toContain("StyleSheet.create");
+    expect(output).toContain("_twStyles");
+
+    // Should replace className with style
+    expect(output).not.toContain("className");
+    expect(output).toContain("style:");
+
+    // Should have the expected style keys
+    expect(output).toContain("_flex_row_items_center_justify_start");
+  });
+
+  it('should transform className={"..."} with modifiers', () => {
+    const input = `
+      import { Pressable } from 'react-native';
+      export function Component() {
+        return <Pressable className={"bg-blue-500 active:bg-blue-700 p-4"} />;
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should have StyleSheet with both base and active styles
+    expect(output).toContain("_bg_blue_500_p_4");
+    expect(output).toContain("_active_bg_blue_700");
+
+    // Should have style function for active modifier (Pressable uses 'pressed' parameter)
+    expect(output).toMatch(/(pressed|_state)/);
+
+    // Should not have className in output
+    expect(output).not.toContain("className");
+  });
+
+  it('should transform className={"..."} with platform modifiers', () => {
+    const input = `
+      import { View } from 'react-native';
+      export function Component() {
+        return <View className={"p-4 ios:p-6 android:p-8"} />;
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should have Platform import
+    expect(output).toContain("Platform");
+    expect(output).toMatch(/from ['"]react-native['"]/); // Match both single and double quotes
+
+    // Should have Platform.select
+    expect(output).toContain("Platform.select");
+
+    // Should have platform-specific styles
+    expect(output).toContain("_ios_p_6");
+    expect(output).toContain("_android_p_8");
+
+    // Should not have className in output
+    expect(output).not.toContain("className");
+  });
+
+  it('should handle empty className={""}', () => {
+    const input = `
+      import { View } from 'react-native';
+      export function Component() {
+        return <View className={""} />;
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should remove empty className attribute entirely
+    expect(output).not.toContain("className");
+    expect(output).not.toContain("style=");
+  });
 });
 
 describe("Babel plugin - placeholder: modifier transformation", () => {
@@ -1022,6 +1107,306 @@ describe("Babel plugin - color scheme modifier transformation", () => {
   });
 });
 
+describe("Babel plugin - custom color scheme hook import", () => {
+  it("should use custom import source for color scheme hook", () => {
+    const input = `
+      import React from 'react';
+      import { View } from 'react-native';
+
+      export function Component() {
+        return <View className="dark:bg-gray-900" />;
+      }
+    `;
+
+    const output = transform(
+      input,
+      {
+        colorScheme: {
+          importFrom: "@/hooks/useColorScheme",
+          importName: "useColorScheme",
+        },
+      },
+      true,
+    );
+
+    // Should import from custom source
+    expect(output).toContain('from "@/hooks/useColorScheme"');
+    expect(output).not.toContain('useColorScheme } from "react-native"');
+
+    // Should inject hook call
+    expect(output).toContain("_twColorScheme = useColorScheme()");
+
+    // Should have conditional styling
+    expect(output).toMatch(/_twColorScheme\s*===\s*['"]dark['"]/);
+  });
+
+  it("should use custom hook name", () => {
+    const input = `
+      import React from 'react';
+      import { View } from 'react-native';
+
+      export function Component() {
+        return <View className="dark:bg-gray-900" />;
+      }
+    `;
+
+    const output = transform(
+      input,
+      {
+        colorScheme: {
+          importFrom: "@react-navigation/native",
+          importName: "useTheme",
+        },
+      },
+      true,
+    );
+
+    // Should import useTheme from React Navigation
+    expect(output).toContain('from "@react-navigation/native"');
+    expect(output).toContain("useTheme");
+
+    // Should call useTheme hook
+    expect(output).toContain("_twColorScheme = useTheme()");
+
+    // Should have conditional styling
+    expect(output).toMatch(/_twColorScheme\s*===\s*['"]dark['"]/);
+  });
+
+  it("should merge custom hook with existing import from same source", () => {
+    const input = `
+      import React from 'react';
+      import { View, Text } from 'react-native';
+      import { useNavigation } from '@react-navigation/native';
+
+      export function Component() {
+        const navigation = useNavigation();
+        return (
+          <View className="dark:bg-gray-900">
+            <Text onPress={() => navigation.navigate('Home')}>Go Home</Text>
+          </View>
+        );
+      }
+    `;
+
+    const output = transform(
+      input,
+      {
+        colorScheme: {
+          importFrom: "@react-navigation/native",
+          importName: "useTheme",
+        },
+      },
+      true,
+    );
+
+    // Should merge with existing import (both useNavigation and useTheme in same import)
+    expect(output).toMatch(
+      /import\s+\{\s*useNavigation[^}]*useTheme[^}]*\}\s+from\s+['"]@react-navigation\/native['"]/,
+    );
+    expect(output).toContain("useNavigation()");
+    expect(output).toContain("useTheme()");
+
+    // Should only have one import from that source
+    const importCount = (output.match(/@react-navigation\/native/g) ?? []).length;
+    expect(importCount).toBe(1);
+  });
+
+  it("should not duplicate custom hook if already imported", () => {
+    const input = `
+      import React from 'react';
+      import { View } from 'react-native';
+      import { useColorScheme } from '@/hooks/useColorScheme';
+
+      export function Component() {
+        return <View className="dark:bg-gray-900" />;
+      }
+    `;
+
+    const output = transform(
+      input,
+      {
+        colorScheme: {
+          importFrom: "@/hooks/useColorScheme",
+          importName: "useColorScheme",
+        },
+      },
+      true,
+    );
+
+    // Should not add duplicate import
+    const importMatches = output.match(/import.*useColorScheme.*from ['"]@\/hooks\/useColorScheme['"]/g);
+    expect(importMatches).toHaveLength(1);
+
+    // Should still inject hook call
+    expect(output).toContain("_twColorScheme = useColorScheme()");
+  });
+
+  it("should use react-native by default when no custom config provided", () => {
+    const input = `
+      import React from 'react';
+      import { View } from 'react-native';
+
+      export function Component() {
+        return <View className="dark:bg-gray-900" />;
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should use default react-native import (can be single or double quotes)
+    expect(output).toMatch(/useColorScheme\s*}\s*from\s+['"]react-native['"]/);
+    expect(output).not.toContain("@/hooks");
+    expect(output).not.toContain("@react-navigation");
+
+    // Should inject hook call with default name
+    expect(output).toContain("_twColorScheme = useColorScheme()");
+  });
+
+  it("should create separate import when only type-only import exists", () => {
+    const input = `
+      import React from 'react';
+      import { View } from 'react-native';
+      import type { NavigationProp } from '@react-navigation/native';
+
+      export function Component() {
+        return <View className="dark:bg-gray-900" />;
+      }
+    `;
+
+    const output = transform(
+      input,
+      {
+        colorScheme: {
+          importFrom: "@react-navigation/native",
+          importName: "useTheme",
+        },
+      },
+      true,
+    );
+
+    // TypeScript preset strips type-only imports, but the important thing is:
+    // 1. useTheme hook is imported (not skipped thinking it was already imported)
+    // 2. Hook is correctly called in the component
+    expect(output).toMatch(/import\s+\{\s*useTheme\s*\}\s+from\s+['"]@react-navigation\/native['"]/);
+    expect(output).toContain("_twColorScheme = useTheme()");
+  });
+
+  it("should use aliased identifier when hook is already imported with alias", () => {
+    const input = `
+      import React from 'react';
+      import { View, Text } from 'react-native';
+      import { useTheme as navTheme } from '@react-navigation/native';
+
+      export function Component() {
+        const theme = navTheme();
+        return (
+          <View className="dark:bg-gray-900">
+            <Text>{theme.dark ? 'Dark' : 'Light'}</Text>
+          </View>
+        );
+      }
+    `;
+
+    const output = transform(
+      input,
+      {
+        colorScheme: {
+          importFrom: "@react-navigation/native",
+          importName: "useTheme",
+        },
+      },
+      true,
+    );
+
+    // Should not add duplicate import
+    const importMatches = output.match(
+      /import\s+\{[^}]*useTheme[^}]*\}\s+from\s+['"]@react-navigation\/native['"]/g,
+    );
+    expect(importMatches).toHaveLength(1);
+
+    // Should still have the aliased import
+    expect(output).toMatch(/useTheme\s+as\s+navTheme/);
+
+    // Should call the aliased name (navTheme), not the export name (useTheme)
+    // Both the user's code and our injected hook should use navTheme
+    expect(output).toContain("_twColorScheme = navTheme()");
+    expect(output).not.toContain("_twColorScheme = useTheme()");
+  });
+
+  it("should not treat type-only imports as having the hook", () => {
+    const input = `
+      import React from 'react';
+      import { View } from 'react-native';
+      import type { useColorScheme } from 'react-native';
+
+      export function Component() {
+        return <View className="dark:bg-gray-900" />;
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should add a VALUE import for useColorScheme (type import doesn't count)
+    expect(output).toMatch(/import\s+\{[^}]*useColorScheme[^}]*\}\s+from\s+['"]react-native['"]/);
+
+    // Should inject the hook
+    expect(output).toContain("_twColorScheme = useColorScheme()");
+
+    // Should have both type-only and value imports in output
+    // (TypeScript preset keeps type imports for type checking)
+    const colorSchemeMatches = output.match(/useColorScheme/g);
+    expect(colorSchemeMatches).toBeTruthy();
+    if (colorSchemeMatches) {
+      expect(colorSchemeMatches.length).toBeGreaterThanOrEqual(2); // At least in import and hook call
+    }
+  });
+
+  it("should handle both type-only and aliased imports together", () => {
+    const input = `
+      import React from 'react';
+      import { View, Text } from 'react-native';
+      import type { Theme } from '@react-navigation/native';
+      import { useTheme as getNavTheme } from '@react-navigation/native';
+
+      export function Component() {
+        const theme = getNavTheme();
+        return (
+          <View className="dark:bg-gray-900">
+            <Text>{theme.dark ? 'Dark Mode' : 'Light Mode'}</Text>
+          </View>
+        );
+      }
+    `;
+
+    const output = transform(
+      input,
+      {
+        colorScheme: {
+          importFrom: "@react-navigation/native",
+          importName: "useTheme",
+        },
+      },
+      true,
+    );
+
+    // TypeScript preset strips type-only imports
+    // The important thing is: should not add duplicate import, and should use aliased name
+    expect(output).toMatch(
+      /import\s+\{[^}]*useTheme\s+as\s+getNavTheme[^}]*\}\s+from\s+['"]@react-navigation\/native['"]/,
+    );
+
+    // Should not add duplicate import - useTheme should only appear in the aliased import
+    const useThemeImports = output.match(
+      /import\s+\{[^}]*useTheme[^}]*\}\s+from\s+['"]@react-navigation\/native['"]/g,
+    );
+    expect(useThemeImports).toHaveLength(1);
+
+    // Should call the aliased name for both user code and our injected hook
+    expect(output).toContain("_twColorScheme = getNavTheme()");
+    expect(output).not.toContain("_twColorScheme = useTheme()");
+  });
+});
+
 describe("Babel plugin - import injection", () => {
   it("should not add StyleSheet import to files without className usage", () => {
     const input = `
@@ -1138,3 +1523,390 @@ describe("Babel plugin - scheme: modifier", () => {
     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");
+  });
+
+  it("should transform twStyle with light: modifier inside component", () => {
+    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;
+      }
+    `;
+
+    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);
+
+    // 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");
+  });
+
+  it("should allow accessing platform-specific styles manually", () => {
+    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;
+      }
+    `;
+
+    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);
+
+    // 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");
+  });
+});