@mgcrea/react-native-tailwind 0.9.0 → 0.10.0

package/dist/babel/plugin.d.ts

@@ -2,9 +2,10 @@
  * Babel plugin for react-native-tailwind
  * Transforms className props to style props at compile time
  */
-import type { PluginObj, PluginPass } from "@babel/core";
+import type { NodePath, PluginObj, PluginPass } from "@babel/core";
 import * as BabelTypes from "@babel/types";
 import type { StyleObject } from "../types/core.js";
+import type { SchemeModifierConfig } from "../types/config.js";
 /**
  * Plugin options
  */
@@ -24,6 +25,21 @@ export type PluginOptions = {
      * @default '_twStyles'
      */
     stylesIdentifier?: string;
+    /**
+     * Configuration for the scheme: modifier that expands to both dark: and light: modifiers
+     *
+     * @example
+     * {
+     *   darkSuffix: '-dark',  // scheme:bg-primary -> dark:bg-primary-dark
+     *   lightSuffix: '-light' // scheme:bg-primary -> light:bg-primary-light
+     * }
+     *
+     * @default { darkSuffix: '-dark', lightSuffix: '-light' }
+     */
+    schemeModifier?: {
+        darkSuffix?: string;
+        lightSuffix?: string;
+    };
 };
 type PluginState = PluginPass & {
     styleRegistry: Map<string, StyleObject>;
@@ -31,12 +47,18 @@ type PluginState = PluginPass & {
     hasStyleSheetImport: boolean;
     hasPlatformImport: boolean;
     needsPlatformImport: boolean;
+    hasColorSchemeImport: boolean;
+    needsColorSchemeImport: boolean;
+    colorSchemeVariableName: string;
     customColors: Record<string, string>;
+    schemeModifierConfig: SchemeModifierConfig;
     supportedAttributes: Set<string>;
     attributePatterns: RegExp[];
     stylesIdentifier: string;
     twImportNames: Set<string>;
     hasTwImport: boolean;
+    reactNativeImportPath?: NodePath<BabelTypes.ImportDeclaration>;
+    functionComponentsNeedingColorScheme: Set<NodePath<BabelTypes.Function>>;
 };
 export default function reactNativeTailwindBabelPlugin({ types: t }: {
     types: typeof BabelTypes;

package/dist/babel/plugin.test.ts

@@ -721,3 +721,420 @@ describe("Babel plugin - platform modifier transformation", () => {
     expect(output).not.toMatch(/(?<!_ios|_android|_web)_p_8:/);
   });
 });
+
+describe("Babel plugin - color scheme modifier transformation", () => {
+  it("should transform dark: modifier to conditional expression", () => {
+    const input = `
+      import React from 'react';
+      import { View } from 'react-native';
+
+      export function Component() {
+        return (
+          <View className="bg-white dark:bg-gray-900" />
+        );
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should import useColorScheme
+    expect(output).toContain("useColorScheme");
+    expect(output).toMatch(/import.*useColorScheme.*from ['"]react-native['"]/);
+
+    // Should inject colorScheme hook in component
+    expect(output).toContain("_twColorScheme");
+    expect(output).toContain("useColorScheme()");
+
+    // Should have base bg-white style
+    expect(output).toContain("_bg_white");
+
+    // Should have dark:bg-gray-900 style
+    expect(output).toContain("_dark_bg_gray_900");
+
+    // Should generate conditional: _twColorScheme === 'dark' && ...
+    expect(output).toMatch(/_twColorScheme\s*===\s*['"]dark['"]/);
+  });
+
+  it("should support both dark: and light: modifiers", () => {
+    const input = `
+      import React from 'react';
+      import { View } from 'react-native';
+
+      export function Component() {
+        return (
+          <View className="bg-gray-100 dark:bg-gray-900 light:bg-white" />
+        );
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should have all three styles
+    expect(output).toContain("_bg_gray_100");
+    expect(output).toContain("_dark_bg_gray_900");
+    expect(output).toContain("_light_bg_white");
+
+    // Should have both conditionals
+    expect(output).toMatch(/_twColorScheme\s*===\s*['"]dark['"]/);
+    expect(output).toMatch(/_twColorScheme\s*===\s*['"]light['"]/);
+  });
+
+  it("should inject hook once for multiple elements with color scheme modifiers", () => {
+    const input = `
+      import React from 'react';
+      import { View, Text } from 'react-native';
+
+      export function Component() {
+        return (
+          <>
+            <View className="dark:bg-gray-900" />
+            <Text className="dark:text-white" />
+            <View className="light:bg-white" />
+          </>
+        );
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Count occurrences of useColorScheme() call - should be exactly 1
+    const hookCallMatches = output.match(/=\s*useColorScheme\(\)/g);
+    expect(hookCallMatches).toHaveLength(1);
+
+    // Should have color scheme variable
+    expect(output).toContain("_twColorScheme");
+  });
+
+  it("should work with color scheme and platform modifiers together", () => {
+    const input = `
+      import React from 'react';
+      import { View } from 'react-native';
+
+      export function Component() {
+        return (
+          <View className="p-4 ios:p-6 dark:bg-gray-900" />
+        );
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should have Platform import
+    expect(output).toContain("Platform");
+
+    // Should have useColorScheme import
+    expect(output).toContain("useColorScheme");
+
+    // Should have Platform.select for ios:
+    expect(output).toContain("Platform.select");
+    expect(output).toContain("_ios_p_6");
+
+    // Should have color scheme conditional for dark:
+    expect(output).toMatch(/_twColorScheme\s*===\s*['"]dark['"]/);
+    expect(output).toContain("_dark_bg_gray_900");
+  });
+
+  it("should only add useColorScheme import once when needed", () => {
+    const input = `
+      import React from 'react';
+      import { View } from 'react-native';
+
+      export function Component() {
+        return (
+          <>
+            <View className="dark:bg-black" />
+            <View className="light:bg-white" />
+          </>
+        );
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Count useColorScheme imports
+    const importMatches = output.match(/import.*useColorScheme.*from ['"]react-native['"]/g);
+    expect(importMatches).toHaveLength(1);
+  });
+
+  it("should merge with existing useColorScheme import", () => {
+    const input = `
+      import React from 'react';
+      import { View, useColorScheme } from 'react-native';
+
+      export function Component() {
+        return <View className="dark:bg-gray-900" />;
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should still use useColorScheme
+    expect(output).toContain("useColorScheme");
+
+    // Should inject hook call
+    expect(output).toContain("_twColorScheme");
+    expect(output).toContain("useColorScheme()");
+  });
+
+  it("should work with concise arrow functions", () => {
+    const input = `
+      import React from 'react';
+      import { View } from 'react-native';
+
+      const Component = () => <View className="dark:bg-gray-900" />;
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should inject useColorScheme import
+    expect(output).toContain("useColorScheme");
+
+    // Should convert concise arrow to block statement and inject hook
+    expect(output).toContain("_twColorScheme");
+    expect(output).toContain("useColorScheme()");
+    expect(output).toContain("return");
+
+    // Should have the style
+    expect(output).toContain("_dark_bg_gray_900");
+    expect(output).toMatch(/_twColorScheme\s*===\s*['"]dark['"]/);
+  });
+
+  it("should inject hook at component level when dark: used in nested callback", () => {
+    const input = `
+      import React from 'react';
+      import { View } from 'react-native';
+
+      export function Component() {
+        const items = [1, 2, 3];
+        return (
+          <View>
+            {items.map(item => (
+              <View key={item} className="dark:bg-gray-900" />
+            ))}
+          </View>
+        );
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should inject hook at Component level (not in map callback)
+    expect(output).toContain("_twColorScheme");
+    expect(output).toContain("useColorScheme()");
+
+    // Hook should be injected in Component function, not in map callback
+    // Count occurrences - should be exactly 1 at Component level
+    const hookCallMatches = output.match(/=\s*useColorScheme\(\)/g);
+    expect(hookCallMatches).toHaveLength(1);
+
+    // Should still generate conditional expression
+    expect(output).toContain("_dark_bg_gray_900");
+    expect(output).toMatch(/_twColorScheme\s*===\s*['"]dark['"]/);
+  });
+
+  it("should handle dynamic expressions with dark:/light: modifiers", () => {
+    const input = `
+      import React from 'react';
+      import { View } from 'react-native';
+
+      export function Component({ isActive }) {
+        return (
+          <View className={\`p-4 \${isActive ? "dark:bg-blue-500" : "dark:bg-gray-900"}\`} />
+        );
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should inject useColorScheme
+    expect(output).toContain("useColorScheme");
+    expect(output).toContain("_twColorScheme");
+
+    // Should have both dark styles
+    expect(output).toContain("_dark_bg_blue_500");
+    expect(output).toContain("_dark_bg_gray_900");
+
+    // Should have conditional expressions for color scheme
+    expect(output).toMatch(/_twColorScheme\s*===\s*['"]dark['"]/);
+  });
+
+  it("should handle dynamic expressions with platform modifiers", () => {
+    const input = `
+      import React from 'react';
+      import { View } from 'react-native';
+
+      export function Component({ isLarge }) {
+        return (
+          <View className={\`p-4 \${isLarge ? "ios:p-8" : "ios:p-6"}\`} />
+        );
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should inject Platform import
+    expect(output).toContain("Platform");
+
+    // Should have both ios styles
+    expect(output).toContain("_ios_p_8");
+    expect(output).toContain("_ios_p_6");
+
+    // Should have Platform.select
+    expect(output).toContain("Platform.select");
+  });
+
+  it("should skip color scheme modifiers when used outside component scope", () => {
+    // Suppress console.warn for this test
+    const consoleWarnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+    const input = `
+      import React from 'react';
+      import { View } from 'react-native';
+
+      // Class component - no function component scope
+      class MyComponent extends React.Component {
+        render() {
+          return <View className="p-4 dark:bg-gray-900" />;
+        }
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should warn about invalid context
+    expect(consoleWarnSpy).toHaveBeenCalledWith(
+      expect.stringContaining("dark:/light: modifiers require a function component scope"),
+    );
+
+    // Should NOT inject useColorScheme import (no valid component scope)
+    expect(output).not.toContain("useColorScheme");
+
+    // Should NOT have _twColorScheme variable reference (would cause ReferenceError)
+    expect(output).not.toContain("_twColorScheme");
+
+    // Should NOT have dark: style conditional (skipped due to no component scope)
+    expect(output).not.toContain("_dark_bg_gray_900");
+
+    // Should still transform base classes (p-4)
+    expect(output).toContain("_p_4");
+
+    consoleWarnSpy.mockRestore();
+  });
+});
+
+describe("Babel plugin - import injection", () => {
+  it("should not add StyleSheet import to files without className usage", () => {
+    const input = `
+      import { View, Text } from 'react-native';
+
+      function MyComponent() {
+        return <View><Text>Hello</Text></View>;
+      }
+    `;
+
+    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 not have _twStyles definition
+    expect(output).not.toContain("_twStyles");
+    expect(output).not.toContain("StyleSheet.create");
+
+    // Original imports should remain unchanged
+    expect(output).toContain("View");
+    expect(output).toContain("Text");
+  });
+
+  it("should add StyleSheet import only when className is used", () => {
+    const input = `
+      import { View } from 'react-native';
+
+      function MyComponent() {
+        return <View className="m-4 p-2" />;
+      }
+    `;
+
+    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 _twStyles definition
+    expect(output).toContain("_twStyles");
+    expect(output).toContain("StyleSheet.create");
+  });
+
+  it("should add Platform import only when platform modifiers are used", () => {
+    const input = `
+      import { View } from 'react-native';
+
+      function MyComponent() {
+        return <View className="ios:m-4 android:m-2" />;
+      }
+    `;
+
+    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");
+  });
+
+  it("should not add Platform import without platform modifiers", () => {
+    const input = `
+      import { View } from 'react-native';
+
+      function MyComponent() {
+        return <View className="m-4 p-2" />;
+      }
+    `;
+
+    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");
+  });
+});
+
+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
+    const input = `
+      import { View } from 'react-native';
+
+      function MyComponent() {
+        return <View className="scheme:text-systemGray" />;
+      }
+    `;
+
+    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'");
+  });
+});