Address some of the comments

apps/esbuild-example/.eslintrc.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.
+ *
+ *
+ */
+
+module.exports = {
+  plugins: ['@stylexjs'],
+  rules: {
+    // The Eslint rule still needs work, but you can
+    // enable it to test things out.
+    '@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

@@ -4,7 +4,8 @@
   "description": "Simple esbuild example for @stylexjs/esbuild-plugin",
   "main": "src/App.jsx",
   "scripts": {
-    "build": "node scripts/build.js"
+    "build": "node scripts/build.js",
+    "lint": "eslint \"**/*.{js,jsx}\""
   },
   "license": "MIT",
   "dependencies": {
@@ -14,6 +15,8 @@
   },
   "devDependencies": {
     "@stylexjs/esbuild-plugin": "^0.0.0",
-    "esbuild": "^0.19.9"
+    "@stylexjs/eslint-plugin": "^0.3.0",
+    "esbuild": "^0.19.9",
+    "eslint": "^8.55.0"
   }
 }

apps/esbuild-example/public/index.html

@@ -4,10 +4,12 @@
     <title>@stylexjs/esbuild-plugin</title>
     <meta charset="utf-8" />
     <style>
-      body {
-        box-sizing: border-box;
-        padding: 0;
-        margin: 0;
+      @layer reset {
+        body {
+          box-sizing: border-box;
+          padding: 0;
+          margin: 0;
+        }
       }
     </style>
     <link rel="stylesheet" type="text/css" href="./dist/stylex.css" />

apps/esbuild-example/scripts/build.js

@@ -28,10 +28,11 @@ esbuild
     plugins: [
       stylexPlugin({
         useCSSLayers: true,
-        absoluteFilePath: STYLEX_BUNDLE_PATH,
+        generatedCSSFileName: STYLEX_BUNDLE_PATH,
+        stylexImports: ['@stylexjs/stylex'],
         unstable_moduleResolution: {
           type: 'commonJS',
-          rootDir: path.resolve(__dirname, '..'),
+          rootDir: path.resolve(__dirname, '../../..'),
         },
       }),
     ],

apps/esbuild-example/src/App.jsx

@@ -12,7 +12,9 @@
 import * as React from 'react';
 import ReactDOM from 'react-dom';
 import * as stylex from '@stylexjs/stylex';
-import { spacing, color } from './tokens.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: {
@@ -21,16 +23,17 @@ const styles = stylex.create({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: color.pink,
+    backgroundColor: colors.pink7,
   },
   card: {
-    backgroundColor: color.blue,
-    padding: spacing.medium,
-    borderRadius: spacing.small,
+    backgroundColor: colors.blue9,
+    padding: sizes.spacing5,
+    borderRadius: sizes.spacing2,
     justifyContent: 'center',
     display: 'flex',
     alignItems: 'center',
-    color: 'white',
+    color: colors.gray0,
+    fontFamily: fonts.mono,
   },
 });
 

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

@@ -0,0 +1,170 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`esbuild-plugin-stylex extracts and bundles CSS without inject calls, bundles JS 1`] = `
+""use strict";
+(() => {
+  var __create = Object.create;
+  var __defProp = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __getProtoOf = Object.getPrototypeOf;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+    get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+  }) : x)(function(x) {
+    if (typeof require !== "undefined")
+      return require.apply(this, arguments);
+    throw Error('Dynamic require of "' + x + '" is not supported');
+  });
+  var __copyProps = (to, from, except, desc) => {
+    if (from && typeof from === "object" || typeof from === "function") {
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to, key) && key !== except)
+          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+    }
+    return to;
+  };
+  var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+    // If the importer is in node compatibility mode or this is not an ESM
+    // file that has been converted to a CommonJS file using a Babel-
+    // compatible transform (i.e. "__esModule" has not been set), then set
+    // "default" to the CommonJS "module.exports" for node compatibility.
+    isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+    mod
+  ));
+
+  // __tests__/__fixtures__/index.js
+  var import_stylex3 = __toESM(__require("@stylexjs/stylex"));
+
+  // __tests__/__fixtures__/fooStyles.js
+  var import_stylex = __toESM(__require("@stylexjs/stylex"));
+  var fooStyles_default = {
+    foo: {
+      display: "xt0psk2",
+      width: "xh8yej3",
+      $$css: true
+    }
+  };
+
+  // __tests__/__fixtures__/bazStyles.js
+  var import_stylex2 = __toESM(__require("@stylexjs/stylex"));
+  var bazStyles_default = {
+    baz: {
+      display: "x1lliihq",
+      height: "xnsd7bc",
+      width: "x3hqpx7",
+      $$css: true
+    }
+  };
+
+  // __tests__/__fixtures__/index.js
+  var styles = {
+    bar: {
+      animationName: "x127lhb5",
+      display: "x78zum5",
+      marginLeft: "x16ydxro",
+      marginInlineStart: null,
+      marginInlineEnd: null,
+      height: "x1xa6b72",
+      backgroundColor: "xrkmrrc x1r3o6fz",
+      $$css: true
+    }
+  };
+  function App() {
+    return import_stylex3.default.props(fooStyles_default.foo, styles.bar, bazStyles_default.baz);
+  }
+})();
+"
+`;
+
+exports[`esbuild-plugin-stylex preserves stylex.inject calls and does not extract CSS in development mode 1`] = `
+""use strict";
+(() => {
+  var __create = Object.create;
+  var __defProp = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __getProtoOf = Object.getPrototypeOf;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+    get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+  }) : x)(function(x) {
+    if (typeof require !== "undefined")
+      return require.apply(this, arguments);
+    throw Error('Dynamic require of "' + x + '" is not supported');
+  });
+  var __copyProps = (to, from, except, desc) => {
+    if (from && typeof from === "object" || typeof from === "function") {
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to, key) && key !== except)
+          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+    }
+    return to;
+  };
+  var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+    // If the importer is in node compatibility mode or this is not an ESM
+    // file that has been converted to a CommonJS file using a Babel-
+    // compatible transform (i.e. "__esModule" has not been set), then set
+    // "default" to the CommonJS "module.exports" for node compatibility.
+    isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+    mod
+  ));
+
+  // __tests__/__fixtures__/index.js
+  var import_stylex3 = __toESM(__require("@stylexjs/stylex"));
+
+  // __tests__/__fixtures__/fooStyles.js
+  var import_stylex = __toESM(__require("@stylexjs/stylex"));
+  import_stylex.default.inject(".xt0psk2{display:inline}", 3e3);
+  import_stylex.default.inject(".xh8yej3{width:100%}", 4e3);
+  var fooStyles_default = {
+    foo: {
+      fooStyles__foo: "fooStyles__foo",
+      display: "xt0psk2",
+      width: "xh8yej3",
+      $$css: true
+    }
+  };
+
+  // __tests__/__fixtures__/bazStyles.js
+  var import_stylex2 = __toESM(__require("@stylexjs/stylex"));
+  import_stylex2.default.inject(".x1lliihq{display:block}", 3e3);
+  import_stylex2.default.inject(".xnsd7bc{height:900px}", 4e3);
+  import_stylex2.default.inject(".x3hqpx7{width:50%}", 4e3);
+  var bazStyles_default = {
+    baz: {
+      bazStyles__baz: "bazStyles__baz",
+      display: "x1lliihq",
+      height: "xnsd7bc",
+      width: "x3hqpx7",
+      $$css: true
+    }
+  };
+
+  // __tests__/__fixtures__/index.js
+  import_stylex3.default.inject("@keyframes xekv6nw-B{0%{opacity:0;}100%{opacity:1;}}", 1);
+  import_stylex3.default.inject(".x127lhb5{animation-name:xekv6nw-B}", 3e3);
+  import_stylex3.default.inject(".x78zum5{display:flex}", 3e3);
+  import_stylex3.default.inject(".x16ydxro{margin-left:10px}", 4e3);
+  import_stylex3.default.inject(".x1xa6b72{height:700px}", 4e3);
+  import_stylex3.default.inject(".xrkmrrc{background-color:red}", 3e3);
+  import_stylex3.default.inject(".x1r3o6fz:hover{background-color:pink}", 3130);
+  var styles = {
+    bar: {
+      "index__styles.bar": "index__styles.bar",
+      animationName: "x127lhb5",
+      display: "x78zum5",
+      marginLeft: "x16ydxro",
+      marginInlineStart: null,
+      marginInlineEnd: null,
+      height: "x1xa6b72",
+      backgroundColor: "xrkmrrc x1r3o6fz",
+      $$css: true
+    }
+  };
+  function App() {
+    return import_stylex3.default.props(fooStyles_default.foo, styles.bar, bazStyles_default.baz);
+  }
+})();
+"
+`;