Feat: Automatically Discover StyleX Aliases from Configuration Files #810

p0nch000 · 2024-12-16T18:59:11Z

[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.

p0nch000 · 2024-12-16T19:06:37Z

Hey @nmn, this is my initial implementation for the issue. Let me know if there are any additional test cases or improvements you'd like me to include. I’m happy to iterate further based on your feedback

nmn · 2024-12-17T05:57:25Z

Parses package.json for stylex.aliases.

We don't want to add a new stylex.aliases option to the package.json. Instead, please look for the native aliases configuration supported by Node.js:

nmn

Great start! Please fix the failing tests and address the comments.

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

p0nch000 · 2024-12-17T19:53:31Z

Hey @nmn fixed all the changes you requested, i just couldnt pass the size test but apart from that i think its all ready, also updated the PR description and the unit tests, let me know if more changes are needed :)

nmn

Nearly there. I'll do some more testing before I merge, but I don't see any issues in the code review.

package.json

nmn

Changes look good in general. I will test a bit more before merging.

nmn · 2025-01-02T18:55:56Z

I did some local testing and there is an issue with path normalization which makes this PR not quite work as expected.

There are two issues:

The trailing /* is stripped from the alias definitions which is needed for StyleX to correctly match all paths after the given prefix.
Paths such as . or ./* are not normalized to the correct absolute paths.

This means that even though all the logic to discover the configurations is working correctly, it doesn't work in practice.

You can remove the aliases option the babel config for the nextjs exampple to test this yourself.

nmn

Please fix the path resolutions.

nmn · 2025-01-02T19:03:48Z

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

+        if (tsconfig.compilerOptions?.paths) {
+          tsconfigAliases = Object.fromEntries(
+            Object.entries(tsconfig.compilerOptions.paths).map(
+              ([key, value]) => [
+                key.replace(/\/\*$/, ''),
+                Array.isArray(value)
+                  ? value.map((p) =>
+                      this.normalizePath(
+                        path.join(baseUrl, p.replace(/\/\*$/, '')),
+                      ),
+                    )
+                  : [
+                      this.normalizePath(
+                        path.join(baseUrl, value.replace(/\/\*$/, '')),
+                      ),
+                    ],
+              ],
+            ),
+          );
+        }


Making this change fixed the problem for tsconfig.json files

Similar fixes might be needed for the other config files as well.

Suggested change

if (tsconfig.compilerOptions?.paths) {

tsconfigAliases = Object.fromEntries(

Object.entries(tsconfig.compilerOptions.paths).map(

([key, value]) => [

key.replace(/\/\*$/, ''),

Array.isArray(value)

? value.map((p) =>

this.normalizePath(

path.join(baseUrl, p.replace(/\/\*$/, '')),

),

)

: [

this.normalizePath(

path.join(baseUrl, value.replace(/\/\*$/, '')),

),

],

],

),

);

}

if (tsconfig.compilerOptions?.paths) {

tsconfigAliases = Object.fromEntries(

Object.entries(tsconfig.compilerOptions.paths).map(

([key, value]) => [

key,

(Array.isArray(value) ? value : [value]).map((p) => {

const endsWithStar = p.endsWith('/*');

let basePath = p.replace(/\/\*$/, '');

if (basePath.startsWith('.')) {

console.log(

'trying to resolve path',

projectDir,

basePath,

path.resolve(projectDir, basePath),

);

basePath = path.resolve(projectDir, basePath);

}

if (endsWithStar) {

basePath = basePath.endsWith('/')

? basePath + '*'

: basePath + '/*';

}

return basePath;

}),

],

),

);

}

p0nch000 and others added 10 commits November 25, 2024 12:42

Correctly parse functions like counter, url, etc, added a unit test

e739e09

Unit test for transform value features

0566af3

ÂRan prettier/lint

554931b

Merge branch 'facebook:main' into main

93b3500

PR changes after review, fixed transform value function

bd44f72

lint and prettier

6284257

Final fixes for flow test

2608e81

Merge branch 'facebook:main' into main

39a8203

First approach on aliases, unit test added

86b4489

First approach on aliases, unit test added

d098d00

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 Dec 16, 2024

vercel bot deployed to Preview December 16, 2024 19:04 View deployment

p0nch000 changed the title ~~Feat/auto aliases~~ Feat: Automatically Discover StyleX Aliases from Configuration Files Dec 16, 2024

nmn requested changes Dec 17, 2024

View reviewed changes

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

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

p0nch000 added 2 commits December 17, 2024 19:40

Considered deno.json, fix pr review comments

4cdd041

Fixed test fail

58e5271

vercel bot deployed to Preview December 17, 2024 18:46 View deployment

Fixed flow and prettier tests failing

65be7f8

vercel bot deployed to Preview December 17, 2024 19:12 View deployment

Fixed test fail

2ffdd78

vercel bot deployed to Preview December 17, 2024 19:20 View deployment

flow type error fix

eb2935f

vercel bot deployed to Preview December 17, 2024 19:30 View deployment

flow type error fix

c1656f2

vercel bot deployed to Preview December 17, 2024 19:36 View deployment

verification functions for casting configs

f8e15f1

vercel bot deployed to Preview December 17, 2024 19:43 View deployment

verification functions for casting configs

2875f7e

p0nch000 requested a review from nmn December 17, 2024 19:52

vercel bot deployed to Preview December 17, 2024 19:52 View deployment

nmn requested changes Dec 18, 2024

View reviewed changes

package.json Outdated Show resolved Hide resolved

Correct install of json5 dependency

1c2100a

p0nch000 requested a review from nmn December 18, 2024 17:04

vercel bot deployed to Preview December 18, 2024 17:07 View deployment

nmn approved these changes Dec 21, 2024

View reviewed changes

nmn requested changes Jan 2, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat: Automatically Discover StyleX Aliases from Configuration Files #810

Feat: Automatically Discover StyleX Aliases from Configuration Files #810

p0nch000 commented Dec 16, 2024 •

edited

Loading

p0nch000 commented Dec 16, 2024

nmn commented Dec 17, 2024

nmn left a comment

p0nch000 commented Dec 17, 2024

nmn left a comment

nmn left a comment

nmn commented Jan 2, 2025

nmn left a comment

nmn Jan 2, 2025

Feat: Automatically Discover StyleX Aliases from Configuration Files #810

Are you sure you want to change the base?

Feat: Automatically Discover StyleX Aliases from Configuration Files #810

Conversation

p0nch000 commented Dec 16, 2024 • edited Loading

[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

p0nch000 commented Dec 16, 2024

nmn commented Dec 17, 2024

nmn left a comment

Choose a reason for hiding this comment

p0nch000 commented Dec 17, 2024

nmn left a comment

Choose a reason for hiding this comment

nmn left a comment

Choose a reason for hiding this comment

nmn commented Jan 2, 2025

nmn left a comment

Choose a reason for hiding this comment

nmn Jan 2, 2025

Choose a reason for hiding this comment

p0nch000 commented Dec 16, 2024 •

edited

Loading

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

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