diff --git a/examples/example-esbuild/README.md b/examples/example-esbuild/README.md index 446cb31eb..327e18fc2 100644 --- a/examples/example-esbuild/README.md +++ b/examples/example-esbuild/README.md @@ -1,3 +1,60 @@ -# esbuild example using StyleX +# StyleX with esbuild -TBD +This example bundles a React app with esbuild while compiling StyleX via +`@stylexjs/unplugin`. The plugin extracts StyleX styles at build time, +aggregates them, and appends the result to an existing CSS file produced by +esbuild. + +### Prerequisites + +- Node.js 18+ +- [`esbuild`](https://esbuild.github.io/) (installed locally) +- `@stylexjs/unplugin` + +## Install dependencies + +```bash +npm install +``` + +## Build script (`scripts/build.mjs`) + +The build script wires the unplugin into esbuild: + +```js +import stylex from '@stylexjs/unplugin'; + +esbuild.build({ + entryPoints: ['src/App.jsx'], + bundle: true, + metafile: true, + plugins: [ + stylex.esbuild({ + useCSSLayers: true, + importSources: ['@stylexjs/stylex'], + unstable_moduleResolution: { type: 'commonJS' }, + }), + ], +}); +``` + +- `metafile: true` lets the plugin locate CSS assets emitted by esbuild. +- `useCSSLayers: true` ensures the generated StyleX output is wrapped in CSS + `@layer` declarations which enforces specificity. StyleX will use a polyfill + based on ID selectors if omitted. + +## CSS entry point (`src/global.css`) + +The project imports `src/global.css` so esbuild emits a CSS asset. The StyleX +plugin appends the aggregated styles to that file during +`npm run example:build`. + +## Commands + +```bash +# Production bundle + CSS extraction +npm run example:build +``` + +Use `npm run example:build` whenever you need a fresh `public/dist` folder +containing both the JS bundle and the StyleX-enriched CSS. diff --git a/examples/example-esbuild/package.json b/examples/example-esbuild/package.json index 970fb2abf..027dc702f 100644 --- a/examples/example-esbuild/package.json +++ b/examples/example-esbuild/package.json @@ -2,7 +2,7 @@ "private": true, "name": "example-esbuild", "version": "0.16.3", - "description": "Simple esbuild example for @stylexjs/esbuild-plugin", + "description": "Simple esbuild example for @stylexjs/unplugin", "main": "src/App.jsx", "scripts": { "example:build": "node scripts/build.mjs", @@ -15,7 +15,7 @@ "react-dom": "^18.3.0" }, "devDependencies": { - "@stylexjs/esbuild-plugin": "0.11.1", + "@stylexjs/unplugin": "0.16.3", "@stylexjs/eslint-plugin": "0.16.3", "esbuild": "^0.25.0", "eslint": "^8.57.1" diff --git a/examples/example-esbuild/public/index.html b/examples/example-esbuild/public/index.html index cdee4582e..a6839b505 100644 --- a/examples/example-esbuild/public/index.html +++ b/examples/example-esbuild/public/index.html @@ -1,7 +1,7 @@ - @stylexjs/esbuild-plugin + @stylexjs/unplugin (esbuild)