From 5096fdb46d768dff6e3c36b4167a847894e1acf4 Mon Sep 17 00:00:00 2001 From: beaumontjonathan Date: Sun, 5 Jan 2025 17:56:11 +0000 Subject: [PATCH 1/3] Try resolving all file extensions on the base file name instead of the import string --- .../babel-plugin/src/utils/state-manager.js | 32 +++++++++++-------- 1 file changed, 19 insertions(+), 13 deletions(-) diff --git a/packages/babel-plugin/src/utils/state-manager.js b/packages/babel-plugin/src/utils/state-manager.js index 1842f5c7..b69a5152 100644 --- a/packages/babel-plugin/src/utils/state-manager.js +++ b/packages/babel-plugin/src/utils/state-manager.js @@ -657,6 +657,20 @@ function possibleAliasedPaths( return result; } +const getPossibleFilePaths = (filePath: string) => { + const extension = path.extname(filePath); + const filePathWithoutSourceExtension = + extension === '' || !EXTENSIONS.includes(extension) + ? filePath + : filePath.slice(0, -extension.length); + // Try importing without adding any extension + // and then every supported extension + return [ + filePath, + ...EXTENSIONS.map((ext) => filePathWithoutSourceExtension + 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 = ( @@ -664,11 +678,7 @@ const filePathResolver = ( 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 { @@ -685,7 +695,7 @@ const filePathResolver = ( try { return moduleResolve(possiblePath, url.pathToFileURL(sourceFilePath)) .pathname; - } catch { + } catch (error) { continue; } } @@ -712,13 +722,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 => { let programPath = path; From 4a7ce5386fd89e0d47b2294f01244715902e8a43 Mon Sep 17 00:00:00 2001 From: beaumontjonathan Date: Sun, 5 Jan 2025 17:56:19 +0000 Subject: [PATCH 2/3] Added test --- .../stylex-import-evaluation-test.js | 36 +++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/packages/babel-plugin/__tests__/evaluation/stylex-import-evaluation-test.js b/packages/babel-plugin/__tests__/evaluation/stylex-import-evaluation-test.js index bdaa48a9..2685e2d6 100644 --- a/packages/babel-plugin/__tests__/evaluation/stylex-import-evaluation-test.js +++ b/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,38 @@ describe('Evaluation of imported values works based on configuration', () => { `); }); }); + + describe('Module resolution commonJS', () => { + test('Recognizes .ts stylex imports when resolving .js relative imports', () => { + moduleResolve.mockReturnValue({ + pathname: '/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";" + `); + }); + }); }); From f884cef5da1c4845170d80c63af3a9a588f4a01f Mon Sep 17 00:00:00 2001 From: beaumontjonathan Date: Sun, 5 Jan 2025 18:46:45 +0000 Subject: [PATCH 3/3] Clean --- .../stylex-import-evaluation-test.js | 11 ++++++++-- .../babel-plugin/src/utils/state-manager.js | 20 +++++++++---------- 2 files changed, 18 insertions(+), 13 deletions(-) diff --git a/packages/babel-plugin/__tests__/evaluation/stylex-import-evaluation-test.js b/packages/babel-plugin/__tests__/evaluation/stylex-import-evaluation-test.js index 2685e2d6..9e23cdfc 100644 --- a/packages/babel-plugin/__tests__/evaluation/stylex-import-evaluation-test.js +++ b/packages/babel-plugin/__tests__/evaluation/stylex-import-evaluation-test.js @@ -406,9 +406,16 @@ 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.mockReturnValue({ - pathname: '/project/otherFile.stylex.ts', + 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( diff --git a/packages/babel-plugin/src/utils/state-manager.js b/packages/babel-plugin/src/utils/state-manager.js index b69a5152..5be6f8d6 100644 --- a/packages/babel-plugin/src/utils/state-manager.js +++ b/packages/babel-plugin/src/utils/state-manager.js @@ -657,18 +657,16 @@ 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 filePathWithoutSourceExtension = - extension === '' || !EXTENSIONS.includes(extension) - ? filePath - : filePath.slice(0, -extension.length); - // Try importing without adding any extension - // and then every supported extension - return [ - filePath, - ...EXTENSIONS.map((ext) => filePathWithoutSourceExtension + ext), - ]; + 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 @@ -695,7 +693,7 @@ const filePathResolver = ( try { return moduleResolve(possiblePath, url.pathToFileURL(sourceFilePath)) .pathname; - } catch (error) { + } catch { continue; } }