facebook · kiangtengl · Dec 31, 2025 · Jan 2, 2026
@@ -0,0 +1,63 @@
+# StyleX Bun Example
+
+This example demonstrates how to use StyleX with Bun's bundler using the `@stylexjs/bun-plugin` package.
+
+## Prerequisites
+
+- [Bun](https://bun.sh/) v1.0 or later
+
+## Setup
+
+```bash
+// needed to avoid recursive loop
+bun install --ignore-scripts
+```
+
+## Build
+
+```bash
+bun run example:build
+```
+
+This will:
+1. Bundle the React application with StyleX transformations
+2. Create the JavaScript bundle in `public/dist/App.js`
+3. Generate CSS (appended to any existing CSS file in the output directory, or create a fallback `stylex.css`)
+
+## Run
+
+Open `public/index.html` in your browser to see the result.
+
+## How it works
+
+The build script (`scripts/build.ts`) uses the `@stylexjs/bun-plugin`:
+
+```typescript
+import stylexPlugin from '@stylexjs/bun-plugin';
+
+await Bun.build({
+  entrypoints: ['./src/App.tsx'],
+  outdir: './public/dist',
+  plugins: [
+    stylexPlugin({
+      useCSSLayers: true,
+    }),
+  ],
+});
+```
+
+The plugin:
+1. Intercepts JavaScript/TypeScript file loads via Bun's `onLoad` hook
+2. Transforms StyleX code using Babel
+3. Collects CSS rules from all transformed modules
+4. Uses Bun's `onEnd` hook to append the StyleX CSS to any existing CSS file in the output directory (or creates a new file using the `fileName` option as fallback)
+
+## Options
+
+See [StyleX Babel Plugin Configuration](https://stylexjs.com/docs/api/configuration/babel-plugin/) for all available options.
+
+Common options:
+- `fileName`: Fallback CSS filename if no existing CSS file is found (default: `'stylex.css'`)
+- `useCSSLayers`: Enable CSS layers for better specificity control
+- `importSources`: Array of module sources to transform (default: `['stylex', '@stylexjs/stylex']`)
+- `unstable_moduleResolution`: Configure module resolution for design tokens
@@ -0,0 +1,26 @@
+{
+  "private": true,
+  "name": "example-bun",
+  "version": "0.17.4",
+  "description": "Simple Bun example for @stylexjs/bun-plugin",
+  "main": "src/App.tsx",
+  "scripts": {
+    "example:build": "bun run scripts/build.ts",
+    "example:lint": "eslint \"**/*.{ts,tsx}\""
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@stylexjs/stylex": "0.17.4",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@stylexjs/bun-plugin": "0.17.4",
+    "@stylexjs/eslint-plugin": "0.17.4",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "bun-types": "^1.0.0",
+    "eslint": "^8.57.1",
+    "typescript": "^5.8.0"
+  }
+}
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+
+<head>
+    <title>@stylexjs/unplugin (Bun)</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/App.js"></script>
+</body>
+
+</html>
@@ -0,0 +1,40 @@
+/**
+ * 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 stylexPlugin from '@stylexjs/bun-plugin';
+
+const BUILD_DIR_NAME = 'public/dist';
+
+const result = await Bun.build({
+  entrypoints: [path.resolve(import.meta.dir, '..', 'src/App.tsx')],
+  outdir: path.resolve(import.meta.dir, '..', BUILD_DIR_NAME),
+  minify: true,
+  plugins: [
+    // See all options in the babel plugin configuration docs:
+    // https://stylexjs.com/docs/api/configuration/babel-plugin/
+    stylexPlugin({
+      fileName: 'stylex.css',
+      useCSSLayers: true,
+      unstable_moduleResolution: {
+        type: 'commonJS',
+        rootDir: path.resolve(import.meta.dir, '../../..'),
+      },
+    }),
+  ],
+});
+
+if (!result.success) {
+  console.error('Build failed:');
+  for (const message of result.logs) {
+    console.error(message);
+  }
+  process.exit(1);
+}
+
+console.log('Build succeeded!');
+console.log(`Output: ${BUILD_DIR_NAME}`);
@@ -0,0 +1,53 @@
+/**
+ * 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 './global.css';
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import * as stylex from '@stylexjs/stylex';
+import { colors, fonts, sizes } from './globalTokens.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 (Built with Bun!)</span>
+      </div>
+    </div>
+  );
+}
+
+const container = document.getElementById('root');
+if (container) {
+  const root = createRoot(container);
+  root.render(<App />);
+}
@@ -0,0 +1 @@
+:root { --stylex-injection: 0; }
@@ -0,0 +1,25 @@
+/**
+ * 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 * as stylex from '@stylexjs/stylex';
+
+export const colors = stylex.defineVars({
+  pink7: '#d6336c',
+  blue9: '#1864ab',
+  gray0: '#f8f9fa',
+});
+
+export const fonts = stylex.defineVars({
+  mono: 'Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,monospace',
+});
+
+export const sizes = stylex.defineVars({
+  spacing5: '1.5rem',
+  spacing2: '.5rem',
+});
@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "esModuleInterop": true,
+    "strict": true,
+    "jsx": "react-jsx",
+    "skipLibCheck": true,
+    "types": ["bun-types"]
+  },
+  "include": ["src/**/*", "scripts/**/*"]
+}