Feat: Automatically Discover StyleX Aliases from Configuration Files

[p0nch000]

[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

• 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]

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]

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:

• https://nodejs.org/api/packages.html#imports
• https://nodejs.org/api/packages.html#subpath-imports
• https://betterprogramming.pub/the-native-way-to-configure-path-aliases-in-frontend-projects-5db70f19a6e0#02ec

[nmn]

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

[p0nch000]

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.

[nmn]

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

[nmn]

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:

1. The trailing /* is stripped from the alias definitions which is needed for StyleX to correctly match all paths after the given prefix.
2. 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]

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;
	}),
	],
	),
	);
	}

[nmn]

Closing in favor of #856