@stylexjs/babel-plugin 0.2.0-beta.24 → 0.2.0-beta.25

package/lib/index.js

@@ -30,6 +30,7 @@ var t__namespace = /*#__PURE__*/_interopNamespaceDefault(t);
 var name = "@stylexjs/stylex";
 
 class StateManager {
+  importPaths = new Set();
   stylexImport = new Set();
   stylexPropsImport = new Set();
   stylexCreateImport = new Set();
@@ -64,6 +65,15 @@ class StateManager {
     this._state.opts = opts;
     return this._state.opts;
   }
+  get importPathString() {
+    if (this.importPaths.has('@stylexjs/stylex')) {
+      return '@stylexjs/stylex';
+    }
+    if (this.importPaths.size > 0) {
+      return [...this.importPaths][0];
+    }
+    return '@stylexjs/stylex';
+  }
   get canReferenceTheme() {
     return !!this.inStyleXCreate;
   }
@@ -149,7 +159,7 @@ const filePathResolver = (relativeFilePath, sourceFilePath) => {
   const fileToLookFor = relativeFilePath;
   if (EXTENSIONS.some(ext => fileToLookFor.endsWith(ext))) {
     try {
-      const resolvedFilePath = fileToLookFor.startsWith('./') || fileToLookFor.startsWith('../') ? path.join(path.dirname(sourceFilePath), fileToLookFor) : require.resolve(fileToLookFor, {
+      const resolvedFilePath = require.resolve(fileToLookFor, {
         paths: [path.dirname(sourceFilePath)]
       });
       return resolvedFilePath;
@@ -157,7 +167,8 @@ const filePathResolver = (relativeFilePath, sourceFilePath) => {
   }
   for (const ext of EXTENSIONS) {
     try {
-      const resolvedFilePath = fileToLookFor.startsWith('./') || fileToLookFor.startsWith('../') ? path.join(path.dirname(sourceFilePath), fileToLookFor + ext) : require.resolve(fileToLookFor + ext, {
+      const importPathStr = fileToLookFor.startsWith('.') ? fileToLookFor + ext : fileToLookFor;
+      const resolvedFilePath = require.resolve(importPathStr, {
         paths: [path.dirname(sourceFilePath)]
       });
       return resolvedFilePath;
@@ -182,6 +193,7 @@ function readImportDeclarations(path, state) {
     return;
   }
   if (state.options.importSources.includes(node.source.value)) {
+    state.importPaths.add(node.source.value);
     for (const specifier of node.specifiers) {
       if (specifier.type === 'ImportDefaultSpecifier') {
         state.stylexImport.add(specifier.local.name);
@@ -250,7 +262,10 @@ function readRequires(path, state) {
   const {
     node
   } = path;
-  if (node.init?.type === 'CallExpression' && node.init?.callee?.type === 'Identifier' && node.init?.callee?.name === 'require' && node.init?.arguments?.length === 1 && node.init?.arguments?.[0].type === 'StringLiteral' && (node.init?.arguments?.[0].value === 'stylex' || state.options.importSources.includes(node.init?.arguments?.[0].value))) {
+  const init = node.init;
+  if (init != null && init.type === 'CallExpression' && init.callee?.type === 'Identifier' && init.callee?.name === 'require' && init.arguments?.length === 1 && init.arguments?.[0].type === 'StringLiteral' && state.options.importSources.includes(init.arguments[0].value)) {
+    const importPath = init.arguments[0].value;
+    importPath != null && state.importPaths.add(importPath);
     if (node.id.type === 'Identifier') {
       state.stylexImport.add(node.id.name);
     }
@@ -3108,6 +3123,9 @@ function isImportDeclaration(path, props) {
 function isImportDefaultSpecifier(path, props) {
   return path.isImportDefaultSpecifier(props);
 }
+function isImportNamespaceSpecifier(path, props) {
+  return path.isImportNamespaceSpecifier(props);
+}
 function isImportSpecifier(path, props) {
   return path.isImportSpecifier(props);
 }
@@ -3365,7 +3383,7 @@ function _evaluate(path, state) {
   if (isReferencedIdentifier(path)) {
     const binding = path.scope?.getBinding(path.node.name);
     const bindingPath = binding?.path;
-    if (binding && bindingPath && !isImportDefaultSpecifier(bindingPath) && isImportSpecifier(bindingPath)) {
+    if (binding && bindingPath && !isImportDefaultSpecifier(bindingPath) && !isImportNamespaceSpecifier(bindingPath) && isImportSpecifier(bindingPath)) {
       const importSpecifierPath = bindingPath;
       const importSpecifierNode = importSpecifierPath.node;
       const imported = importSpecifierNode.imported;
@@ -3379,6 +3397,10 @@ function _evaluate(path, state) {
         const [type, value] = absPath;
         const returnValue = type === 'themeNameRef' ? evaluateThemeRef(value, importedName, state) : evaluateImportedFile(value, importedName, state);
         if (state.confident) {
+          if (!state.addedImports.has(importPath.node.source.value)) {
+            importPath.insertBefore(t__namespace.importDeclaration([], importPath.node.source));
+            state.addedImports.add(importPath.node.source.value);
+          }
           return returnValue;
         } else {
           deopt(binding.path, state);
@@ -3647,15 +3669,19 @@ function evaluateQuasis(path, quasis, state) {
   if (!state.confident) return;
   return str;
 }
+const importsForState = new WeakMap();
 function evaluate(path, traversalState) {
   let functions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
     identifiers: {},
     memberExpressions: {}
   };
+  const addedImports = importsForState.get(traversalState) ?? new Set();
+  importsForState.set(traversalState, addedImports);
   const state = {
     confident: true,
     deoptPath: null,
     seen: new Map(),
+    addedImports,
     functions,
     traversalState
   };
@@ -4001,7 +4027,7 @@ function getStylexDefaultImport(path, state) {
   });
   if (stylexName == null) {
     stylexName = '__stylex__';
-    statementPath.insertBefore(t__namespace.importDeclaration([t__namespace.importDefaultSpecifier(t__namespace.identifier(stylexName))], t__namespace.stringLiteral('stylex')));
+    statementPath.insertBefore(t__namespace.importDeclaration([t__namespace.importDefaultSpecifier(t__namespace.identifier(stylexName))], t__namespace.stringLiteral(state.importPathString)));
     state.stylexImport.add(stylexName);
   }
   return stylexName;
@@ -4070,7 +4096,7 @@ function transformStyleXDefineVars(callExpressionPath, state) {
       });
       if (stylexName == null) {
         stylexName = '__stylex__';
-        statementPath.insertBefore(t__namespace.importDeclaration([t__namespace.importDefaultSpecifier(t__namespace.identifier(stylexName))], t__namespace.stringLiteral('stylex')));
+        statementPath.insertBefore(t__namespace.importDeclaration([t__namespace.importDefaultSpecifier(t__namespace.identifier(stylexName))], t__namespace.stringLiteral(state.importPathString)));
       }
       statementPath.insertBefore(t__namespace.expressionStatement(t__namespace.callExpression(t__namespace.memberExpression(t__namespace.identifier(stylexName), t__namespace.identifier('inject')), [t__namespace.stringLiteral(css), t__namespace.numericLiteral(0)])));
     }
@@ -4151,7 +4177,7 @@ function transformStyleXCreateTheme(callExpressionPath, state) {
       });
       if (stylexName == null) {
         stylexName = '__stylex__';
-        statementPath?.insertBefore(t__namespace.importDeclaration([t__namespace.importDefaultSpecifier(t__namespace.identifier(stylexName))], t__namespace.stringLiteral('stylex')));
+        statementPath?.insertBefore(t__namespace.importDeclaration([t__namespace.importDefaultSpecifier(t__namespace.identifier(stylexName))], t__namespace.stringLiteral(state.importPathString)));
       }
       statementPath?.insertBefore(t__namespace.expressionStatement(t__namespace.callExpression(t__namespace.memberExpression(t__namespace.identifier(stylexName), t__namespace.identifier('inject')), [t__namespace.stringLiteral(css[styleKey].ltr), t__namespace.numericLiteral(css[styleKey].priority)])));
     }
@@ -4218,7 +4244,7 @@ function transformStyleXKeyframes(path, state) {
       });
       if (stylexName == null) {
         stylexName = '__stylex__';
-        statementPath.insertBefore(t__namespace.importDeclaration([t__namespace.importDefaultSpecifier(t__namespace.identifier(stylexName))], t__namespace.stringLiteral('stylex')));
+        statementPath.insertBefore(t__namespace.importDeclaration([t__namespace.importDefaultSpecifier(t__namespace.identifier(stylexName))], t__namespace.stringLiteral(state.importPathString)));
       }
       statementPath.insertBefore(t__namespace.expressionStatement(t__namespace.callExpression(t__namespace.memberExpression(t__namespace.identifier(stylexName), t__namespace.identifier('inject')), [t__namespace.stringLiteral(ltr), t__namespace.numericLiteral(priority), ...(rtl != null ? [t__namespace.stringLiteral(rtl)] : [])])));
     }

package/lib/utils/evaluate-path.d.ts

@@ -22,22 +22,6 @@ export type FunctionConfig = {
     };
   };
 };
-/**
- * Walk the input `node` and statically evaluate it.
- *
- * Returns an object in the form `{ confident, value, deopt }`. `confident`
- * indicates whether or not we had to drop out of evaluating the expression
- * because of hitting an unknown node that we couldn't confidently find the
- * value of, in which case `deopt` is the path of said node.
- *
- * Example:
- *
- *   evaluate(parse("5 + 5")) // { confident: true, value: 10 }
- *   evaluate(parse("!true")) // { confident: true, value: false }
- *   evaluate(parse("foo + foo")) // { confident: false, value: undefined, deopt: NodePath }
- *
- */
-
 export declare function evaluate(
   path: NodePath,
   traversalState: StateManager,

package/lib/utils/evaluate-path.js.flow

@@ -26,22 +26,6 @@ export type FunctionConfig = {
   },
 };
 
-/**
- * Walk the input `node` and statically evaluate it.
- *
- * Returns an object in the form `{ confident, value, deopt }`. `confident`
- * indicates whether or not we had to drop out of evaluating the expression
- * because of hitting an unknown node that we couldn't confidently find the
- * value of, in which case `deopt` is the path of said node.
- *
- * Example:
- *
- *   evaluate(parse("5 + 5")) // { confident: true, value: 10 }
- *   evaluate(parse("!true")) // { confident: true, value: false }
- *   evaluate(parse("foo + foo")) // { confident: false, value: undefined, deopt: NodePath }
- *
- */
-
 declare export function evaluate(
   path: NodePath<>,
   traversalState: StateManager,

package/lib/utils/state-manager.d.ts

@@ -38,6 +38,7 @@ type StyleXOptions = Omit<
 };
 declare class StateManager {
   readonly _state: PluginPass;
+  readonly importPaths: Set<string>;
   readonly stylexImport: Set<string>;
   readonly stylexPropsImport: Set<string>;
   readonly stylexCreateImport: Set<string>;
@@ -53,6 +54,7 @@ declare class StateManager {
   inStyleXCreate: boolean;
   constructor(state: PluginPass);
   get options(): StyleXOptions;
+  get importPathString(): string;
   get canReferenceTheme(): boolean;
   get metadata(): { [key: string]: any };
   get stylexSheetName(): string | void;

package/lib/utils/state-manager.js.flow

@@ -43,6 +43,7 @@ type StyleXOptions = {
 
 declare export default class StateManager {
   +_state: PluginPass;
+  +importPaths: Set<string>;
   +stylexImport: Set<string>;
   +stylexPropsImport: Set<string>;
   +stylexCreateImport: Set<string>;
@@ -58,6 +59,7 @@ declare export default class StateManager {
   inStyleXCreate: boolean;
   constructor(state: PluginPass): void;
   get options(): StyleXOptions;
+  get importPathString(): string;
   get canReferenceTheme(): boolean;
   get metadata(): { [key: string]: any };
   get stylexSheetName(): string | void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/babel-plugin",
-  "version": "0.2.0-beta.24",
+  "version": "0.2.0-beta.25",
   "description": "StyleX babel plugin.",
   "main": "lib/index.js",
   "repository": "https://github.com/facebook/stylex",
@@ -12,7 +12,7 @@
     "test": "jest"
   },
   "dependencies": {
-    "@stylexjs/shared": "0.2.0-beta.24"
+    "@stylexjs/shared": "0.2.0-beta.25"
   },
   "peerDependencies": {
     "@babel/core": "^7.19.6",