fix(@stylexjs/babel-plugin): Support .js resolved file extension imports from .ts files (#839)

* Try resolving all file extensions on the base file name instead of the import string

Author: beaumontjonathan

packages/babel-plugin/__tests__/evaluation/stylex-import-evaluation-test.js

@@ -10,12 +10,14 @@
 'use strict';
 
 jest.autoMockOff();
+jest.mock('@dual-bundle/import-meta-resolve');
 
 /* eslint-disable quotes */
 const { transformSync } = require('@babel/core');
 const stylexPlugin = require('../../src/index');
 const jsx = require('@babel/plugin-syntax-jsx');
 const { utils } = require('@stylexjs/shared');
+const { moduleResolve } = require('@dual-bundle/import-meta-resolve');
 
 const hash = utils.hash;
 
@@ -402,4 +404,45 @@ describe('Evaluation of imported values works based on configuration', () => {
       `);
     });
   });
+
+  describe('Module resolution commonJS', () => {
+    afterEach(() => {
+      moduleResolve.mockReset();
+    });
+
+    test('Recognizes .ts stylex imports when resolving .js relative imports', () => {
+      moduleResolve.mockImplementation((value) => {
+        if (!value.endsWith('/otherFile.stylex.ts')) {
+          throw new Error('File not found');
+        }
+        return new URL('file:///project/otherFile.stylex.ts');
+      });
+
+      const transformation = transform(
+        `
+        import stylex from 'stylex';
+        import { MyTheme } from './otherFile.stylex.js';
+        const styles = stylex.create({
+          red: {
+            color: MyTheme.__themeName__,
+          }
+        });
+        stylex(styles.red);
+        `,
+        {
+          unstable_moduleResolution: { type: 'commonJS' },
+        },
+      );
+
+      expect(transformation.code).toMatchInlineSnapshot(`
+        "import _inject from "@stylexjs/stylex/lib/stylex-inject";
+        var _inject2 = _inject;
+        import stylex from 'stylex';
+        import './otherFile.stylex.js';
+        import { MyTheme } from './otherFile.stylex.js';
+        _inject2(".xoh8dld{color:xb897f7}", 3000);
+        "xoh8dld";"
+      `);
+    });
+  });
 });

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

@@ -657,18 +657,26 @@ function possibleAliasedPaths(
   return result;
 }
 
+// Try importing without adding any extension
+// and then every supported extension
+const getPossibleFilePaths = (filePath: string) => {
+  const extension = path.extname(filePath);
+  const filePathHasCodeExtension = EXTENSIONS.includes(extension);
+  const filePathNoCodeExtension = filePathHasCodeExtension
+    ? filePath.slice(0, -extension.length)
+    : filePath;
+
+  return [filePath, ...EXTENSIONS.map((ext) => filePathNoCodeExtension + ext)];
+};
+
 // a function that resolves the absolute path of a file when given the
 // relative path of the file from the source file
 const filePathResolver = (
   relativeFilePath: string,
   sourceFilePath: string,
   aliases: StyleXStateOptions['aliases'],
 ): ?string => {
-  // Try importing without adding any extension
-  // and then every supported extension
-  for (const ext of ['', ...EXTENSIONS]) {
-    const importPathStr = relativeFilePath + ext;
-
+  for (const importPathStr of getPossibleFilePaths(relativeFilePath)) {
     // Try to resolve relative paths as is
     if (importPathStr.startsWith('.')) {
       try {
@@ -712,13 +720,9 @@ const addFileExtension = (
 };
 
 const matchesFileSuffix = (allowedSuffix: string) => (filename: string) =>
-  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);
+  ['', ...EXTENSIONS].some((extension) =>
+    filename.endsWith(`${allowedSuffix}${extension}`),
+  );
 
 const getProgramPath = (path: NodePath<>): null | NodePath<t.Program> => {
   let programPath = path;