feat: add esbuild plugin (#113)

* Add eslint-plugin package

* Add initial test suite

* Improve CSS handling and tests

* Address some of the comments

* Add babel scripts for jsx, flow and ts

* Add package diff

* Add snapshots and fix nits

* Fix rename bug

* Add esbuild example app

* Fix incorrect loaders

* Update package-lock.json

* Remove unnecessary file

* Fix some nits in example

* Add additional style to text fixture

* Remove ext from import in example

* Address some of the comments

* Update package-lock.json

* Add missing function call and snapshot

* Remove comment

* Pluralize function name

* Add types

* Fix build script

* Add docs

* Fix tabulation

* Retake snapshots

* Format prettier

* Add more missing types

* Run formatter

* Fix formatting

* Lock dependency and fix import

* Disable unused key

* Add docs

* Update package-lock.json

* Update package-lock.json

* Add snapshots

* Address comments

.flowconfig

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

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

@@ -69,7 +69,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>
@@ -199,6 +199,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/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'));

flow-typed/babel-plugins.js

@@ -21,3 +21,7 @@ declare module '@babel/plugin-syntax-flow' {
 declare module '@babel/plugin-syntax-jsx' {
   declare module.exports: any;
 }
+
+declare module 'babel-plugin-syntax-hermes-parser' {
+  declare module.exports: any;
+}