@mgcrea/react-native-tailwind 0.11.0 → 0.12.0

package/README.md

@@ -1887,6 +1887,135 @@ const styles = StyleSheet.create({
 - Choose a name that won't conflict with existing variables in your files
 - The same identifier is used across all files in your project
 
+### Custom Color Scheme Hook
+
+By default, the plugin uses React Native's built-in `useColorScheme()` hook for `dark:` and `light:` modifiers. You can configure it to use a custom color scheme hook from theme providers like React Navigation, Expo, or your own implementation.
+
+**Configuration:**
+
+```javascript
+// babel.config.js
+module.exports = {
+  plugins: [
+    [
+      "@mgcrea/react-native-tailwind/babel",
+      {
+        colorScheme: {
+          importFrom: "@/hooks/useColorScheme", // Module to import from
+          importName: "useColorScheme",          // Hook name to import
+        },
+      },
+    ],
+  ],
+};
+```
+
+**Use Cases:**
+
+#### 1. Custom Theme Provider
+
+Override system color scheme with user preferences from a store:
+
+```typescript
+// src/hooks/useColorScheme.ts
+import { useColorScheme as useSystemColorScheme } from "react-native";
+import { profileStore } from "@/stores/profileStore";
+import { type ColorSchemeName } from "react-native";
+
+export const useColorScheme = (): ColorSchemeName => {
+  const systemColorScheme = useSystemColorScheme();
+  const userTheme = profileStore.theme; // 'dark' | 'light' | 'auto'
+
+  // Return user preference, or fall back to system if set to 'auto'
+  return userTheme === 'auto' ? systemColorScheme : userTheme;
+};
+```
+
+```javascript
+// babel.config.js
+{
+  colorScheme: {
+    importFrom: "@/hooks/useColorScheme",
+    importName: "useColorScheme"
+  }
+}
+```
+
+#### 2. React Navigation Theme
+
+Integrate with React Navigation's theme system:
+
+```typescript
+// Wrap React Navigation's useTheme to return ColorSchemeName
+import { useTheme as useNavTheme } from "@react-navigation/native";
+import { type ColorSchemeName } from "react-native";
+
+export const useColorScheme = (): ColorSchemeName => {
+  const { dark } = useNavTheme();
+  return dark ? "dark" : "light";
+};
+```
+
+#### 3. Expo Router Theme
+
+Use Expo Router's theme hook:
+
+```javascript
+// babel.config.js
+{
+  colorScheme: {
+    importFrom: "expo-router",
+    importName: "useColorScheme"
+  }
+}
+```
+
+#### 4. Testing
+
+Mock color scheme for tests:
+
+```typescript
+// test/mocks/useColorScheme.ts
+export const useColorScheme = () => "light"; // Or "dark" for dark mode tests
+```
+
+```javascript
+// babel.config.js (test environment)
+{
+  colorScheme: {
+    importFrom: "@/test/mocks/useColorScheme",
+    importName: "useColorScheme"
+  }
+}
+```
+
+#### How it works
+
+When you use `dark:` or `light:` modifiers:
+
+```tsx
+<View className="bg-white dark:bg-gray-900" />
+```
+
+The plugin will:
+
+1. Import your custom hook: `import { useColorScheme } from "@/hooks/useColorScheme"`
+2. Inject it in components: `const _twColorScheme = useColorScheme();`
+3. Generate conditionals: `_twColorScheme === "dark" && styles._dark_bg_gray_900`
+
+#### Default behavior (no configuration)
+
+Without custom configuration, the plugin uses React Native's built-in hook:
+
+- Import: `import { useColorScheme } from "react-native"`
+- This works out of the box for basic system color scheme detection
+
+#### Requirements
+
+- Your custom hook must return `ColorSchemeName` (type from React Native: `"light" | "dark" | null | undefined`)
+- The hook must be compatible with React's rules of hooks (can only be called in function components)
+- Import merging works automatically if you already import from the same source
+
 ### Arbitrary Values
 
 Use arbitrary values for custom sizes, spacing, and borders not in the preset scales:

package/dist/babel/index.cjs

@@ -1194,14 +1194,14 @@ var SPACING_SCALE = {
   96: 384
 };
 function parseArbitrarySpacing(value) {
-  const pxMatch = value.match(/^\[(\d+)(?:px)?\]$/);
+  const pxMatch = value.match(/^\[(-?\d+(?:\.\d+)?)(?:px)?\]$/);
   if (pxMatch) {
-    return parseInt(pxMatch[1], 10);
+    return parseFloat(pxMatch[1]);
   }
   if (value.startsWith("[") && value.endsWith("]")) {
     if (process.env.NODE_ENV !== "production") {
       console.warn(
-        `[react-native-tailwind] Unsupported arbitrary spacing value: ${value}. Only px values are supported (e.g., [16px] or [16]).`
+        `[react-native-tailwind] Unsupported arbitrary spacing value: ${value}. Only px values are supported (e.g., [16px], [16], [4.5px], [4.5]).`
       );
     }
     return null;
@@ -2518,33 +2518,33 @@ function addPlatformImport(path2, t) {
     path2.unshiftContainer("body", importDeclaration);
   }
 }
-function addColorSchemeImport(path2, t) {
+function addColorSchemeImport(path2, importSource, hookName, t) {
   const body = path2.node.body;
-  let reactNativeImport = null;
+  let existingValueImport = null;
   for (const statement of body) {
-    if (t.isImportDeclaration(statement) && statement.source.value === "react-native") {
-      reactNativeImport = statement;
-      break;
+    if (t.isImportDeclaration(statement) && statement.source.value === importSource) {
+      if (statement.importKind !== "type") {
+        existingValueImport = statement;
+        break;
+      }
     }
   }
-  if (reactNativeImport) {
-    const hasUseColorScheme = reactNativeImport.specifiers.some(
-      (spec) => t.isImportSpecifier(spec) && spec.imported.type === "Identifier" && spec.imported.name === "useColorScheme"
+  if (existingValueImport) {
+    const hasHook = existingValueImport.specifiers.some(
+      (spec) => t.isImportSpecifier(spec) && spec.imported.type === "Identifier" && spec.imported.name === hookName
     );
-    if (!hasUseColorScheme) {
-      reactNativeImport.specifiers.push(
-        t.importSpecifier(t.identifier("useColorScheme"), t.identifier("useColorScheme"))
-      );
+    if (!hasHook) {
+      existingValueImport.specifiers.push(t.importSpecifier(t.identifier(hookName), t.identifier(hookName)));
     }
   } else {
     const importDeclaration = t.importDeclaration(
-      [t.importSpecifier(t.identifier("useColorScheme"), t.identifier("useColorScheme"))],
-      t.stringLiteral("react-native")
+      [t.importSpecifier(t.identifier(hookName), t.identifier(hookName))],
+      t.stringLiteral(importSource)
     );
     path2.unshiftContainer("body", importDeclaration);
   }
 }
-function injectColorSchemeHook(functionPath, colorSchemeVariableName, t) {
+function injectColorSchemeHook(functionPath, colorSchemeVariableName, hookName, localIdentifier, t) {
   let body = functionPath.node.body;
   if (!t.isBlockStatement(body)) {
     if (t.isArrowFunctionExpression(functionPath.node) && t.isExpression(body)) {
@@ -2566,10 +2566,11 @@ function injectColorSchemeHook(functionPath, colorSchemeVariableName, t) {
   if (hasHook) {
     return false;
   }
+  const identifierToCall = localIdentifier ?? hookName;
   const hookCall = t.variableDeclaration("const", [
     t.variableDeclarator(
       t.identifier(colorSchemeVariableName),
-      t.callExpression(t.identifier("useColorScheme"), [])
+      t.callExpression(t.identifier(identifierToCall), [])
     )
   ]);
   body.body.unshift(hookCall);
@@ -2724,7 +2725,7 @@ function addOrMergePlaceholderTextColorProp(jsxOpeningElement, color, t) {
 }
 
 // src/babel/utils/twProcessing.ts
-function processTwCall(className, path2, state, parseClassName2, generateStyleKey2, splitModifierClasses2, t) {
+function processTwCall(className, path2, state, parseClassName2, generateStyleKey2, splitModifierClasses2, findComponentScope2, t) {
   const { baseClasses, modifierClasses: rawModifierClasses } = splitModifierClasses2(className);
   const modifierClasses = [];
   for (const modifier of rawModifierClasses) {
@@ -2755,8 +2756,145 @@ function processTwCall(className, path2, state, parseClassName2, generateStyleKe
   } else {
     objectProperties.push(t.objectProperty(t.identifier("style"), t.objectExpression([])));
   }
+  const colorSchemeModifiers = modifierClasses.filter((m) => isColorSchemeModifier(m.modifier));
+  const platformModifiers = modifierClasses.filter((m) => isPlatformModifier(m.modifier));
+  const otherModifiers = modifierClasses.filter(
+    (m) => !isColorSchemeModifier(m.modifier) && !isPlatformModifier(m.modifier)
+  );
+  const hasColorSchemeModifiers = colorSchemeModifiers.length > 0;
+  let componentScope = null;
+  if (hasColorSchemeModifiers) {
+    componentScope = findComponentScope2(path2, t);
+    if (!componentScope) {
+      if (process.env.NODE_ENV !== "production") {
+        console.warn(
+          `[react-native-tailwind] Color scheme modifiers (dark:, light:) in tw/twStyle calls must be used inside a React component. Modifiers will be ignored.`
+        );
+      }
+    } else {
+      state.functionComponentsNeedingColorScheme.add(componentScope);
+    }
+  }
+  if (hasColorSchemeModifiers && componentScope) {
+    const colorSchemeConditionals = processColorSchemeModifiers(
+      colorSchemeModifiers,
+      state,
+      parseClassName2,
+      generateStyleKey2,
+      t
+    );
+    const styleArrayElements = [];
+    if (baseClasses.length > 0) {
+      const baseClassName = baseClasses.join(" ");
+      const baseStyleObject = parseClassName2(baseClassName, state.customTheme);
+      const baseStyleKey = generateStyleKey2(baseClassName);
+      state.styleRegistry.set(baseStyleKey, baseStyleObject);
+      styleArrayElements.push(
+        t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(baseStyleKey))
+      );
+    }
+    styleArrayElements.push(...colorSchemeConditionals);
+    objectProperties[0] = t.objectProperty(t.identifier("style"), t.arrayExpression(styleArrayElements));
+    const darkModifiers = colorSchemeModifiers.filter((m) => m.modifier === "dark");
+    const lightModifiers = colorSchemeModifiers.filter((m) => m.modifier === "light");
+    if (darkModifiers.length > 0) {
+      const darkClassNames = darkModifiers.map((m) => m.baseClass).join(" ");
+      const darkStyleObject = parseClassName2(darkClassNames, state.customTheme);
+      const darkStyleKey = generateStyleKey2(`dark_${darkClassNames}`);
+      state.styleRegistry.set(darkStyleKey, darkStyleObject);
+      objectProperties.push(
+        t.objectProperty(
+          t.identifier("darkStyle"),
+          t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(darkStyleKey))
+        )
+      );
+    }
+    if (lightModifiers.length > 0) {
+      const lightClassNames = lightModifiers.map((m) => m.baseClass).join(" ");
+      const lightStyleObject = parseClassName2(lightClassNames, state.customTheme);
+      const lightStyleKey = generateStyleKey2(`light_${lightClassNames}`);
+      state.styleRegistry.set(lightStyleKey, lightStyleObject);
+      objectProperties.push(
+        t.objectProperty(
+          t.identifier("lightStyle"),
+          t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(lightStyleKey))
+        )
+      );
+    }
+  }
+  const hasPlatformModifiers = platformModifiers.length > 0;
+  if (hasPlatformModifiers) {
+    state.needsPlatformImport = true;
+    const platformSelectExpression = processPlatformModifiers(
+      platformModifiers,
+      state,
+      parseClassName2,
+      generateStyleKey2,
+      t
+    );
+    if (hasColorSchemeModifiers && componentScope) {
+      const styleProperty = objectProperties.find(
+        (prop) => t.isIdentifier(prop.key) && prop.key.name === "style"
+      );
+      if (styleProperty && t.isArrayExpression(styleProperty.value)) {
+        styleProperty.value.elements.push(platformSelectExpression);
+      }
+    } else {
+      const styleArrayElements = [];
+      if (baseClasses.length > 0) {
+        const baseClassName = baseClasses.join(" ");
+        const baseStyleObject = parseClassName2(baseClassName, state.customTheme);
+        const baseStyleKey = generateStyleKey2(baseClassName);
+        state.styleRegistry.set(baseStyleKey, baseStyleObject);
+        styleArrayElements.push(
+          t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(baseStyleKey))
+        );
+      }
+      styleArrayElements.push(platformSelectExpression);
+      objectProperties[0] = t.objectProperty(t.identifier("style"), t.arrayExpression(styleArrayElements));
+    }
+    const iosModifiers = platformModifiers.filter((m) => m.modifier === "ios");
+    const androidModifiers = platformModifiers.filter((m) => m.modifier === "android");
+    const webModifiers = platformModifiers.filter((m) => m.modifier === "web");
+    if (iosModifiers.length > 0) {
+      const iosClassNames = iosModifiers.map((m) => m.baseClass).join(" ");
+      const iosStyleObject = parseClassName2(iosClassNames, state.customTheme);
+      const iosStyleKey = generateStyleKey2(`ios_${iosClassNames}`);
+      state.styleRegistry.set(iosStyleKey, iosStyleObject);
+      objectProperties.push(
+        t.objectProperty(
+          t.identifier("iosStyle"),
+          t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(iosStyleKey))
+        )
+      );
+    }
+    if (androidModifiers.length > 0) {
+      const androidClassNames = androidModifiers.map((m) => m.baseClass).join(" ");
+      const androidStyleObject = parseClassName2(androidClassNames, state.customTheme);
+      const androidStyleKey = generateStyleKey2(`android_${androidClassNames}`);
+      state.styleRegistry.set(androidStyleKey, androidStyleObject);
+      objectProperties.push(
+        t.objectProperty(
+          t.identifier("androidStyle"),
+          t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(androidStyleKey))
+        )
+      );
+    }
+    if (webModifiers.length > 0) {
+      const webClassNames = webModifiers.map((m) => m.baseClass).join(" ");
+      const webStyleObject = parseClassName2(webClassNames, state.customTheme);
+      const webStyleKey = generateStyleKey2(`web_${webClassNames}`);
+      state.styleRegistry.set(webStyleKey, webStyleObject);
+      objectProperties.push(
+        t.objectProperty(
+          t.identifier("webStyle"),
+          t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(webStyleKey))
+        )
+      );
+    }
+  }
   const modifiersByType = /* @__PURE__ */ new Map();
-  for (const mod of modifierClasses) {
+  for (const mod of otherModifiers) {
     if (!modifiersByType.has(mod.modifier)) {
       modifiersByType.set(mod.modifier, []);
     }
@@ -2852,6 +2990,8 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
     darkSuffix: options?.schemeModifier?.darkSuffix ?? "-dark",
     lightSuffix: options?.schemeModifier?.lightSuffix ?? "-light"
   };
+  const colorSchemeImportSource = options?.colorScheme?.importFrom ?? "react-native";
+  const colorSchemeHookName = options?.colorScheme?.importName ?? "useColorScheme";
   return {
     name: "react-native-tailwind",
     visitor: {
@@ -2865,12 +3005,18 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
           state.hasColorSchemeImport = false;
           state.needsColorSchemeImport = false;
           state.colorSchemeVariableName = "_twColorScheme";
+          state.colorSchemeImportSource = colorSchemeImportSource;
+          state.colorSchemeHookName = colorSchemeHookName;
           state.supportedAttributes = exactMatches;
           state.attributePatterns = patterns;
           state.stylesIdentifier = stylesIdentifier;
           state.twImportNames = /* @__PURE__ */ new Set();
           state.hasTwImport = false;
           state.functionComponentsNeedingColorScheme = /* @__PURE__ */ new Set();
+          state.hasColorSchemeImport = false;
+          state.colorSchemeLocalIdentifier = void 0;
+          state.needsPlatformImport = false;
+          state.hasPlatformImport = false;
           state.customTheme = extractCustomTheme(state.file.opts.filename ?? "");
           state.schemeModifierConfig = schemeModifierConfig;
         },
@@ -2888,11 +3034,17 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
             addPlatformImport(path2, t);
           }
           if (state.needsColorSchemeImport && !state.hasColorSchemeImport) {
-            addColorSchemeImport(path2, t);
+            addColorSchemeImport(path2, state.colorSchemeImportSource, state.colorSchemeHookName, t);
           }
           if (state.needsColorSchemeImport) {
             for (const functionPath of state.functionComponentsNeedingColorScheme) {
-              injectColorSchemeHook(functionPath, state.colorSchemeVariableName, t);
+              injectColorSchemeHook(
+                functionPath,
+                state.colorSchemeVariableName,
+                state.colorSchemeHookName,
+                state.colorSchemeLocalIdentifier,
+                t
+              );
             }
           }
           injectStylesAtTop(path2, state.styleRegistry, state.stylesIdentifier, t);
@@ -2915,23 +3067,26 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
             }
             return false;
           });
-          const hasUseColorScheme = specifiers.some((spec) => {
-            if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
-              return spec.imported.name === "useColorScheme";
-            }
-            return false;
-          });
           if (hasStyleSheet) {
             state.hasStyleSheetImport = true;
           }
           if (hasPlatform) {
             state.hasPlatformImport = true;
           }
-          if (hasUseColorScheme) {
-            state.hasColorSchemeImport = true;
-          }
           state.reactNativeImportPath = path2;
         }
+        if (node.source.value === state.colorSchemeImportSource && node.importKind !== "type") {
+          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;
+                state.colorSchemeLocalIdentifier = spec.local.name;
+                break;
+              }
+            }
+          }
+        }
         if (node.source.value === "@mgcrea/react-native-tailwind") {
           const specifiers = node.specifiers;
           specifiers.forEach((spec) => {
@@ -2976,7 +3131,16 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
           return;
         }
         state.hasClassNames = true;
-        processTwCall(className, path2, state, parseClassName, generateStyleKey, splitModifierClasses, t);
+        processTwCall(
+          className,
+          path2,
+          state,
+          parseClassName,
+          generateStyleKey,
+          splitModifierClasses,
+          findComponentScope,
+          t
+        );
       },
       // Handle twStyle('...') call expressions
       CallExpression(path2, state) {
@@ -3011,7 +3175,16 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
           return;
         }
         state.hasClassNames = true;
-        processTwCall(className, path2, state, parseClassName, generateStyleKey, splitModifierClasses, t);
+        processTwCall(
+          className,
+          path2,
+          state,
+          parseClassName,
+          generateStyleKey,
+          splitModifierClasses,
+          findComponentScope,
+          t
+        );
       },
       JSXAttribute(path2, state) {
         const node = path2.node;
@@ -3024,14 +3197,14 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
         }
         const value = node.value;
         const targetStyleProp = getTargetStyleProp(attributeName);
-        if (t.isStringLiteral(value)) {
-          const className = value.value.trim();
-          if (!className) {
+        const processStaticClassName = (className) => {
+          const trimmedClassName = className.trim();
+          if (!trimmedClassName) {
             path2.remove();
-            return;
+            return true;
           }
           state.hasClassNames = true;
-          const { baseClasses, modifierClasses: rawModifierClasses } = splitModifierClasses(className);
+          const { baseClasses, modifierClasses: rawModifierClasses } = splitModifierClasses(trimmedClassName);
           const modifierClasses = [];
           for (const modifier of rawModifierClasses) {
             if (isSchemeModifier(modifier.modifier)) {
@@ -3155,7 +3328,7 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
               } else {
                 replaceWithStyleFunctionAttribute(path2, styleFunctionExpression, targetStyleProp, t);
               }
-              return;
+              return true;
             } else {
             }
           }
@@ -3206,7 +3379,7 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
               path2.node.name = t.jsxIdentifier(targetStyleProp);
               path2.node.value = t.jsxExpressionContainer(styleExpression);
             }
-            return;
+            return true;
           }
           if (hasStateModifiers) {
             const jsxOpeningElement = path2.parent;
@@ -3244,11 +3417,11 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
                   } else {
                     replaceWithStyleFunctionAttribute(path2, styleFunctionExpression, targetStyleProp, t);
                   }
-                  return;
+                  return true;
                 }
               } else {
                 const styleExpression = processStaticClassNameWithModifiers(
-                  className,
+                  trimmedClassName,
                   state,
                   parseClassName,
                   generateStyleKey,
@@ -3263,7 +3436,7 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
                 } else {
                   replaceWithStyleFunctionAttribute(path2, styleFunctionExpression, targetStyleProp, t);
                 }
-                return;
+                return true;
               }
             } else {
               if (process.env.NODE_ENV !== "production") {
@@ -3277,7 +3450,7 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
           const classNameForStyle = baseClasses.join(" ");
           if (!classNameForStyle) {
             path2.remove();
-            return;
+            return true;
           }
           const styleObject = parseClassName(classNameForStyle, state.customTheme);
           const styleKey = generateStyleKey(classNameForStyle);
@@ -3288,13 +3461,23 @@ function reactNativeTailwindBabelPlugin({ types: t }, options) {
           } else {
             replaceWithStyleAttribute(path2, styleKey, targetStyleProp, state.stylesIdentifier, t);
           }
-          return;
+          return true;
+        };
+        if (t.isStringLiteral(value)) {
+          if (processStaticClassName(value.value)) {
+            return;
+          }
         }
         if (t.isJSXExpressionContainer(value)) {
           const expression = value.expression;
           if (t.isJSXEmptyExpression(expression)) {
             return;
           }
+          if (t.isStringLiteral(expression)) {
+            if (processStaticClassName(expression.value)) {
+              return;
+            }
+          }
           try {
             const componentScope = findComponentScope(path2, t);
             const result = processDynamicExpression(

package/dist/babel/plugin.d.ts

@@ -41,6 +41,40 @@ 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 & {
     styleRegistry: Map<string, StyleObject>;
@@ -51,6 +85,9 @@ type PluginState = PluginPass & {
     hasColorSchemeImport: boolean;
     needsColorSchemeImport: boolean;
     colorSchemeVariableName: string;
+    colorSchemeImportSource: string;
+    colorSchemeHookName: string;
+    colorSchemeLocalIdentifier?: string;
     customTheme: CustomTheme;
     schemeModifierConfig: SchemeModifierConfig;
     supportedAttributes: Set<string>;