@stylexjs/babel-plugin 0.5.0-alpha.2 → 0.5.0-alpha.4

package/lib/index.js

@@ -145,6 +145,118 @@ const logAndDefault = (check, value, def, name) => {
   return result;
 };
 
+function isArrayExpression(path, props) {
+  return path.isArrayExpression(props);
+}
+function isArrowFunctionExpression(path, props) {
+  return path.isArrowFunctionExpression(props);
+}
+function isBinaryExpression(path, props) {
+  return path.isBinaryExpression(props);
+}
+function isBooleanLiteral(path, props) {
+  return path.isBooleanLiteral(props);
+}
+function isCallExpression(path, props) {
+  return path.isCallExpression(props);
+}
+function isClass(path, props) {
+  return path.isClass(props);
+}
+function isConditionalExpression(path, props) {
+  return path.isConditionalExpression(props);
+}
+function isExportDefaultDeclaration(path, props) {
+  return path.isExportDefaultDeclaration(props);
+}
+function isExportNamedDeclaration(path, props) {
+  return path.isExportNamedDeclaration(props);
+}
+function isExpression(path, props) {
+  return path.isExpression(props);
+}
+function isExpressionStatement(path, props) {
+  return path.isExpressionStatement(props);
+}
+function isExpressionWrapper(path, props) {
+  return path.isExpressionWrapper(props);
+}
+function isFunction(path, props) {
+  return path.isFunction(props);
+}
+function isIdentifier(path, props) {
+  return path.isIdentifier(props);
+}
+function isImportDeclaration(path, props) {
+  return path.isImportDeclaration(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);
+}
+function isLogicalExpression(path, props) {
+  return path.isLogicalExpression(props);
+}
+function isMemberExpression(path, props) {
+  return path.isMemberExpression(props);
+}
+function isNullLiteral(path, props) {
+  return path.isNullLiteral(props);
+}
+function isNumericLiteral(path, props) {
+  return path.isNumericLiteral(props);
+}
+function isObjectExpression(path, props) {
+  return path.isObjectExpression(props);
+}
+function isObjectMethod(path, props) {
+  return path.isObjectMethod(props);
+}
+function isObjectProperty(path, props) {
+  return path.isObjectProperty(props);
+}
+function isProgram(path, props) {
+  return path.isProgram(props);
+}
+function isSequenceExpression(path, props) {
+  return path.isSequenceExpression(props);
+}
+function isSpreadElement(path, props) {
+  return path.isSpreadElement(props);
+}
+function isStatement(path, props) {
+  return path.isStatement(props);
+}
+function isStringLiteral(path, props) {
+  return path.isStringLiteral(props);
+}
+function isTSAsExpression(path, props) {
+  return path.isTSAsExpression(props);
+}
+function isTaggedTemplateExpression(path, props) {
+  return path.isTaggedTemplateExpression(props);
+}
+function isTemplateLiteral(path, props) {
+  return path.isTemplateLiteral(props);
+}
+function isUnaryExpression(path, props) {
+  return path.isUnaryExpression(props);
+}
+function isVariableDeclaration(path, props) {
+  return path.isVariableDeclaration(props);
+}
+function isVariableDeclarator(path, props) {
+  return path.isVariableDeclarator(props);
+}
+function isReferencedIdentifier(path, props) {
+  return path.isReferencedIdentifier(props);
+}
+
 const CheckModuleResolution = unionOf3(object({
   type: literal('commonJS'),
   rootDir: string(),
@@ -253,6 +365,56 @@ class StateManager {
       from: runInj
     } : runInj || null;
   }
+  addNamedImport(statementPath, as, from, options) {
+    const identifier = helperModuleImports.addNamed(statementPath, as, from, options);
+    const programPath = getProgramPath(statementPath);
+    if (programPath == null) {
+      return identifier;
+    }
+    const bodyPath = programPath.get('body');
+    let lastImportIndex = -1;
+    for (let i = 0; i < bodyPath.length; i++) {
+      const statement = bodyPath[i];
+      if (isImportDeclaration(statement)) {
+        lastImportIndex = i;
+      }
+    }
+    if (lastImportIndex === -1) {
+      return identifier;
+    }
+    const lastImport = bodyPath[lastImportIndex];
+    if (lastImport == null) {
+      return identifier;
+    }
+    const importName = statementPath.scope.generateUidIdentifier(as);
+    lastImport.insertAfter(t__namespace.variableDeclaration('var', [t__namespace.variableDeclarator(importName, identifier)]));
+    return importName;
+  }
+  addDefaultImport(statementPath, from, options) {
+    const identifier = helperModuleImports.addDefault(statementPath, from, options);
+    const programPath = getProgramPath(statementPath);
+    if (programPath == null) {
+      return identifier;
+    }
+    const bodyPath = programPath.get('body');
+    let lastImportIndex = -1;
+    for (let i = 0; i < bodyPath.length; i++) {
+      const statement = bodyPath[i];
+      if (isImportDeclaration(statement)) {
+        lastImportIndex = i;
+      }
+    }
+    if (lastImportIndex === -1) {
+      return identifier;
+    }
+    const lastImport = bodyPath[lastImportIndex];
+    if (lastImport == null) {
+      return identifier;
+    }
+    const importName = statementPath.scope.generateUidIdentifier('inject');
+    lastImport.insertAfter(t__namespace.variableDeclaration('var', [t__namespace.variableDeclarator(importName, identifier)]));
+    return importName;
+  }
   get isDev() {
     return !!this.options.dev;
   }
@@ -357,6 +519,17 @@ const addFileExtension = (importedFilePath, sourceFile) => {
   return importedFilePath + fileExtension;
 };
 const matchesFileSuffix = allowedSuffix => filename => filename.endsWith(`${allowedSuffix}.js`) || filename.endsWith(`${allowedSuffix}.ts`) || filename.endsWith(`${allowedSuffix}.tsx`) || filename.endsWith(`${allowedSuffix}.jsx`) || filename.endsWith(`${allowedSuffix}.mjs`) || filename.endsWith(`${allowedSuffix}.cjs`) || filename.endsWith(allowedSuffix);
+const getProgramPath = path => {
+  let programPath = path;
+  while (programPath != null && !isProgram(programPath)) {
+    if (programPath.parentPath) {
+      programPath = programPath.parentPath;
+    } else {
+      return null;
+    }
+  }
+  return programPath;
+};
 
 function readImportDeclarations(path, state) {
   const {
@@ -3224,118 +3397,6 @@ function canBeIdentifier(str) {
   return str.match(/^[a-zA-Z_$][a-zA-Z0-9_$]*$/) != null;
 }
 
-function isArrayExpression(path, props) {
-  return path.isArrayExpression(props);
-}
-function isArrowFunctionExpression(path, props) {
-  return path.isArrowFunctionExpression(props);
-}
-function isBinaryExpression(path, props) {
-  return path.isBinaryExpression(props);
-}
-function isBooleanLiteral(path, props) {
-  return path.isBooleanLiteral(props);
-}
-function isCallExpression(path, props) {
-  return path.isCallExpression(props);
-}
-function isClass(path, props) {
-  return path.isClass(props);
-}
-function isConditionalExpression(path, props) {
-  return path.isConditionalExpression(props);
-}
-function isExportDefaultDeclaration(path, props) {
-  return path.isExportDefaultDeclaration(props);
-}
-function isExportNamedDeclaration(path, props) {
-  return path.isExportNamedDeclaration(props);
-}
-function isExpression(path, props) {
-  return path.isExpression(props);
-}
-function isExpressionStatement(path, props) {
-  return path.isExpressionStatement(props);
-}
-function isExpressionWrapper(path, props) {
-  return path.isExpressionWrapper(props);
-}
-function isFunction(path, props) {
-  return path.isFunction(props);
-}
-function isIdentifier(path, props) {
-  return path.isIdentifier(props);
-}
-function isImportDeclaration(path, props) {
-  return path.isImportDeclaration(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);
-}
-function isLogicalExpression(path, props) {
-  return path.isLogicalExpression(props);
-}
-function isMemberExpression(path, props) {
-  return path.isMemberExpression(props);
-}
-function isNullLiteral(path, props) {
-  return path.isNullLiteral(props);
-}
-function isNumericLiteral(path, props) {
-  return path.isNumericLiteral(props);
-}
-function isObjectExpression(path, props) {
-  return path.isObjectExpression(props);
-}
-function isObjectMethod(path, props) {
-  return path.isObjectMethod(props);
-}
-function isObjectProperty(path, props) {
-  return path.isObjectProperty(props);
-}
-function isProgram(path, props) {
-  return path.isProgram(props);
-}
-function isSequenceExpression(path, props) {
-  return path.isSequenceExpression(props);
-}
-function isSpreadElement(path, props) {
-  return path.isSpreadElement(props);
-}
-function isStatement(path, props) {
-  return path.isStatement(props);
-}
-function isStringLiteral(path, props) {
-  return path.isStringLiteral(props);
-}
-function isTSAsExpression(path, props) {
-  return path.isTSAsExpression(props);
-}
-function isTaggedTemplateExpression(path, props) {
-  return path.isTaggedTemplateExpression(props);
-}
-function isTemplateLiteral(path, props) {
-  return path.isTemplateLiteral(props);
-}
-function isUnaryExpression(path, props) {
-  return path.isUnaryExpression(props);
-}
-function isVariableDeclaration(path, props) {
-  return path.isVariableDeclaration(props);
-}
-function isVariableDeclarator(path, props) {
-  return path.isVariableDeclarator(props);
-}
-function isReferencedIdentifier(path, props) {
-  return path.isReferencedIdentifier(props);
-}
-
 const VALID_CALLEES = ['String', 'Number', 'Math', 'Object', 'Array'];
 const INVALID_METHODS = ['random', 'assign', 'defineProperties', 'defineProperty', 'freeze', 'seal', 'splice'];
 function isValidCallee(val) {
@@ -4141,9 +4202,9 @@ function transformStyleXCreate(path, state) {
           from,
           as
         } = state.runtimeInjection;
-        injectName = as != null ? helperModuleImports.addNamed(statementPath, as, from, {
+        injectName = as != null ? state.addNamedImport(statementPath, as, from, {
           nameHint: 'inject'
-        }) : helperModuleImports.addDefault(statementPath, from, {
+        }) : state.addDefaultImport(statementPath, from, {
           nameHint: 'inject'
         });
         state.injectImportInserted = injectName;
@@ -4272,9 +4333,9 @@ function transformStyleXDefineVars(callExpressionPath, state) {
           from,
           as
         } = state.runtimeInjection;
-        injectName = as != null ? helperModuleImports.addNamed(statementPath, as, from, {
+        injectName = as != null ? state.addNamedImport(statementPath, as, from, {
           nameHint: 'inject'
-        }) : helperModuleImports.addDefault(statementPath, from, {
+        }) : state.addDefaultImport(statementPath, from, {
           nameHint: 'inject'
         });
         state.injectImportInserted = injectName;
@@ -4372,9 +4433,9 @@ function transformStyleXCreateTheme(callExpressionPath, state) {
           from,
           as
         } = state.runtimeInjection;
-        injectName = as != null ? helperModuleImports.addNamed(statementPath, as, from, {
+        injectName = as != null ? state.addNamedImport(statementPath, as, from, {
           nameHint: 'inject'
-        }) : helperModuleImports.addDefault(statementPath, from, {
+        }) : state.addDefaultImport(statementPath, from, {
           nameHint: 'inject'
         });
         state.injectImportInserted = injectName;
@@ -4474,9 +4535,9 @@ function transformStyleXKeyframes(path, state) {
           from,
           as
         } = state.runtimeInjection;
-        injectName = as != null ? helperModuleImports.addNamed(statementPath, as, from, {
+        injectName = as != null ? state.addNamedImport(statementPath, as, from, {
           nameHint: 'inject'
-        }) : helperModuleImports.addDefault(statementPath, from, {
+        }) : state.addDefaultImport(statementPath, from, {
           nameHint: 'inject'
         });
         state.injectImportInserted = injectName;

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

@@ -14,6 +14,11 @@ import type {
   CompiledNamespaces,
   StyleXOptions as RuntimeOptions,
 } from '@stylexjs/shared';
+import type { ImportOptions } from '@babel/helper-module-imports';
+type ImportAdditionOptions = Omit<
+  Partial<ImportOptions>,
+  'ensureLiveReference' | 'ensureNoContext'
+>;
 export type ImportPathResolution =
   | false
   | ['themeNameRef' | 'filePath', string];
@@ -103,6 +108,17 @@ declare class StateManager {
     | null
     | undefined
     | Readonly<{ from: string; as?: null | undefined | string }>;
+  addNamedImport(
+    statementPath: NodePath,
+    as: string,
+    from: string,
+    options: ImportAdditionOptions,
+  ): t.Identifier;
+  addDefaultImport(
+    statementPath: NodePath,
+    from: string,
+    options: ImportAdditionOptions,
+  ): t.Identifier;
   get isDev(): boolean;
   get isTest(): boolean;
   get filename(): string | void;

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

@@ -14,6 +14,12 @@ import type {
   CompiledNamespaces,
   StyleXOptions as RuntimeOptions,
 } from '@stylexjs/shared';
+import type { ImportOptions } from '../../flow_modules/@babel/helper-module-imports';
+type ImportAdditionOptions = Omit<
+  Partial<ImportOptions>,
+  'ensureLiveReference' | 'ensureNoContext',
+>;
+
 export type ImportPathResolution =
   | false
   | ['themeNameRef' | 'filePath', string];
@@ -79,6 +85,17 @@ declare export default class StateManager {
   get canReferenceTheme(): boolean;
   get metadata(): { [key: string]: any };
   get runtimeInjection(): ?$ReadOnly<{ from: string, as?: ?string }>;
+  addNamedImport(
+    statementPath: NodePath<>,
+    as: string,
+    from: string,
+    options: ImportAdditionOptions,
+  ): t.Identifier;
+  addDefaultImport(
+    statementPath: NodePath<>,
+    from: string,
+    options: ImportAdditionOptions,
+  ): t.Identifier;
   get isDev(): boolean;
   get isTest(): boolean;
   get filename(): string | void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/babel-plugin",
-  "version": "0.5.0-alpha.2",
+  "version": "0.5.0-alpha.4",
   "description": "StyleX babel plugin.",
   "main": "lib/index.js",
   "repository": "https://github.com/facebook/stylex",
@@ -13,8 +13,8 @@
   },
   "dependencies": {
     "@babel/helper-module-imports": "^7.22.15",
-    "@stylexjs/shared": "0.5.0-alpha.2",
-    "@stylexjs/stylex": "0.5.0-alpha.2",
+    "@stylexjs/shared": "0.5.0-alpha.4",
+    "@stylexjs/stylex": "0.5.0-alpha.4",
     "@babel/core": "^7.23.6",
     "@babel/traverse": "^7.23.6",
     "@babel/types": "^7.23.6"