[compiler] Automatically pick up alias configuration from package.json or tsconfig

[nmn]

Aliases are often configured in tsconfig.json files and sometimes in package.json files. The compiler should automatically pick up these configurations because require.resolve and esm-resolve don't do this for you.

[p0nch000]

Hey! This issue sounds interesting, and I’d love to contribute. Could you provide more details on where to start? Specifically:

• Are there any particular files or parts of the codebase I should look into first?
• Should the alias configuration handling focus on tsconfig.json, package.json, or both?
• Are there any existing utilities or patterns in the codebase for resolving aliases that I should leverage?
• How can I test the changes once I start working on this?

Let me know if there’s anything else I should consider. Thanks @nmn

[nmn]

Are there any particular files or parts of the codebase I should look into first?

Yes. This code should live almost entirely within:
/packages/babel-plugin/src/utils/state-manager.js

Should the alias configuration handling focus on tsconfig.json, package.json, or both?

Both, but to simplify we can consider tsconfig.json files that are siblings of the nearest package.json file.

Are there any existing utilities or patterns in the codebase for resolving aliases that I should leverage?

We already have some code to find the nearest package.json file in state-manager.js that might help with this. Outside of this, the task is not actually resolve aliases, only to auto-discover the configuration. The StyleX babel plugin already supports configuration that defines aliases.

NOTE: StyleX only supports aliases that are defined with absolute filepaths. This means using a JS file for Babel config and using __dirname. When discovering the alias settings from tsconfig or package.json, you will need to convert relative file paths to absolute file paths.

How can I test the changes once I start working on this?

You can create a "fixtures" folder for testing and write unit tests. You can also test the nextjs-example app and verify that it works without manually configuring StyleX aliases.