add esm resolver

packages/babel-plugin/package.json

@@ -18,7 +18,8 @@
     "@stylexjs/stylex": "0.7.5",
     "@babel/core": "^7.23.6",
     "@babel/traverse": "^7.23.6",
-    "@babel/types": "^7.23.6"
+    "@babel/types": "^7.23.6",
+    "esm-resolve": "^1.0.11"
   },
   "jest": {
     "verbose": true,

packages/babel-plugin/src/utils/state-manager.js

@@ -21,6 +21,7 @@ import * as z from './validate';
 import { addDefault, addNamed } from '@babel/helper-module-imports';
 import type { ImportOptions } from '@babel/helper-module-imports';
 import * as pathUtils from '../babel-path-utils';
+import { buildResolver } from 'esm-resolve';
 
 type ImportAdditionOptions = Omit<
   Partial<ImportOptions>,
@@ -45,6 +46,11 @@ type ModuleResolution =
       type: 'experimental_crossFileParsing',
       rootDir: string,
       themeFileExtension?: ?string,
+    }>
+  | $ReadOnly<{
+      type: 'esm',
+      rootDir: string,
+      themeFileExtension?: ?string,
     }>;
 
 // eslint-disable-next-line no-unused-vars
@@ -486,6 +492,24 @@ export default class StateManager {
           ? ['themeNameRef', path.relative(rootDir, resolvedFilePath)]
           : false;
       }
+      case 'esm': {
+        const rootDir = this.options.unstable_moduleResolution.rootDir;
+        const aliases = this.options.aliases;
+        const themeFileExtension =
+          this.options.unstable_moduleResolution?.themeFileExtension ??
+          '.stylex';
+        if (!matchesFileSuffix(themeFileExtension)(importPath)) {
+          return false;
+        }
+        const resolvedFilePath = esmFilePathResolver(
+          importPath,
+          sourceFilePath,
+          aliases,
+        );
+        return resolvedFilePath
+          ? ['themeNameRef', path.relative(rootDir, resolvedFilePath)]
+          : false;
+      }
       case 'haste': {
         const themeFileExtension =
           this.options.unstable_moduleResolution.themeFileExtension ??
@@ -645,6 +669,45 @@ const filePathResolver = (
   return null;
 };
 
+const esmFilePathResolver = (
+  relativeFilePath: string,
+  sourceFilePath: string,
+  aliases: StyleXStateOptions['aliases'],
+): ?string => {
+  const esmResolve = buildResolver(sourceFilePath);
+
+  // Try importing without adding any extension
+  // and then every supported extension
+  for (const ext of ['', ...EXTENSIONS]) {
+    const importPathStr = relativeFilePath + ext;
+
+    // Try to resolve relative paths as is
+    if (importPathStr.startsWith('.')) {
+      const resolved = esmResolve(importPathStr, {
+        allowImportingExtraExtensions: true,
+      });
+
+      if (resolved) {
+        return resolved;
+      }
+    }
+
+    // Otherwise, try to resolve the path with aliases
+    const allAliases = possibleAliasedPaths(importPathStr, aliases);
+    for (const possiblePath of allAliases) {
+      const resolved = esmResolve(possiblePath, {
+        allowImportingExtraExtensions: true,
+      });
+
+      if (resolved) {
+        return resolved;
+      }
+    }
+  }
+  // Failed to resolve the file path
+  return null;
+};
+
 const EXTENSIONS = ['.js', '.ts', '.tsx', '.jsx', '.mjs', '.cjs'];
 
 const addFileExtension = (

packages/esbuild-plugin/README.md

@@ -38,7 +38,7 @@ esbuild.build({
       stylexImports: ['@stylexjs/stylex'],
       // Required for CSS variable support
       unstable_moduleResolution: {
-        // type: 'commonJS' | 'ESModules' | 'haste'
+        // type: 'commonJS' | 'esm' | 'haste'
         // default: 'commonJS'
         type: 'commonJS',
         // The absolute path to the root of your project

packages/webpack-plugin/README.md

@@ -52,7 +52,7 @@ const config = (env, argv) => ({
       classNamePrefix: 'x',
       // Required for CSS variable support
       unstable_moduleResolution: {
-        // type: 'commonJS' | 'haste'
+        // type: 'commonJS' | 'esm' | 'haste'
         // default: 'commonJS'
         type: 'commonJS',
         // The absolute path to the root directory of your project