Feat: Automatically Discover StyleX Aliases from Configuration Files

flow-typed/json5.js

@@ -0,0 +1,29 @@
+// @flow
+type TSConfig = {
+  compilerOptions?: {
+    baseUrl?: string,
+    paths?: { [key: string]: Array<string> },
+  },
+};
+
+type DenoConfig = {
+  imports?: { [key: string]: string | Array<string> },
+};
+
+type PackageJSON = {
+  name?: string,
+  imports?: { [key: string]: string | Array<string> },
+};
+
+type ConfigType = TSConfig | DenoConfig | PackageJSON;
+
+declare module 'json5' {
+  declare module.exports: {
+    parse: (input: string) => mixed,
+    stringify: (
+      value: mixed,
+      replacer?: ?Function | ?Array<mixed>,
+      space?: string | number,
+    ) => string,
+  };
+}

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

@@ -0,0 +1,177 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+
+'use strict';
+
+import path from 'path';
+import fs from 'fs';
+import os from 'os';
+import StateManager from '../src/utils/state-manager';
+
+describe('StyleX Alias Configuration', () => {
+  let tmpDir;
+  let state;
+
+  beforeEach(() => {
+    // Create a temporary directory for our test files
+    tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'stylex-test-'));
+
+    // Create a mock babel state
+    state = {
+      file: {
+        metadata: {},
+      },
+      filename: path.join(tmpDir, 'src/components/Button.js'),
+    };
+  });
+
+  afterEach(() => {
+    // Clean up temporary directory
+    fs.rmSync(tmpDir, { recursive: true, force: true });
+  });
+
+  const setupFiles = (files) => {
+    for (const [filePath, content] of Object.entries(files)) {
+      const fullPath = path.join(tmpDir, filePath);
+      fs.mkdirSync(path.dirname(fullPath), { recursive: true });
+      fs.writeFileSync(fullPath, JSON.stringify(content, null, 2));
+    }
+  };
+
+  test('discovers aliases from package.json imports', () => {
+    setupFiles({
+      'package.json': {
+        name: 'test-package',
+        imports: {
+          '#components': './src/components',
+          '#utils/*': './src/utils/*',
+        },
+      },
+    });
+
+    const manager = new StateManager(state);
+
+    expect(manager.options.aliases).toEqual({
+      components: ['./src/components'],
+      'utils/*': ['./src/utils/*'],
+    });
+  });
+
+  test('discovers aliases from tsconfig.json', () => {
+    setupFiles({
+      'package.json': { name: 'test-package' },
+      'tsconfig.json': {
+        compilerOptions: {
+          baseUrl: '.',
+          paths: {
+            '@components/*': ['src/components/*'],
+            '@utils/*': ['src/utils/*'],
+          },
+        },
+      },
+    });
+
+    const manager = new StateManager(state);
+
+    expect(manager.options.aliases).toEqual({
+      '@components': ['src/components'],
+      '@utils': ['src/utils'],
+    });
+  });
+
+  test('discovers aliases from deno.json', () => {
+    setupFiles({
+      'package.json': { name: 'test-package' },
+      'deno.json': {
+        imports: {
+          '@components/': './src/components/',
+          '@utils/': './src/utils/',
+        },
+      },
+    });
+
+    const manager = new StateManager(state);
+
+    expect(manager.options.aliases).toEqual({
+      '@components/': ['./src/components/'],
+      '@utils/': ['./src/utils/'],
+    });
+  });
+
+  test('merges aliases from all config files', () => {
+    setupFiles({
+      'package.json': {
+        name: 'test-package',
+        imports: {
+          '#components': './src/components',
+        },
+      },
+      'tsconfig.json': {
+        compilerOptions: {
+          baseUrl: '.',
+          paths: {
+            '@utils/*': ['src/utils/*'],
+          },
+        },
+      },
+      'deno.json': {
+        imports: {
+          '@styles/': './src/styles/',
+        },
+      },
+    });
+
+    const manager = new StateManager(state);
+
+    expect(manager.options.aliases).toEqual({
+      components: ['./src/components'],
+      '@utils': ['src/utils'],
+      '@styles/': ['./src/styles/'],
+    });
+  });
+
+  test('manual configuration overrides discovered aliases', () => {
+    setupFiles({
+      'package.json': {
+        name: 'test-package',
+        imports: {
+          '#components': './src/components',
+        },
+      },
+    });
+
+    state.opts = {
+      aliases: {
+        components: './custom/path',
+      },
+    };
+
+    const manager = new StateManager(state);
+
+    expect(manager.options.aliases).toEqual({
+      components: ['./custom/path'],
+    });
+  });
+
+  test('handles missing configuration files gracefully', () => {
+    const manager = new StateManager(state);
+    expect(manager.options.aliases).toBeNull();
+  });
+
+  test('handles invalid JSON files gracefully', () => {
+    setupFiles({
+      'package.json': '{invalid json',
+      'tsconfig.json': '{also invalid',
+      'deno.json': '{more invalid',
+    });
+
+    const manager = new StateManager(state);
+    expect(manager.options.aliases).toBeNull();
+  });
+});

packages/babel-plugin/package.json

@@ -13,13 +13,14 @@
     "test": "jest"
   },
   "dependencies": {
-    "@babel/helper-module-imports": "^7.22.15",
-    "@stylexjs/shared": "0.9.3",
-    "@stylexjs/stylex": "0.9.3",
     "@babel/core": "^7.25.8",
+    "@babel/helper-module-imports": "^7.22.15",
     "@babel/traverse": "^7.25.7",
     "@babel/types": "^7.25.8",
-    "esm-resolve": "^1.0.11"
+    "@stylexjs/shared": "0.9.3",
+    "@stylexjs/stylex": "0.9.3",
+    "esm-resolve": "^1.0.11",
+    "json5": "^2.2.3"
   },
   "jest": {
     "verbose": true,