feat: automatically resolve name from containing package.json

facebook · Oct 14, 2024 · 9353793 · 9353793
1 parent 41fa0fa
commit 9353793
Show file tree

Hide file tree

Showing 4 changed files with 1,098 additions and 1,054 deletions.
diff --git a/packages/babel-plugin/src/utils/state-manager.js b/packages/babel-plugin/src/utils/state-manager.js
@@ -16,6 +16,7 @@ import type {
 } from '@stylexjs/shared';
 import { name } from '@stylexjs/stylex/package.json';
 import path from 'path';
+import fs from 'fs';
 import type { Check } from './validate';
 import * as z from './validate';
 import { addDefault, addNamed } from '@babel/helper-module-imports';
@@ -35,7 +36,7 @@ export type ImportPathResolution =
 type ModuleResolution =
   | $ReadOnly<{
       type: 'commonJS',
-      rootDir: string,
+      rootDir?: string,
       themeFileExtension?: ?string,
     }>
   | $ReadOnly<{
@@ -44,7 +45,7 @@ type ModuleResolution =
     }>
   | $ReadOnly<{
       type: 'experimental_crossFileParsing',
-      rootDir: string,
+      rootDir?: string,
       themeFileExtension?: ?string,
     }>;
 
@@ -455,11 +456,48 @@ export default class StateManager {
     switch (this.options.unstable_moduleResolution.type) {
       case 'haste':
         return path.basename(filename);
-      default: {
-        const rootDir = this.options.unstable_moduleResolution.rootDir;
-        return path.relative(rootDir, filename);
+      default:
+        return this.getCanonicalFilePath(filename);
+    }
+  }
+
+  getPackageNameAndPath(
+    filepath: string,
+  ): null | [+packageName: string, +packageDir: string] {
+    const folder = path.dirname(filepath);
+    if (folder === '/' || folder === '') {
+      return null;
+    }
+
+    const hasPackageJSON = fs.existsSync(path.join(folder, 'package.json'));
+    if (hasPackageJSON) {
+      try {
+        const packageJson = JSON.parse(
+          fs.readFileSync(path.join(folder, 'package.json'), 'utf8'),
+        );
+        const name = packageJson.name;
+        return [name, folder];
+      } catch (err) {
+        console.error(err);
+        return null;
+      }
+    } else {
+      return this.getPackageNameAndPath(folder);
+    }
+  }
+
+  getCanonicalFilePath(filePath: string): string {
+    const pkgNameAndPath = this.getPackageNameAndPath(filePath);
+    if (pkgNameAndPath == null) {
+      const rootDir = this.options.unstable_moduleResolution?.rootDir;
+      if (rootDir != null) {
+        return path.relative(rootDir, filePath);
       }
+      const fileName = path.relative(path.dirname(filePath), filePath);
+      return `_unknown_path_:${fileName}`;
     }
+    const [packageName, packageDir] = pkgNameAndPath;
+    return `${packageName}:${path.relative(packageDir, filePath)}`;
   }
 
   importPathResolver(importPath: string): ImportPathResolution {
@@ -470,7 +508,6 @@ export default class StateManager {
 
     switch (this.options.unstable_moduleResolution?.type) {
       case 'commonJS': {
-        const rootDir = this.options.unstable_moduleResolution.rootDir;
         const aliases = this.options.aliases;
         const themeFileExtension =
           this.options.unstable_moduleResolution?.themeFileExtension ??
@@ -484,7 +521,7 @@ export default class StateManager {
           aliases,
         );
         return resolvedFilePath
-          ? ['themeNameRef', path.relative(rootDir, resolvedFilePath)]
+          ? ['themeNameRef', this.getCanonicalFilePath(resolvedFilePath)]
           : false;
       }
       case 'haste': {
@@ -674,6 +711,10 @@ const addFileExtension = (
     return importedFilePath;
   }
   const fileExtension = path.extname(sourceFile);
+  // NOTE: This is unsafe. We are assuming the all files in your project
+  // use the same file extension.
+  // However, in a haste module system we have no way to resolve the
+  // *actual* file to get the actual file extension used.
   return importedFilePath + fileExtension;
 };
 

diff --git a/packages/esbuild-plugin/__tests__/__snapshots__/index-test.js.snap b/packages/esbuild-plugin/__tests__/__snapshots__/index-test.js.snap
@@ -106,7 +106,7 @@ exports[`esbuild-plugin-stylex extracts and bundles CSS without inject calls, bu
   // __tests__/__fixtures__/index.ts
   function App() {
     return {
-      className: "xlu94hl xgbg9yd"
+      className: "xktrvhi xthc9sq"
     };
   }
 })();
@@ -117,12 +117,12 @@ exports[`esbuild-plugin-stylex extracts and bundles CSS without inject calls, bu
 "
 @layer priority1, priority2;
 @layer priority1{
-:root{--x1b96qz0:white;--x1cpylmt:pink;--xr6c0rs:green;}
+:root{--xx1oc6k:white;--x14p2zvc:pink;--xdr2u03:green;}
 }
 @layer priority2{
-.xlu94hl{background-color:var(--x1b96qz0)}
-.xfpfjxz{color:var(--x1cpylmt)}
-.xgbg9yd{color:var(--xr6c0rs)}
+.xktrvhi{background-color:var(--xx1oc6k)}
+.xiz802d{color:var(--x14p2zvc)}
+.xthc9sq{color:var(--xdr2u03)}
 }"
 `;