[fix] Disable using imported values for stylex.props

Author: nmn

packages/@stylexjs/babel-plugin/src/utils/evaluate-path.js

@@ -63,6 +63,7 @@ export type FunctionConfig = {
       },
     },
   },
+  disableImports?: boolean,
 };
 
 type State = {
@@ -414,7 +415,11 @@ function _evaluate(path: NodePath<>, state: State): any {
       const importedName =
         imported.type === 'Identifier' ? imported.name : imported.value;
       const importPath = binding.path.parentPath;
-      if (importPath && importPath.isImportDeclaration()) {
+      if (
+        importPath &&
+        importPath.isImportDeclaration() &&
+        !state.functions.disableImports
+      ) {
         const absPath = state.traversalState.importPathResolver(
           importPath.node.source.value,
         );
@@ -906,7 +911,11 @@ const importsForState = new WeakMap<StateManager, Set<string>>();
 export function evaluate(
   path: NodePath<>,
   traversalState: StateManager,
-  functions: FunctionConfig = { identifiers: {}, memberExpressions: {} },
+  functions: FunctionConfig = {
+    identifiers: {},
+    memberExpressions: {},
+    disableImports: false,
+  },
   seen: Map<t.Node, Result> = new Map(),
 ): $ReadOnly<{
   confident: boolean,

packages/@stylexjs/babel-plugin/src/visitors/stylex-props.js

@@ -85,6 +85,7 @@ export default function transformStylexProps(
   const evaluatePathFnConfig: FunctionConfig = {
     identifiers,
     memberExpressions,
+    disableImports: true,
   };
 
   const resolvedArgs: ResolvedArgs = [];
@@ -212,34 +213,29 @@ export default function transformStylexProps(
         if (nonNullProps === true) {
           styleNonNullProps = true;
         } else {
-          try {
-            const { confident, value: styleValue } = evaluate(
-              path,
-              state,
-              evaluatePathFnConfig,
-            );
-            if (
-              !confident ||
-              styleValue == null ||
-              styleValue.__IS_PROXY === true
-            ) {
-              nonNullProps = true;
-              styleNonNullProps = true;
-            } else {
-              styleNonNullProps =
-                nonNullProps === true ? true : [...nonNullProps];
-              if (nonNullProps !== true) {
-                nonNullProps = [
-                  ...nonNullProps,
-                  ...Object.keys(styleValue).filter(
-                    (key) => styleValue[key] !== null,
-                  ),
-                ];
-              }
-            }
-          } catch {
+          const { confident, value: styleValue } = evaluate(
+            path,
+            state,
+            evaluatePathFnConfig,
+          );
+          if (
+            !confident ||
+            styleValue == null ||
+            styleValue.__IS_PROXY === true
+          ) {
             nonNullProps = true;
             styleNonNullProps = true;
+          } else {
+            styleNonNullProps =
+              nonNullProps === true ? true : [...nonNullProps];
+            if (nonNullProps !== true) {
+              nonNullProps = [
+                ...nonNullProps,
+                ...Object.keys(styleValue).filter(
+                  (key) => styleValue[key] !== null,
+                ),
+              ];
+            }
           }
         }
 
@@ -360,20 +356,16 @@ function parseNullableStyle(
     }
   }
 
-  try {
-    const parsedObj = evaluate(path, state, evaluatePathFnConfig);
-    if (
-      parsedObj.confident &&
-      parsedObj.value != null &&
-      typeof parsedObj.value === 'object'
-    ) {
-      if (parsedObj.value.__IS_PROXY === true) {
-        return 'other';
-      }
-      return parsedObj.value;
+  const parsedObj = evaluate(path, state, evaluatePathFnConfig);
+  if (
+    parsedObj.confident &&
+    parsedObj.value != null &&
+    typeof parsedObj.value === 'object'
+  ) {
+    if (parsedObj.value.__IS_PROXY === true) {
+      return 'other';
     }
-  } catch {
-    return 'other';
+    return parsedObj.value;
   }
 
   return 'other';