Bun
examples/example-bun
demonstrates using StyleX with Bun and @stylexjs/unplugin.
For production builds, Bun can use the unplugin esbuild adapter through
Bun.build(). For Bun's dev server, StyleX also provides a dedicated Bun plugin
entrypoint.
Install
npm install --save-dev @stylexjs/unplugin
pnpm add -D @stylexjs/unplugin
yarn add -D @stylexjs/unplugin
bun add -D @stylexjs/unplugin
Production builds with Bun.build()
import stylex from '@stylexjs/unplugin';
await Bun.build({
entrypoints: ['src/main.jsx'],
outdir: 'dist',
target: 'browser',
metafile: true,
plugins: [
stylex.esbuild({
useCSSLayers: true,
importSources: ['@stylexjs/stylex'],
unstable_moduleResolution: { type: 'commonJS' },
}),
],
});metafile: truelets the plugin locate Bun's emitted CSS asset.useCSSLayers: truewraps the generated StyleX output in@layerblocks.
Bun dev server
Add the Bun plugin entrypoint in bunfig.toml:
[serve.static]
plugins = ["@stylexjs/unplugin/bun"]The Bun plugin writes generated StyleX CSS to a dev stylesheet so Bun can reload it during development.
CSS entrypoint
As with the other bundler integrations, make sure your app imports a CSS file from the root entry so Bun emits a stylesheet for StyleX to append to during production builds.