Feat: Automatically Discover StyleX Aliases from Configuration Files (Rebased PR of #810) #856

nmn · 2025-01-13T19:49:33Z

What changed / motivation ?

This a rebased implementation of #810 with bug fixes.

[Feature] Automatically Discover StyleX Aliases from Configuration Files

Linked Issues

Fixes #765

Overview

This PR enhances the StyleX Babel plugin to automatically discover alias configurations from Node.js native imports (package.json), tsconfig.json, and deno.json. It ensures normalized paths for cross-platform compatibility and maintains backward compatibility with existing manual configurations.

Implementation Details

JSON5 Parser: Handles configuration files with comments or trailing commas.
Alias Discovery:
- Parses package.json for Node.js native subpath imports (aliases with # prefix).
- Parses tsconfig.json for compilerOptions.paths and resolves paths relative to baseUrl.
- Parses deno.json for the imports field.
Merge Configurations:
- Combines configurations from all sources:
  Manual > package.json > tsconfig.json > deno.json.
Code Reuse:
- Replaced redundant findProjectRoot with getPackageNameAndPath for project root discovery.
Normalized Paths:
- Standardizes path separators for cross-platform compatibility.
Error Handling:
- Gracefully handles missing or malformed configuration files.

Test Coverage

The following scenarios are tested:

1. Alias Discovery:

Node.js native imports from package.json (subpath imports).
Aliases from tsconfig.json paths.
Aliases from deno.json imports.

2. Configuration Merging:

Merges aliases from all sources with correct priority.

3. Manual Overrides:

Ensures manual alias configurations take precedence over discovered aliases.

4. Error Handling:

Handles missing or invalid configuration files gracefully.

Code Changes

1. `state-manager.js` (Alias Discovery)

Updated Functionality:
- loadAliases:
  - Now supports Node.js native imports and deno.json.
  - Removed custom stylex.aliases support.
  - Simplified project root discovery using getPackageNameAndPath.
Added support for deno.json imports.

2. `stylex-transform-alias-config-test.js`

Updated Unit Tests:
- Tests for Node.js native imports discovery.
- Tests for deno.json imports.
- Tests for merged configuration from all sources.
- Tests for proper handling of invalid configurations.

Potential Future Improvements

Enhanced Test Cases:
- Complex alias patterns with wildcards.
- Nested directory structures.
- Edge cases in path resolution.
Additional Features:
- Support for other configuration sources like Webpack config.
- More granular control over alias resolution priorities.
Performance Optimizations:
- Caching of discovered configurations.
- Smarter file system traversal.

Pre-flight Checklist

I have read the Contribution Guidelines.
Performed a self-review of my code.
Added tests for the new functionality.
Verified cross-platform compatibility.
Ensured backward compatibility with existing configurations.

Feedback

Feedback is welcome, particularly for:

Additional test cases to consider.
Improvements to performance or alias resolution edge cases.

github-actions · 2025-01-13T19:56:11Z

workflow: benchmarks/size

Comparison of minified (terser) and compressed (brotli) size results, measured in bytes. Smaller is better.

[email protected] compare
node ./compare.js /tmp/tmp.t6DMwc6e1Q /tmp/tmp.lTzVwo6Y3f

Results	Base	Patch	Ratio

@stylexjs/stylex/lib/cjs/stylex.js
· compressed	1,222	1,222	1.00
· minified	3,679	3,679	1.00

@stylexjs/stylex/lib/cjs/inject.js
· compressed	1,227	1,227	1.00
· minified	3,224	3,224	1.00

benchmarks/size/.build/bundle.js
· compressed	495,990	495,990	1.00
· minified	4,843,460	4,843,460	1.00

benchmarks/size/.build/stylex.css
· compressed	99,897	99,897	1.00
· minified	747,686	747,686	1.00

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

mellyeliu · 2025-02-10T14:36:21Z

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

+    const [_packageName, projectDir] = pkgInfo;
+
+    const resolveAliasPaths = (value: string | $ReadOnlyArray<string>) =>
+      (Array.isArray(value) ? value : [value]).map((p) => {


nit: we should consider moving some of this logic to a separate files utils, there's some path functions in the cache.js utils that I also want to extract

necolas · 2025-02-12T21:12:48Z

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

+      ...denoAliases,
+      ...tsconfigAliases,
+      ...packageAliases,
+      ...(manualAliases || {}),


Do we still need manualAliases?

I didn't want to remove it in the same commit, but we could probably remove them in the future once we are sure this feature is working for the wide variety of project types.

We could deprecate it in the next release and delete it entirely after.

necolas · 2025-03-06T20:33:51Z

packages/babel-plugin/__tests__/stylex-transform-alias-config-test.js

+import os from 'os';
+import StateManager from '../src/utils/state-manager';
+
+describe('StyleX Alias Configuration', () => {


Please write tests against the public API. If we refactor the internals, tests like this would likely need to be rewritten. And this test doesn't actually validate that real code is correctly processed.

Will do. Will need to simulate a filesystem or similar to make this happen, but should be doable.

…/babel-preset Until facebook/stylex#856 is merged and released, this is kind of the only option to be able to write imports like defined in a tsconfig file.

necolas · 2025-04-30T17:29:58Z

Are you still working on this @nmn ?

nmn · 2025-07-10T20:48:24Z

I will rebase this PR and rewrite the tests soon. I was travelling for a while and had little time.

Fixed flow and prettier tests failing Correct install of json5 dependency fix: Resolve alias paths to absolute paths

github-actions · 2025-07-14T02:36:26Z

workflow: benchmarks/perf

Comparison of performance test results, measured in operations per second. Larger is better.

[email protected] compare
node ./compare.js /tmp/tmp.wnGLS7aChR /tmp/tmp.QvEnZCE78v

Results	Base	Patch	Ratio

babel-plugin: stylex.create
· basic create	609	566	0.93	!!
· complex create	207	203	0.98	-

babel-plugin: stylex.createTheme
· basic themes	451	428	0.95	!!
· complex themes	42	42	1.00

necolas · 2025-07-17T21:21:21Z

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

+        try {
+          const filePath = path.join(projectDir, fileName);
+          if (fs.existsSync(filePath)) {
+            const rawConfig: mixed = JSON5.parse(


Why do we need the JSON5 dependency?

It's just to allow the config file to have comments, trailing commas etc.

It's like JSONC, but a more permissive superset.

KingAmo · 2025-10-10T02:18:20Z

any update on this?

MoOx · 2025-10-15T11:07:56Z

@nmn do you think your work done here could help with #1045 (aliases not working with a Windows setup)

facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Jan 13, 2025

vercel bot deployed to Preview January 16, 2025 02:33 View deployment

nmn marked this pull request as draft January 17, 2025 22:53

nmn force-pushed the feat/auto-aliases branch 2 times, most recently from a4654f6 to 105df51 Compare February 10, 2025 04:39

nmn changed the title ~~Rebased PR of #810~~ Feat: Automatically Discover StyleX Aliases from Configuration Files (Rebased PR of #810) Feb 10, 2025

nmn marked this pull request as ready for review February 10, 2025 04:41

nmn mentioned this pull request Feb 10, 2025

Feat: Automatically Discover StyleX Aliases from Configuration Files #810

Closed

5 tasks

vercel bot had a problem deploying to Preview February 10, 2025 04:42 Failure

nmn force-pushed the feat/auto-aliases branch from 105df51 to 639a876 Compare February 10, 2025 04:44

vercel bot deployed to Preview February 10, 2025 04:47 View deployment

nmn requested review from mellyeliu and necolas February 10, 2025 05:10

vercel bot deployed to Preview February 10, 2025 05:13 View deployment

mellyeliu reviewed Feb 10, 2025

View reviewed changes

packages/babel-plugin/src/utils/state-manager.js Outdated Show resolved Hide resolved

mellyeliu reviewed Feb 10, 2025

View reviewed changes

necolas reviewed Feb 12, 2025

View reviewed changes

nmn force-pushed the feat/auto-aliases branch from 0430e86 to 0de16c3 Compare February 13, 2025 05:13

vercel bot deployed to Preview February 13, 2025 05:16 View deployment

vercel bot deployed to Preview February 13, 2025 06:55 View deployment

necolas requested changes Mar 6, 2025

View reviewed changes

MoOx mentioned this pull request Apr 12, 2025

allow passing @stylexjs/babel-plugin aliases through react-strict-dom/babel-preset facebook/react-strict-dom#294

Open

necolas assigned nmn Apr 30, 2025

necolas mentioned this pull request May 1, 2025

0.13.0 task list #1034

Closed

18 tasks

p0nch000 and others added 2 commits July 11, 2025 02:23

Considered deno.json, fix pr review comments

b0e4dda

Fixed flow and prettier tests failing Correct install of json5 dependency fix: Resolve alias paths to absolute paths

fix: update tests and detect *all* relative paths

509ee2d

nmn and others added 3 commits July 11, 2025 02:23

chore: reduce code duplication

9173a70

chore: fix tests

531de44

rebase and fix test

0a17112

nmn force-pushed the feat/auto-aliases branch from 619829f to 0a17112 Compare July 14, 2025 02:32

nmn requested review from Jta26 and vincentriemer as code owners July 14, 2025 02:32

nmn requested a review from necolas July 14, 2025 02:32

vercel bot deployed to Preview July 14, 2025 02:33 View deployment

necolas reviewed Jul 17, 2025

View reviewed changes

MoOx mentioned this pull request Aug 27, 2025

Aliases not working on windows #1045

Open

Uh oh!

Feat: Automatically Discover StyleX Aliases from Configuration Files (Rebased PR of #810) #856

Are you sure you want to change the base?

Feat: Automatically Discover StyleX Aliases from Configuration Files (Rebased PR of #810) #856

Uh oh!

Conversation

nmn commented Jan 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What changed / motivation ?

[Feature] Automatically Discover StyleX Aliases from Configuration Files

Linked Issues

Overview

Implementation Details

Test Coverage

1. Alias Discovery:

2. Configuration Merging:

3. Manual Overrides:

4. Error Handling:

Code Changes

1. state-manager.js (Alias Discovery)

2. stylex-transform-alias-config-test.js

Potential Future Improvements

Pre-flight Checklist

Feedback

Uh oh!

github-actions bot commented Jan 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

workflow: benchmarks/size

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

necolas commented Apr 30, 2025

Uh oh!

nmn commented Jul 10, 2025

Uh oh!

github-actions bot commented Jul 14, 2025

workflow: benchmarks/perf

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

KingAmo commented Oct 10, 2025

Uh oh!

MoOx commented Oct 15, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

nmn commented Jan 13, 2025 •

edited

Loading

1. `state-manager.js` (Alias Discovery)

2. `stylex-transform-alias-config-test.js`

github-actions bot commented Jan 13, 2025 •

edited

Loading