feat: add esbuild plugin

package.json

@@ -43,6 +43,7 @@
     "@types/jest": "^29.5.5",
     "babel-plugin-syntax-hermes-parser": "^0.18.0",
     "benchmark": "^2.1.4",
+    "esbuild": "^0.19.8",
     "eslint": "8.47.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-ft-flow": "^3.0.0",

packages/esbuild-plugin/README.md

@@ -0,0 +1,3 @@
+# @stylexjs/esbuild-plugin
+
+...

packages/esbuild-plugin/__tests__/__fixtures__/.babelrc.json

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "ie": 11
+        }
+      }
+    ]
+  ]
+}

packages/esbuild-plugin/__tests__/__fixtures__/bazStyles.js

@@ -0,0 +1,20 @@
+/**
+ * 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 stylex from 'stylex';
+
+export default stylex.create({
+  baz: {
+    display: 'block',
+    height: 900,
+    width: '50%',
+  },
+});

packages/esbuild-plugin/__tests__/__fixtures__/fooStyles.js

@@ -0,0 +1,19 @@
+/**
+ * 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 stylex from 'stylex';
+
+export default stylex.create({
+  foo: {
+    display: 'inline',
+    width: '100%',
+  },
+});

packages/esbuild-plugin/__tests__/__fixtures__/index.js

@@ -0,0 +1,39 @@
+/**
+ * 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 stylex from 'stylex';
+import fooStyles from './fooStyles';
+
+const fadeInAnimation = stylex.keyframes({
+  '0%': {
+    opacity: 0,
+  },
+  '100%': {
+    opacity: 1,
+  },
+});
+
+const styles = stylex.create({
+  bar: {
+    animationName: fadeInAnimation,
+    display: 'flex',
+    marginLeft: 10,
+    height: 700,
+    backgroundColor: 'red',
+    ':hover': {
+      backgroundColor: 'pink',
+    },
+  },
+});
+
+export default function App() {
+  return stylex(fooStyles.foo, styles.bar);
+}

packages/esbuild-plugin/__tests__/index-test.js

@@ -0,0 +1,43 @@
+/**
+ * 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';
+
+const path = require('path');
+const esbuild = require('esbuild');
+const stylexPlugin = require('../src/index');
+
+async function build(options = {}) {
+  const { outputFiles } = await esbuild.build({
+    entryPoints: [path.resolve(__dirname, '__fixtures__/index.js')],
+    external: ['stylex'],
+    minify: false,
+    bundle: true,
+    write: false,
+    plugins: [stylexPlugin({ ...options })],
+  });
+
+  return { js: outputFiles[0], css: outputFiles[1] };
+}
+
+describe('esbuild-plugin-stylex', () => {
+  it('prod', async () => {
+    const { js, css } = await build();
+
+    expect(js).toBeDefined();
+    expect(css).toBeDefined();
+  });
+
+  it('dev', async () => {
+    const { js, css } = await build({ dev: true });
+
+    expect(js).toBeDefined();
+    expect(css).toBeUndefined();
+  });
+});

packages/esbuild-plugin/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@stylexjs/esbuild-plugin",
+  "version": "0.0.0",
+  "description": "StyleX esbuild plugin",
+  "main": "src/index.js",
+  "repository": "https://github.com/facebook/stylex.git",
+  "license": "MIT",
+  "scripts": {
+    "test": "jest"
+  },
+  "jest": {
+    "testPathIgnorePatterns": [
+      "/node_modules/",
+      "/__fixtures__/"
+    ],
+    "testEnvironment": "node"
+  },
+  "dependencies": {
+    "@babel/core": "^7.23.5",
+    "@stylexjs/babel-plugin": "^0.3.0"
+  },
+  "devDependencies": {
+    "eslint": "^8.55.0",
+    "@stylexjs/stylex": "0.3.0"
+  }
+}

packages/esbuild-plugin/src/index.js

@@ -0,0 +1,105 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+const babel = require('@babel/core');
+const stylexBabelPlugin = require('@stylexjs/babel-plugin');
+const path = require('path');
+const fs = require('fs/promises');
+
+const PACKAGE_NAME = 'esbuild-plugin-stylex';
+
+const IS_DEV_ENV =
+  process.env.NODE_ENV === 'development' ||
+  process.env.BABEL_ENV === 'development';
+
+function stylexPlugin({
+  dev = IS_DEV_ENV,
+  unstable_moduleResolution = { type: 'commonJS', rootDir: process.cwd() },
+  stylexImports = ['stylex', '@stylexjs/stylex'],
+  // path
+  outPath = 'stylex.css',
+  babelConfig: { plugins = [], presets = [] } = {},
+  ...options
+} = {}) {
+  return {
+    name: PACKAGE_NAME,
+    async setup({ onLoad, onEnd, initialOptions }) {
+      const stylexRules = {};
+
+      onEnd(({ outputFiles }) => {
+        const rules = Object.values(stylexRules).flat();
+
+        if (rules.length === 0) {
+          return;
+        }
+
+        const collectedCSS = stylexBabelPlugin.processStylexRules(rules, true);
+        const shouldWriteToDisk =
+          initialOptions.write === undefined || initialOptions.write;
+
+        if (!shouldWriteToDisk) {
+          // write to disk
+          // fs.writeFile(path.resolve(__dirname, outPath))
+          return;
+        }
+
+        outputFiles.push({
+          path: '<stdout>',
+          contents: new TextEncoder().encode(collectedCSS),
+          get text() {
+            return collectedCSS;
+          },
+        });
+      });
+
+      onLoad({ filter: /\.[jt]sx?$/ }, async (args) => {
+        const currFileName = args.path;
+        const inputCode = await fs.readFile(currFileName, 'utf8');
+
+        if (
+          !stylexImports.some((importName) => inputCode.includes(importName))
+        ) {
+          // avoid transform if file doesn't have stylex imports
+          // esbuild proceeds to the next callback
+          return;
+        }
+
+        // sourcemap?
+        const { code, metadata } = await babel.transformAsync(inputCode, {
+          babelrc: false,
+          filename: currFileName,
+          presets,
+          plugins: [
+            ...plugins,
+            [
+              stylexBabelPlugin,
+              // handle Flow or TS plugin here
+              {
+                dev,
+                unstable_moduleResolution,
+                ...options,
+              },
+            ],
+          ],
+        });
+
+        if (!dev && metadata.stylex !== null && metadata.stylex.length > 0) {
+          stylexRules[args.path] = metadata.stylex;
+        }
+
+        return {
+          contents: code,
+          loader: currFileName.endsWith('.js') ? 'js' : 'tsx',
+        };
+      });
+    },
+  };
+}
+
+module.exports = stylexPlugin;