fix: Resolve alias paths to absolute paths

Author: nmn

apps/nextjs-example/app/Counter.tsx

@@ -10,7 +10,7 @@
 'use client';
 
 import * as stylex from '@stylexjs/stylex';
-import { spacing, text, globalTokens as $ } from './globalTokens.stylex';
+import { spacing, text, globalTokens as $ } from '@/app/globalTokens.stylex';
 import { colors } from '@stylexjs/open-props/lib/colors.stylex';
 import { useState } from 'react';
 

apps/nextjs-example/babel.config.js

@@ -6,6 +6,7 @@
  *
  *
  */
+
 const path = require('path');
 module.exports = {
   presets: ['next/babel'],
@@ -19,9 +20,9 @@ module.exports = {
         runtimeInjection: false,
         genConditionalClasses: true,
         treeshakeCompensation: true,
-        aliases: {
-          '@/*': [path.join(__dirname, '*')],
-        },
+        // aliases: {
+        //   '@/*': [path.join(__dirname, '*')],
+        // },
         unstable_moduleResolution: {
           type: 'commonJS',
         },

apps/nextjs-example/package.json

@@ -3,7 +3,6 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "clean": "rimraf .next",
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
@@ -17,7 +16,7 @@
     "next": "14.0.1"
   },
   "devDependencies": {
-    "@stylexjs/eslint-plugin": "^0.7.5",
+    "@stylexjs/eslint-plugin": "^0.10.1",
     "@stylexjs/postcss-plugin": "0.10.1",
     "@types/node": "^22.7.6",
     "@types/react": "^18.3.11",

apps/nextjs-example/tsconfig.json

@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -23,18 +19,9 @@
       }
     ],
     "paths": {
-      "@/*": [
-        "./*"
-      ],
+      "@/*": ["./*"]
     }
   },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
-}
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

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

@@ -640,6 +640,19 @@ export default class StateManager {
 
     const [_packageName, projectDir] = pkgInfo;
 
+    const resolveAliasPaths = (value: string | $ReadOnlyArray<string>) =>
+      (Array.isArray(value) ? value : [value]).map((p) => {
+        const endsWithStar = p.endsWith('/*');
+        let basePath = p.replace(/\/\*$/, '');
+        if (basePath.startsWith('.')) {
+          basePath = path.resolve(projectDir, basePath);
+        }
+        if (endsWithStar) {
+          basePath = basePath.endsWith('/') ? basePath + '*' : basePath + '/*';
+        }
+        return basePath;
+      });
+
     // Load aliases from package.json imports field
     try {
       const packageJsonPath = path.join(projectDir, 'package.json');
@@ -658,10 +671,7 @@ export default class StateManager {
           packageAliases = Object.fromEntries(
             Object.entries(imports)
               .filter(([key]) => key.startsWith('#'))
-              .map(([key, value]) => [
-                key.slice(1),
-                Array.isArray(value) ? value : [value],
-              ]),
+              .map(([key, value]) => [key.slice(1), resolveAliasPaths(value)]),
           );
         }
       }
@@ -680,25 +690,13 @@ export default class StateManager {
           throw new Error('Invalid tsconfig.json format');
         }
         const tsconfig: TSConfig = rawConfig as $FlowFixMe;
-        const baseUrl = tsconfig.compilerOptions?.baseUrl || '.';
-        if (tsconfig.compilerOptions?.paths) {
+        const tsConfigAliasPaths = tsconfig.compilerOptions?.paths;
+        if (tsConfigAliasPaths != null && isImportsObject(tsConfigAliasPaths)) {
           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(/\/\*$/, '')),
-                      ),
-                    ],
-              ],
-            ),
+            Object.entries(tsConfigAliasPaths).map(([key, value]) => [
+              key,
+              resolveAliasPaths(value),
+            ]),
           );
         }
       }
@@ -719,10 +717,9 @@ export default class StateManager {
         const denoConfig: DenoConfig = rawConfig as $FlowFixMe;
         if (denoConfig.imports) {
           denoAliases = Object.fromEntries(
-            Object.entries(denoConfig.imports).map(([key, value]) => [
-              key,
-              Array.isArray(value) ? value : [value],
-            ]),
+            Object.entries(denoConfig.imports).map(([key, value]) => {
+              return [key, resolveAliasPaths(value)];
+            }),
           );
         }
       }
@@ -899,15 +896,21 @@ function formatRelativePath(filePath: string) {
   return filePath.startsWith('.') ? filePath : './' + filePath;
 }
 
-function isPackageJSON(obj: mixed): boolean %checks {
+function isImportsObject(obj: mixed): implies obj is { ... } {
+  return obj != null && typeof obj === 'object';
+}
+
+function isPackageJSON(obj: mixed): implies obj is { +imports: mixed, ... } {
   return (
     obj != null &&
     typeof obj === 'object' &&
     (!('imports' in obj) || typeof obj.imports === 'object')
   );
 }
 
-function isTSConfig(obj: mixed): boolean {
+function isTSConfig(
+  obj: mixed,
+): implies obj is { +compilerOptions: mixed, ... } {
   return (
     obj != null &&
     typeof obj === 'object' &&
@@ -917,7 +920,7 @@ function isTSConfig(obj: mixed): boolean {
   );
 }
 
-function isDenoConfig(obj: mixed): boolean {
+function isDenoConfig(obj: mixed): implies obj is { +imports: mixed, ... } {
   return (
     obj != null &&
     typeof obj === 'object' &&