@mgcrea/react-native-tailwind 0.10.0 → 0.11.1

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,
@@ -1022,6 +1024,278 @@ 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 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 = `

package/dist/babel/plugin.ts

@@ -18,7 +18,8 @@ import {
 } from "../parser/index.js";
 import type { StyleObject } from "../types/core.js";
 import { generateStyleKey } from "../utils/styleKey.js";
-import { extractCustomColors } from "./config-loader.js";
+import type { CustomTheme } from "./config-loader.js";
+import { extractCustomTheme } from "./config-loader.js";
 
 // Import utility functions
 import type { SchemeModifierConfig } from "../types/config.js";
@@ -88,6 +89,42 @@ export type PluginOptions = {
     darkSuffix?: string;
     lightSuffix?: string;
   };
+
+  /**
+   * Configuration for color scheme hook import (dark:/light: modifiers)
+   *
+   * Allows using custom color scheme hooks from theme providers instead of
+   * React Native's built-in useColorScheme.
+   *
+   * @example
+   * // Use custom hook from theme provider
+   * {
+   *   importFrom: '@/hooks/useColorScheme',
+   *   importName: 'useColorScheme'
+   * }
+   *
+   * @example
+   * // Use React Navigation theme
+   * {
+   *   importFrom: '@react-navigation/native',
+   *   importName: 'useTheme'  // You'd wrap this to return ColorSchemeName
+   * }
+   *
+   * @default { importFrom: 'react-native', importName: 'useColorScheme' }
+   */
+  colorScheme?: {
+    /**
+     * Module to import the color scheme hook from
+     * @default 'react-native'
+     */
+    importFrom?: string;
+
+    /**
+     * Name of the hook to import
+     * @default 'useColorScheme'
+     */
+    importName?: string;
+  };
 };
 
 type PluginState = PluginPass & {
@@ -99,7 +136,10 @@ type PluginState = PluginPass & {
   hasColorSchemeImport: boolean;
   needsColorSchemeImport: boolean;
   colorSchemeVariableName: string;
-  customColors: Record<string, string>;
+  colorSchemeImportSource: string; // Where to import the hook from (e.g., 'react-native')
+  colorSchemeHookName: string; // Name of the hook to import (e.g., 'useColorScheme')
+  colorSchemeLocalIdentifier?: string; // Local identifier if hook is already imported with an alias
+  customTheme: CustomTheme;
   schemeModifierConfig: SchemeModifierConfig;
   supportedAttributes: Set<string>;
   attributePatterns: RegExp[];
@@ -209,6 +249,10 @@ export default function reactNativeTailwindBabelPlugin(
     lightSuffix: options?.schemeModifier?.lightSuffix ?? "-light",
   };
 
+  // Color scheme hook configuration from plugin options
+  const colorSchemeImportSource = options?.colorScheme?.importFrom ?? "react-native";
+  const colorSchemeHookName = options?.colorScheme?.importName ?? "useColorScheme";
+
   return {
     name: "react-native-tailwind",
 
@@ -224,6 +268,8 @@ export default function reactNativeTailwindBabelPlugin(
           state.hasColorSchemeImport = false;
           state.needsColorSchemeImport = false;
           state.colorSchemeVariableName = "_twColorScheme";
+          state.colorSchemeImportSource = colorSchemeImportSource;
+          state.colorSchemeHookName = colorSchemeHookName;
           state.supportedAttributes = exactMatches;
           state.attributePatterns = patterns;
           state.stylesIdentifier = stylesIdentifier;
@@ -231,8 +277,8 @@ export default function reactNativeTailwindBabelPlugin(
           state.hasTwImport = false;
           state.functionComponentsNeedingColorScheme = new Set();
 
-          // Load custom colors from tailwind.config.*
-          state.customColors = extractCustomColors(state.file.opts.filename ?? "");
+          // Load custom theme from tailwind.config.*
+          state.customTheme = extractCustomTheme(state.file.opts.filename ?? "");
 
           // Use scheme modifier config from plugin options
           state.schemeModifierConfig = schemeModifierConfig;
@@ -259,15 +305,21 @@ export default function reactNativeTailwindBabelPlugin(
             addPlatformImport(path, t);
           }
 
-          // Add useColorScheme import if color scheme modifiers were used and not already present
+          // Add color scheme hook import if color scheme modifiers were used and not already present
           if (state.needsColorSchemeImport && !state.hasColorSchemeImport) {
-            addColorSchemeImport(path, t);
+            addColorSchemeImport(path, state.colorSchemeImportSource, state.colorSchemeHookName, t);
           }
 
-          // Inject useColorScheme hook in function components that need it
+          // Inject color scheme hook in function components that need it
           if (state.needsColorSchemeImport) {
             for (const functionPath of state.functionComponentsNeedingColorScheme) {
-              injectColorSchemeHook(functionPath, state.colorSchemeVariableName, t);
+              injectColorSchemeHook(
+                functionPath,
+                state.colorSchemeVariableName,
+                state.colorSchemeHookName,
+                state.colorSchemeLocalIdentifier,
+                t,
+              );
             }
           }
 
@@ -299,13 +351,6 @@ export default function reactNativeTailwindBabelPlugin(
             return false;
           });
 
-          const hasUseColorScheme = specifiers.some((spec) => {
-            if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
-              return spec.imported.name === "useColorScheme";
-            }
-            return false;
-          });
-
           // Only track if imports exist - don't mutate yet
           // Actual import injection happens in Program.exit only if needed
           if (hasStyleSheet) {
@@ -316,14 +361,28 @@ export default function reactNativeTailwindBabelPlugin(
             state.hasPlatformImport = true;
           }
 
-          if (hasUseColorScheme) {
-            state.hasColorSchemeImport = true;
-          }
-
           // Store reference to the react-native import for later modification if needed
           state.reactNativeImportPath = path;
         }
 
+        // Track color scheme hook import from the configured source
+        // (default: react-native, but can be custom like @/hooks/useColorScheme)
+        if (node.source.value === state.colorSchemeImportSource) {
+          const specifiers = node.specifiers;
+
+          for (const spec of specifiers) {
+            if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
+              if (spec.imported.name === state.colorSchemeHookName) {
+                state.hasColorSchemeImport = true;
+                // Track the local identifier (handles aliased imports)
+                // e.g., import { useTheme as navTheme } → local name is 'navTheme'
+                state.colorSchemeLocalIdentifier = spec.local.name;
+                break;
+              }
+            }
+          }
+        }
+
         // Track tw/twStyle imports from main package (for compile-time transformation)
         if (node.source.value === "@mgcrea/react-native-tailwind") {
           const specifiers = node.specifiers;
@@ -480,7 +539,7 @@ export default function reactNativeTailwindBabelPlugin(
               // Expand scheme: into dark: and light:
               const expanded = expandSchemeModifier(
                 modifier,
-                state.customColors,
+                state.customTheme.colors ?? {},
                 state.schemeModifierConfig.darkSuffix,
                 state.schemeModifierConfig.lightSuffix,
               );
@@ -507,7 +566,7 @@ export default function reactNativeTailwindBabelPlugin(
 
             if (componentSupport?.supportedModifiers.includes("placeholder")) {
               const placeholderClasses = placeholderModifiers.map((m) => m.baseClass).join(" ");
-              const placeholderColor = parsePlaceholderClasses(placeholderClasses, state.customColors);
+              const placeholderColor = parsePlaceholderClasses(placeholderClasses, state.customTheme.colors);
 
               if (placeholderColor) {
                 // Add or merge placeholderTextColor prop
@@ -561,7 +620,7 @@ export default function reactNativeTailwindBabelPlugin(
               // Add base classes
               if (hasBaseClasses) {
                 const baseClassName = baseClasses.join(" ");
-                const baseStyleObject = parseClassName(baseClassName, state.customColors);
+                const baseStyleObject = parseClassName(baseClassName, state.customTheme);
                 const baseStyleKey = generateStyleKey(baseClassName);
                 state.styleRegistry.set(baseStyleKey, baseStyleObject);
                 styleArrayElements.push(
@@ -611,7 +670,7 @@ export default function reactNativeTailwindBabelPlugin(
                 }
 
                 const modifierClassNames = modifiers.map((m) => m.baseClass).join(" ");
-                const modifierStyleObject = parseClassName(modifierClassNames, state.customColors);
+                const modifierStyleObject = parseClassName(modifierClassNames, state.customTheme);
                 const modifierStyleKey = generateStyleKey(`${modifierType}_${modifierClassNames}`);
                 state.styleRegistry.set(modifierStyleKey, modifierStyleObject);
 
@@ -653,7 +712,7 @@ export default function reactNativeTailwindBabelPlugin(
             // Add base classes
             if (hasBaseClasses) {
               const baseClassName = baseClasses.join(" ");
-              const baseStyleObject = parseClassName(baseClassName, state.customColors);
+              const baseStyleObject = parseClassName(baseClassName, state.customTheme);
               const baseStyleKey = generateStyleKey(baseClassName);
               state.styleRegistry.set(baseStyleKey, baseStyleObject);
               styleExpressions.push(
@@ -815,7 +874,7 @@ export default function reactNativeTailwindBabelPlugin(
             return;
           }
 
-          const styleObject = parseClassName(classNameForStyle, state.customColors);
+          const styleObject = parseClassName(classNameForStyle, state.customTheme);
           const styleKey = generateStyleKey(classNameForStyle);
           state.styleRegistry.set(styleKey, styleObject);
 

package/dist/babel/utils/colorSchemeModifierProcessing.d.ts

@@ -2,14 +2,14 @@
  * Utility functions for processing color scheme modifiers (dark:, light:)
  */
 import type * as BabelTypes from "@babel/types";
-import type { ParsedModifier } from "../../parser/index.js";
+import type { CustomTheme, ParsedModifier } from "../../parser/index.js";
 import type { StyleObject } from "../../types/core.js";
 /**
  * Plugin state interface (subset needed for color scheme modifier processing)
  */
 export interface ColorSchemeModifierProcessingState {
     styleRegistry: Map<string, StyleObject>;
-    customColors: Record<string, string>;
+    customTheme: CustomTheme;
     stylesIdentifier: string;
     needsColorSchemeImport: boolean;
     colorSchemeVariableName: string;
@@ -31,4 +31,4 @@ export interface ColorSchemeModifierProcessingState {
  *   _twColorScheme === 'light' && styles._light_bg_white
  * ]
  */
-export declare function processColorSchemeModifiers(colorSchemeModifiers: ParsedModifier[], state: ColorSchemeModifierProcessingState, parseClassName: (className: string, customColors: Record<string, string>) => StyleObject, generateStyleKey: (className: string) => string, t: typeof BabelTypes): BabelTypes.Expression[];
+export declare function processColorSchemeModifiers(colorSchemeModifiers: ParsedModifier[], state: ColorSchemeModifierProcessingState, parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject, generateStyleKey: (className: string) => string, t: typeof BabelTypes): BabelTypes.Expression[];

package/dist/babel/utils/colorSchemeModifierProcessing.ts

@@ -3,7 +3,7 @@
  */
 
 import type * as BabelTypes from "@babel/types";
-import type { ColorSchemeModifierType, ParsedModifier } from "../../parser/index.js";
+import type { ColorSchemeModifierType, CustomTheme, ParsedModifier } from "../../parser/index.js";
 import type { StyleObject } from "../../types/core.js";
 
 /**
@@ -12,7 +12,7 @@ import type { StyleObject } from "../../types/core.js";
 // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
 export interface ColorSchemeModifierProcessingState {
   styleRegistry: Map<string, StyleObject>;
-  customColors: Record<string, string>;
+  customTheme: CustomTheme;
   stylesIdentifier: string;
   needsColorSchemeImport: boolean;
   colorSchemeVariableName: string;
@@ -38,7 +38,7 @@ export interface ColorSchemeModifierProcessingState {
 export function processColorSchemeModifiers(
   colorSchemeModifiers: ParsedModifier[],
   state: ColorSchemeModifierProcessingState,
-  parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
+  parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject,
   generateStyleKey: (className: string) => string,
   t: typeof BabelTypes,
 ): BabelTypes.Expression[] {
@@ -65,7 +65,7 @@ export function processColorSchemeModifiers(
   for (const [scheme, modifiers] of modifiersByScheme) {
     // Parse all classes for this color scheme together
     const classNames = modifiers.map((m) => m.baseClass).join(" ");
-    const styleObject = parseClassName(classNames, state.customColors);
+    const styleObject = parseClassName(classNames, state.customTheme);
     const styleKey = generateStyleKey(`${scheme}_${classNames}`);
 
     // Register style in the registry

package/dist/babel/utils/dynamicProcessing.d.ts

@@ -3,7 +3,7 @@
  */
 import type { NodePath } from "@babel/core";
 import type * as BabelTypes from "@babel/types";
-import type { ParsedModifier } from "../../parser/index.js";
+import type { CustomTheme, ParsedModifier } from "../../parser/index.js";
 import type { SchemeModifierConfig } from "../../types/config.js";
 import type { StyleObject } from "../../types/core.js";
 /**
@@ -11,7 +11,7 @@ import type { StyleObject } from "../../types/core.js";
  */
 export interface DynamicProcessingState {
     styleRegistry: Map<string, StyleObject>;
-    customColors: Record<string, string>;
+    customTheme: CustomTheme;
     schemeModifierConfig: SchemeModifierConfig;
     stylesIdentifier: string;
     needsPlatformImport: boolean;
@@ -29,11 +29,11 @@ export type SplitModifierClassesFn = (className: string) => {
 /**
  * Type for the processPlatformModifiers function
  */
-export type ProcessPlatformModifiersFn = (modifiers: ParsedModifier[], state: DynamicProcessingState, parseClassName: (className: string, customColors: Record<string, string>) => StyleObject, generateStyleKey: (className: string) => string, t: typeof BabelTypes) => BabelTypes.Expression;
+export type ProcessPlatformModifiersFn = (modifiers: ParsedModifier[], state: DynamicProcessingState, parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject, generateStyleKey: (className: string) => string, t: typeof BabelTypes) => BabelTypes.Expression;
 /**
  * Type for the processColorSchemeModifiers function
  */
-export type ProcessColorSchemeModifiersFn = (modifiers: ParsedModifier[], state: DynamicProcessingState, parseClassName: (className: string, customColors: Record<string, string>) => StyleObject, generateStyleKey: (className: string) => string, t: typeof BabelTypes) => BabelTypes.Expression[];
+export type ProcessColorSchemeModifiersFn = (modifiers: ParsedModifier[], state: DynamicProcessingState, parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject, generateStyleKey: (className: string) => string, t: typeof BabelTypes) => BabelTypes.Expression[];
 /**
  * Type for modifier type guard functions
  */
@@ -53,7 +53,7 @@ export type DynamicExpressionResult = {
  * Process a dynamic className expression
  * Extracts static strings and transforms the expression to use pre-compiled styles
  */
-export declare function processDynamicExpression(expression: BabelTypes.Expression, state: DynamicProcessingState, parseClassName: (className: string, customColors: Record<string, string>) => StyleObject, generateStyleKey: (className: string) => string, splitModifierClasses: SplitModifierClassesFn, processPlatformModifiers: ProcessPlatformModifiersFn, processColorSchemeModifiers: ProcessColorSchemeModifiersFn, componentScope: NodePath<BabelTypes.Function> | null, isPlatformModifier: ModifierTypeGuardFn, isColorSchemeModifier: ModifierTypeGuardFn, isSchemeModifier: ModifierTypeGuardFn, expandSchemeModifier: ExpandSchemeModifierFn, t: typeof BabelTypes): {
+export declare function processDynamicExpression(expression: BabelTypes.Expression, state: DynamicProcessingState, parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject, generateStyleKey: (className: string) => string, splitModifierClasses: SplitModifierClassesFn, processPlatformModifiers: ProcessPlatformModifiersFn, processColorSchemeModifiers: ProcessColorSchemeModifiersFn, componentScope: NodePath<BabelTypes.Function> | null, isPlatformModifier: ModifierTypeGuardFn, isColorSchemeModifier: ModifierTypeGuardFn, isSchemeModifier: ModifierTypeGuardFn, expandSchemeModifier: ExpandSchemeModifierFn, t: typeof BabelTypes): {
     expression: BabelTypes.Expression;
     staticParts: string[] | undefined;
 } | {