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

[nmn]

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

1. Enhanced Test Cases:

   • Complex alias patterns with wildcards.
   • Nested directory structures.
   • Edge cases in path resolution.

2. Additional Features:

   • Support for other configuration sources like Webpack config.
   • More granular control over alias resolution priorities.

3. Performance Optimizations:

   • Caching of discovered configurations.
   • Smarter file system traversal.

---

Pre-flight Checklist

• [x] I have read the Contribution Guidelines.
• [x] Performed a self-review of my code.
• [x] Added tests for the new functionality.
• [x] Verified cross-platform compatibility.
• [x] 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[bot]]

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

[necolas]

Are you still working on this @nmn ?

[nmn]

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

[github-actions[bot]]

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

[KingAmo]

any update on this?

[MoOx]

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