fix : Handle absolute paths for custom inject source

.flowconfig

@@ -7,6 +7,7 @@
 .*/lib/.*
 .*/malformed_package_json/.*
 .*/next-example/.*
+.*/esbuild-example/.*
 
 [include]
 

apps/docs/docs/api/javascript/createTheme.mdx

@@ -25,7 +25,7 @@ function createTheme(
 
 ```ts
 import * as stylex from '@stylexjs/stylex';
-import {colors} from './vars.stylex.js';
+import { colors } from './vars.stylex.js';
 
 const theme = stylex.createTheme(colors, {
   accentColor: 'red',

apps/docs/docs/api/javascript/defineVars.mdx

@@ -25,7 +25,7 @@ You must define your variables as named exports in a `.stylex.js` (or
 ```tsx title="vars.stylex.js"
 import * as stylex from '@stylexjs/stylex';
 
-const colors = stylex.defineVars({
+export const colors = stylex.defineVars({
   accent: 'blue',
   background: 'white',
   line: 'gray',
@@ -38,7 +38,7 @@ You can then import and use these variables in any `stylex.create` call.
 
 ```tsx
 import * as stylex from '@stylexjs/stylex';
-import {colors} from './vars.stylex.js';
+import { colors } from './vars.stylex.js';
 
 const styles = stylex.create({
   container: {

apps/docs/docs/learn/03-installation.mdx

@@ -67,7 +67,7 @@ StyleX plugin. See the API reference for more details on the
 `@stylexjs/babel-plugin` API.
 
 To make this easier for commonly used packages and meta-frameworks, StyleX
-provides (experimental) plugins for Webpack, Rollup, and Next.js.
+provides (experimental) plugins for Webpack, Rollup, Next.js and esbuild.
 
 <details>
   <summary>Rollup</summary>
@@ -197,6 +197,48 @@ provides (experimental) plugins for Webpack, Rollup, and Next.js.
 
 </details>
 
+<details>
+  <summary>esbuild</summary>
+
+  <DevInstallExample dev={[`@stylexjs/esbuild-plugin`]} />
+
+  ```tsx title="build.mjs"
+  import esbuild from 'esbuild';
+  import stylexPlugin from '@stylexjs/stylex';
+  import path from 'path';
+  import { fileURLToPath } from 'url';
+
+  const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+  esbuild.build({
+    entryPoints: ['src/index.js'],
+    bundle: true,
+    outfile: './build/bundle.js',
+    minify: true,
+    plugins: [
+      stylexPlugin({
+          // If set to 'true', bundler will inject styles in-line
+          // Do not use in production
+          dev: false,
+          // Required. File path for the generated CSS file
+          generatedCSSFileName: path.resolve(__dirname, 'build/stylex.css'),
+          // Aliases for StyleX package imports
+          // default: '@stylexjs/stylex'
+          stylexImports: ['@stylexjs/stylex'],
+          // Required for CSS variable support
+          unstable_moduleResolution: {
+            // type: 'commonJS' | 'ESModules' | 'haste'
+            // default: 'commonJS'
+            type: 'commonJS',
+            // The absolute path to the root of your project
+            rootDir: __dirname,
+          },
+      }),
+    ],
+  })
+  ```
+</details>
+
 Please refer to the
 [StyleX examples apps](https://github.com/facebook/stylex/tree/main/apps)
 for demonstrations on how to use each of these plugins.

apps/docs/package.json

@@ -20,7 +20,7 @@
     "@docusaurus/preset-classic": "2.4.1",
     "@mdx-js/react": "^1.6.22",
     "@orama/plugin-docusaurus": "^1.2.4",
-    "@stylexjs/stylex": "0.4.1",
+    "@stylexjs/stylex": "0.5.0-beta.1",
     "@vercel/analytics": "^1.1.1",
     "clsx": "^1.2.1",
     "react": "^17.0.2",
@@ -29,7 +29,7 @@
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.22.15",
-    "@stylexjs/babel-plugin": "0.4.1",
+    "@stylexjs/babel-plugin": "0.5.0-beta.1",
     "clean-css": "^5.3.2",
     "eslint": "^8.56.0",
     "eslint-config-airbnb": "^19.0.4",

apps/esbuild-example/.eslintrc.js

@@ -0,0 +1,18 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+module.exports = {
+  plugins: ['@stylexjs'],
+  rules: {
+    '@stylexjs/valid-styles': 'error',
+    'ft-flow/space-after-type-colon': 0,
+    'ft-flow/no-types-missing-file-annotation': 0,
+    'ft-flow/generic-spacing': 0,
+  },
+};

apps/esbuild-example/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "esbuild-example",
+  "version": "0.0.0",
+  "description": "Simple esbuild example for @stylexjs/esbuild-plugin",
+  "main": "src/App.jsx",
+  "scripts": {
+    "build": "node scripts/build.mjs",
+    "lint": "eslint \"**/*.{js,jsx}\""
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@stylexjs/stylex": "^0.3.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@stylexjs/esbuild-plugin": "^0.0.0",
+    "@stylexjs/eslint-plugin": "^0.3.0",
+    "esbuild": "^0.19.9",
+    "eslint": "^8.55.0"
+  }
+}

apps/esbuild-example/public/index.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<html>
+  <head>
+    <title>@stylexjs/esbuild-plugin</title>
+    <meta charset="utf-8" />
+    <style>
+      @layer reset {
+        body {
+          box-sizing: border-box;
+          padding: 0;
+          margin: 0;
+        }
+      }
+    </style>
+    <link rel="stylesheet" type="text/css" href="./dist/stylex.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="./dist/bundle.js"></script>
+  </body>
+</html>

apps/esbuild-example/scripts/build.mjs

@@ -0,0 +1,44 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+import path from 'path';
+import { fileURLToPath } from 'url';
+import esbuild from 'esbuild';
+import stylexPlugin from '@stylexjs/esbuild-plugin';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const BUILD_DIR_NAME = 'public/dist';
+const OUTFILE = `${BUILD_DIR_NAME}/bundle.js`;
+const STYLEX_BUNDLE_PATH = path.resolve(
+  __dirname,
+  '..',
+  `${BUILD_DIR_NAME}/stylex.css`,
+);
+
+esbuild
+  .build({
+    entryPoints: [path.resolve(__dirname, '..', 'src/App.jsx')],
+    bundle: true,
+    outfile: OUTFILE,
+    minify: true,
+    plugins: [
+      stylexPlugin({
+        useCSSLayers: true,
+        generatedCSSFileName: STYLEX_BUNDLE_PATH,
+        stylexImports: ['@stylexjs/stylex'],
+        unstable_moduleResolution: {
+          type: 'commonJS',
+          rootDir: path.resolve(__dirname, '../../..'),
+        },
+      }),
+    ],
+  })
+  .catch(() => process.exit(1));

apps/esbuild-example/src/App.jsx

@@ -0,0 +1,50 @@
+/**
+ * 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 * as React from 'react';
+import ReactDOM from 'react-dom';
+import * as stylex from '@stylexjs/stylex';
+import { colors } from '@stylexjs/open-props/lib/colors.stylex';
+import { sizes } from '@stylexjs/open-props/lib/sizes.stylex';
+import { fonts } from '@stylexjs/open-props/lib/fonts.stylex';
+
+const styles = stylex.create({
+  main: {
+    width: '100vw',
+    height: '100vh',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: colors.pink7,
+  },
+  card: {
+    backgroundColor: colors.blue9,
+    padding: sizes.spacing5,
+    borderRadius: sizes.spacing2,
+    justifyContent: 'center',
+    display: 'flex',
+    alignItems: 'center',
+    color: colors.gray0,
+    fontFamily: fonts.mono,
+  },
+});
+
+function App() {
+  return (
+    <div {...stylex.props(styles.main)}>
+      <div {...stylex.props(styles.card)}>
+        <span>Blue rounded rectangle</span>
+      </div>
+    </div>
+  );
+}
+
+ReactDOM.render(<App />, document.getElementById('root'));