diff --git a/examples/example-bun/.eslintrc.js b/examples/example-bun/.eslintrc.js new file mode 100644 index 000000000..6610adfd9 --- /dev/null +++ b/examples/example-bun/.eslintrc.js @@ -0,0 +1,18 @@ +/** + * 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: { + '@stylexjs/valid-styles': 'error', + 'ft-flow/space-after-type-colon': 0, + 'ft-flow/no-types-missing-file-annotation': 0, + 'ft-flow/generic-spacing': 0, + }, +}; diff --git a/examples/example-bun/README.md b/examples/example-bun/README.md new file mode 100644 index 000000000..04016d284 --- /dev/null +++ b/examples/example-bun/README.md @@ -0,0 +1,73 @@ +# StyleX with Bun + +This example bundles a React app with Bun while compiling StyleX via +`@stylexjs/unplugin`. The unplugin uses its esbuild adapter (Bun’s plugin API is +esbuild-compatible) to compile StyleX at build time, aggregate the generated +styles, and append them to the CSS asset emitted from `src/global.css`. + +### Prerequisites + +- Bun 1.1+ +- `@stylexjs/unplugin` + +## Install dependencies + +```bash +npm install +``` + +## Build script (`scripts/build.mjs`) + +The production build script wires the unplugin into `Bun.build`: + +```js +import stylex from '@stylexjs/unplugin'; + +await Bun.build({ + entrypoints: ['src/main.jsx'], + outdir: 'dist', + metafile: true, + plugins: [ + stylex.esbuild({ + useCSSLayers: true, + importSources: ['@stylexjs/stylex'], + }), + ], +}); +``` + +- `metafile: true` lets the plugin locate CSS assets emitted by Bun. +- `useCSSLayers: true` wraps StyleX output in `@layer` declarations for + predictable specificity. + +## CSS entry points + +- Production uses `src/global.css` so Bun emits a CSS asset; StyleX appends + aggregated styles during `npm run example:build`. +- Development writes `dist/stylex.dev.css`, which the Bun plugin rewrites on + every StyleX transform so the dev server can hot-reload CSS. + +## Dev server integration + +The Bun dev server uses `bunfig.toml` with `@stylexjs/unplugin/bun`, which +writes generated StyleX rules into `dist/stylex.dev.css` (marked with +`--stylex-injection`). + +`dist/` is generated output and should remain gitignored. + +## Commands + +```bash +# Production bundle + StyleX CSS extraction +npm run example:build + +# Bun dev server with HMR at http://localhost:3000 +npm run example:dev + +# Serve the generated bundle (run example:build first) +npm run example:start +``` + +The dev server uses Bun's fullstack mode, bundling `dist/index.dev.html` on +request with `development: true` and the StyleX Bun plugin. Production builds +write `dist/index.html` alongside the bundled assets. diff --git a/examples/example-bun/bunfig.toml b/examples/example-bun/bunfig.toml new file mode 100644 index 000000000..0abe92cde --- /dev/null +++ b/examples/example-bun/bunfig.toml @@ -0,0 +1,2 @@ +[serve.static] +plugins = ["@stylexjs/unplugin/bun"] diff --git a/examples/example-bun/package.json b/examples/example-bun/package.json new file mode 100644 index 000000000..0828505bf --- /dev/null +++ b/examples/example-bun/package.json @@ -0,0 +1,24 @@ +{ + "private": true, + "name": "example-bun", + "version": "0.17.4", + "description": "Example: StyleX with Bun via @stylexjs/unplugin", + "main": "src/App.jsx", + "scripts": { + "example:build": "bun run scripts/build.mjs", + "example:dev": "bun run scripts/dev.mjs", + "example:start": "bun run scripts/start.mjs", + "example:lint": "eslint \"**/*.{js,jsx}\"" + }, + "license": "MIT", + "dependencies": { + "@stylexjs/stylex": "0.17.4", + "react": "^19.2.0", + "react-dom": "^19.2.0" + }, + "devDependencies": { + "@stylexjs/unplugin": "0.17.4", + "@stylexjs/eslint-plugin": "0.17.4", + "eslint": "^8.57.1" + } +} diff --git a/examples/example-bun/scripts/build.mjs b/examples/example-bun/scripts/build.mjs new file mode 100644 index 000000000..304cfc92f --- /dev/null +++ b/examples/example-bun/scripts/build.mjs @@ -0,0 +1,56 @@ +/** + * 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 { fileURLToPath } from 'url'; +import stylex from '@stylexjs/unplugin'; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); + +const entrypoint = path.resolve(__dirname, '..', 'src', 'main.jsx'); +const outdir = path.resolve(__dirname, '..', 'dist'); +const htmlTemplate = path.resolve(__dirname, '..', 'src', 'index.html'); +const htmlOutput = path.resolve(outdir, 'index.html'); + +async function build() { + const result = await Bun.build({ + entrypoints: [entrypoint], + outdir, + target: 'browser', + minify: true, + metafile: true, + plugins: [ + stylex.esbuild({ + useCSSLayers: true, + importSources: ['@stylexjs/stylex'], + unstable_moduleResolution: { + type: 'commonJS', + rootDir: path.resolve(__dirname, '../../..'), + }, + }), + ], + }); + + if (!result.success) { + console.error('Bun build failed.'); + for (const message of result.logs) { + console.error(message); + } + process.exit(1); + } + + try { + await Bun.write(htmlOutput, await Bun.file(htmlTemplate).text()); + } catch (error) { + console.error('Failed to write dist/index.html.'); + console.error(error); + process.exit(1); + } +} + +build(); diff --git a/examples/example-bun/scripts/dev.mjs b/examples/example-bun/scripts/dev.mjs new file mode 100644 index 000000000..f17e6e578 --- /dev/null +++ b/examples/example-bun/scripts/dev.mjs @@ -0,0 +1,36 @@ +/** + * 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 { mkdir } from 'fs/promises'; +import { fileURLToPath, pathToFileURL } from 'url'; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); + +const distDir = path.resolve(__dirname, '..', 'dist'); +const htmlTemplate = path.resolve(__dirname, '..', 'src', 'index.dev.html'); +const htmlOutput = path.resolve(distDir, 'index.dev.html'); + +async function dev() { + await mkdir(distDir, { recursive: true }); + await Bun.write(htmlOutput, await Bun.file(htmlTemplate).text()); + const homepage = (await import(pathToFileURL(htmlOutput).href)).default; + + const port = Number(process.env.PORT) || 3000; + + const server = Bun.serve({ + port, + development: true, + routes: { + '/': homepage, + }, + }); + + console.log(`Dev server running at http://localhost:${server.port}`); +} +dev(); diff --git a/examples/example-bun/scripts/start.mjs b/examples/example-bun/scripts/start.mjs new file mode 100644 index 000000000..5e5283cc7 --- /dev/null +++ b/examples/example-bun/scripts/start.mjs @@ -0,0 +1,33 @@ +/** + * 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 { fileURLToPath } from 'url'; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); + +const distDir = path.resolve(__dirname, '..', 'dist'); +const port = Number(process.env.PORT) || 3000; + +const server = Bun.serve({ + port, + async fetch(request) { + const url = new URL(request.url); + const pathname = url.pathname === '/' ? '/index.html' : url.pathname; + const filePath = path.join(distDir, pathname); + const file = Bun.file(filePath); + + if (await file.exists()) { + return new Response(file); + } + + return new Response('Not found', { status: 404 }); + }, +}); + +console.log(`Server running at http://localhost:${server.port}`); diff --git a/examples/example-bun/src/App.jsx b/examples/example-bun/src/App.jsx new file mode 100644 index 000000000..362bf4e69 --- /dev/null +++ b/examples/example-bun/src/App.jsx @@ -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 * as React from 'react'; +import * as stylex from '@stylexjs/stylex'; +import { colors, fonts, sizes } from './globalTokens.stylex'; + +export default function App() { + return ( +
+
+ StyleX + Bun + unplugin +
+
+ ); +} + +const styles = stylex.create({ + main: { + minHeight: '100vh', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + backgroundColor: colors.gray0, + }, + card: { + backgroundColor: colors.blue9, + padding: sizes.spacing5, + borderRadius: sizes.spacing2, + justifyContent: 'center', + display: 'flex', + alignItems: 'center', + color: colors.gray0, + fontFamily: fonts.mono, + }, +}); diff --git a/examples/example-bun/src/global.css b/examples/example-bun/src/global.css new file mode 100644 index 000000000..5d7a0446a --- /dev/null +++ b/examples/example-bun/src/global.css @@ -0,0 +1,3 @@ +:root { + --stylex-injection: 0; +} diff --git a/examples/example-bun/src/globalTokens.stylex.js b/examples/example-bun/src/globalTokens.stylex.js new file mode 100644 index 000000000..20dc2f7bb --- /dev/null +++ b/examples/example-bun/src/globalTokens.stylex.js @@ -0,0 +1,23 @@ +/** + * 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: '#999', +}); + +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', +}); diff --git a/examples/example-bun/src/index.dev.html b/examples/example-bun/src/index.dev.html new file mode 100644 index 000000000..1b1dd2bb6 --- /dev/null +++ b/examples/example-bun/src/index.dev.html @@ -0,0 +1,21 @@ + + + + @stylexjs/unplugin (bun dev) + + + + + +
+ + + diff --git a/examples/example-bun/src/index.html b/examples/example-bun/src/index.html new file mode 100644 index 000000000..4c4f87f5d --- /dev/null +++ b/examples/example-bun/src/index.html @@ -0,0 +1,21 @@ + + + + @stylexjs/unplugin (bun) + + + + + +
+ + + diff --git a/examples/example-bun/src/main.jsx b/examples/example-bun/src/main.jsx new file mode 100644 index 000000000..de8580899 --- /dev/null +++ b/examples/example-bun/src/main.jsx @@ -0,0 +1,13 @@ +/** + * 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 './global.css'; +import React from 'react'; +import { createRoot } from 'react-dom/client'; +import App from './App.jsx'; + +createRoot(document.getElementById('root')).render(); diff --git a/examples/example-esbuild/public/index.html b/examples/example-esbuild/public/index.html index a6839b505..ca998aaaa 100644 --- a/examples/example-esbuild/public/index.html +++ b/examples/example-esbuild/public/index.html @@ -12,7 +12,7 @@ } } - +
diff --git a/examples/example-esbuild/src/App.jsx b/examples/example-esbuild/src/App.jsx index d44868869..748c4f16b 100644 --- a/examples/example-esbuild/src/App.jsx +++ b/examples/example-esbuild/src/App.jsx @@ -11,7 +11,7 @@ import './global.css'; import * as React from 'react'; -import ReactDOM from 'react-dom'; +import { createRoot } from 'react-dom/client'; import * as stylex from '@stylexjs/stylex'; import { colors, fonts, sizes } from './globalTokens.stylex'; @@ -46,4 +46,4 @@ function App() { ); } -ReactDOM.render(, document.getElementById('root')); +createRoot(document.getElementById('root')).render(); diff --git a/examples/example-redwoodsdk/src/app/DevStyleXInject.tsx b/examples/example-redwoodsdk/src/app/DevStyleXInject.tsx index aa6ebf579..90380d81b 100644 --- a/examples/example-redwoodsdk/src/app/DevStyleXInject.tsx +++ b/examples/example-redwoodsdk/src/app/DevStyleXInject.tsx @@ -4,23 +4,10 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ -'use client'; - -import { useEffect } from 'react'; - -function DevStyleXInjectImpl() { - useEffect(() => { - if (import.meta.env.DEV) { - // @ts-ignore - import('virtual:stylex:css-only'); - } - }, []); - return ; -} export function DevStyleXInject({ cssHref }: { cssHref: string }) { return import.meta.env.DEV ? ( - + ) : ( ); diff --git a/examples/example-redwoodsdk/src/client.tsx b/examples/example-redwoodsdk/src/client.tsx index 31df17a92..2812d90fe 100644 --- a/examples/example-redwoodsdk/src/client.tsx +++ b/examples/example-redwoodsdk/src/client.tsx @@ -7,3 +7,8 @@ import { initClient } from 'rwsdk/client'; initClient(); + +if (import.meta.env.DEV) { + // @ts-ignore + import('virtual:stylex:css-only'); +} diff --git a/examples/example-rollup/src/App.js b/examples/example-rollup/src/App.js index 227e4b0fe..5563f41ed 100644 --- a/examples/example-rollup/src/App.js +++ b/examples/example-rollup/src/App.js @@ -9,6 +9,14 @@ import * as stylex from '@stylexjs/stylex'; +export default function App() { + return ( +
+
Content
+
+ ); +} + const styles = stylex.create({ main: { width: '100vw', @@ -29,11 +37,3 @@ const styles = stylex.create({ fontFamily: 'Arial', }, }); - -export default function App() { - return ( -
-
Content
-
- ); -} diff --git a/examples/example-rspack/src/App.jsx b/examples/example-rspack/src/App.jsx index d9ef80eed..5acf7b493 100644 --- a/examples/example-rspack/src/App.jsx +++ b/examples/example-rspack/src/App.jsx @@ -7,6 +7,14 @@ import * as stylex from '@stylexjs/stylex'; +export default function App() { + return ( +
+

StyleX + Rspack + unplugin

+
+ ); +} + const styles = stylex.create({ app: { minHeight: '100vh', @@ -20,11 +28,3 @@ const styles = stylex.create({ fontWeight: 700, }, }); - -export default function App() { - return ( -
-

StyleX + Rspack + unplugin

-
- ); -} diff --git a/examples/example-vite-react/src/App.tsx b/examples/example-vite-react/src/App.tsx index 29e13fc75..e95bd77e8 100644 --- a/examples/example-vite-react/src/App.tsx +++ b/examples/example-vite-react/src/App.tsx @@ -11,6 +11,59 @@ import * as stylex from '@stylexjs/stylex'; import { Button } from '@stylexjs/shared-ui'; import { tokens } from '@stylexjs/shared-ui/tokens.stylex'; +export default function App() { + const [count, setCount] = useState(0); + + return ( +
+
+ +

Vite + React

+
+ + +

+ Edit src/App.tsx and save to test HMR +

+
+

+ Click on the Vite and React logos to learn more +

+
+
+ ); +} + const spin = stylex.keyframes({ from: { transform: 'rotate(0deg)' }, to: { transform: 'rotate(360deg)' }, @@ -79,58 +132,3 @@ const styles = stylex.create({ outline: { ':focus-visible': '4px auto -webkit-focus-ring-color' }, }, }); - -function App() { - const [count, setCount] = useState(0); - - return ( -
-
- -

Vite + React

-
- - -

- Edit src/App.tsx and save to test HMR -

-
-

- Click on the Vite and React logos to learn more -

-
-
- ); -} - -export default App; diff --git a/examples/example-vite-react/vite.config.ts b/examples/example-vite-react/vite.config.ts index 8d5a98c59..b1ddc3a24 100644 --- a/examples/example-vite-react/vite.config.ts +++ b/examples/example-vite-react/vite.config.ts @@ -10,6 +10,5 @@ import stylex from '@stylexjs/unplugin'; // https://vite.dev/config/ export default defineConfig({ - // @ts-expect-error - ignore for now plugins: [stylex.vite(), react({})], }); diff --git a/examples/example-vite/src/App.jsx b/examples/example-vite/src/App.jsx index 08b55e346..638d927c5 100644 --- a/examples/example-vite/src/App.jsx +++ b/examples/example-vite/src/App.jsx @@ -9,6 +9,17 @@ import * as stylex from '@stylexjs/stylex'; import { Button } from '@stylexjs/shared-ui'; import { tokens } from '@stylexjs/shared-ui/tokens.stylex'; +export default function App() { + return ( +
+

StyleX + Vite + unplugin

+ +
+ ); +} + const styles = stylex.create({ app: { minHeight: '100%', @@ -21,14 +32,3 @@ const styles = stylex.create({ fontWeight: 700, }, }); - -export default function App() { - return ( -
-

StyleX + Vite + unplugin

- -
- ); -} diff --git a/examples/example-waku/package.json b/examples/example-waku/package.json index d2f5868e3..5b0a5332d 100644 --- a/examples/example-waku/package.json +++ b/examples/example-waku/package.json @@ -10,15 +10,15 @@ }, "dependencies": { "@stylexjs/stylex": "0.17.5", - "react": "^19.2.0", - "react-dom": "^19.2.0", + "react": "^19.2.3", + "react-dom": "^19.2.3", "react-server-dom-webpack": "19.2.1", - "waku": "0.27.1", + "waku": "1.0.0-alpha.0", "@stylexjs/shared-ui": "0.17.5" }, "devDependencies": { "@stylexjs/unplugin": "0.17.5", - "@types/react": "^19.2.6", + "@types/react": "^19.2.7", "@types/react-dom": "^19.2.3", "@vitejs/plugin-react": "5.1.0", "babel-plugin-react-compiler": "1.0.0", diff --git a/examples/example-waku/src/components/counter.tsx b/examples/example-waku/src/components/counter.tsx index 1873f752a..51eab9ddb 100644 --- a/examples/example-waku/src/components/counter.tsx +++ b/examples/example-waku/src/components/counter.tsx @@ -11,7 +11,7 @@ import { useState } from 'react'; import { Button } from '@stylexjs/shared-ui'; import { tokens } from '@stylexjs/shared-ui/tokens.stylex'; -export const Counter = () => { +export function Counter() { const [count, setCount] = useState(0); const handleIncrement = () => setCount((c) => c + 1); @@ -24,7 +24,7 @@ export const Counter = () => { ); -}; +} const opacity = (color: string, percentage: number) => `color-mix(in oklab, ${color} ${percentage}%, transparent)`; diff --git a/examples/example-waku/src/pages.gen.ts b/examples/example-waku/src/pages.gen.ts index 723661e4c..388f6f4fe 100644 --- a/examples/example-waku/src/pages.gen.ts +++ b/examples/example-waku/src/pages.gen.ts @@ -1,9 +1,6 @@ -/** - * 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. - */ +// deno-fmt-ignore-file +// biome-ignore format: generated types do not need formatting +// prettier-ignore import type { PathsForPages, GetConfigResponse } from 'waku/router'; // prettier-ignore diff --git a/examples/example-webpack/src/App.jsx b/examples/example-webpack/src/App.jsx index 44d51d679..6bea0aa27 100644 --- a/examples/example-webpack/src/App.jsx +++ b/examples/example-webpack/src/App.jsx @@ -13,6 +13,41 @@ import { colors } from './tokens.stylex'; import './app.css'; import CtaButton from './components/CTAButton'; +export default function App() { + return ( +
+ +

Webpack + StyleX

+
+ + Get Started + + + Thinking in StyleX + +
+
+ ); +} + const styles = stylex.create({ main: { padding: '2rem', @@ -34,7 +69,7 @@ const styles = stylex.create({ ':hover': 'drop-shadow(0 0 2em #646cffaa)', }, willChange: 'filter', - height: '6em' , + height: '6em', }, header: { color: colors.textPrimary, @@ -46,29 +81,3 @@ const styles = stylex.create({ display: 'flex', }, }); - -const App = () => { - return ( -
- -

Webpack + StyleX

-
- - Get Started - - - Thinking in StyleX - -
-
- ) -} - -export default App \ No newline at end of file diff --git a/packages/@stylexjs/unplugin/README.md b/packages/@stylexjs/unplugin/README.md index 50f498ca1..1a4e005de 100644 --- a/packages/@stylexjs/unplugin/README.md +++ b/packages/@stylexjs/unplugin/README.md @@ -1,10 +1,15 @@ # @stylexjs/unplugin -Universal bundler plugin for StyleX built on top of `unplugin`. It compiles StyleX at build time, aggregates CSS from all transformed modules, and appends the result into an existing CSS asset produced by your bundler (or emits a stable fallback when none exists). +Universal bundler plugin for StyleX built on top of `unplugin`. It compiles +StyleX at build time, aggregates CSS from all transformed modules, and appends +the result into an existing CSS asset produced by your bundler (or emits a +stable fallback when none exists). - Adapters for Vite/Rollup, Webpack/Rspack, and esbuild. - Designed to keep StyleX output consolidated and deterministic. -- Dev helpers expose virtual modules for hot CSS reloads: `virtual:stylex:runtime` (JS) and `/virtual:stylex.css` (CSS) or `virtual:stylex:css-only` (JS shim). +- Dev helpers expose virtual modules for hot CSS reloads: + `virtual:stylex:runtime` (JS) and `/virtual:stylex.css` (CSS) or + `virtual:stylex:css-only` (JS shim). ## Install @@ -14,6 +19,10 @@ npm i -D @stylexjs/unplugin ## Usage by bundler +Bundler-specific entrypoints are available (for example, +`@stylexjs/unplugin/vite`, `@stylexjs/unplugin/webpack`, +`@stylexjs/unplugin/esbuild`, and `@stylexjs/unplugin/bun`). + ### Vite ```ts @@ -33,10 +42,20 @@ export default defineConfig({ ``` Notes: -- The plugin auto-discovers installed packages that depend on `@stylexjs/stylex` (or any configured `importSources`) and excludes them from `optimizeDeps`/`ssr.optimizeDeps` so their StyleX code is transformed. Use `externalPackages` to force-deopt additional deps. -- `devMode: 'full'` injects a lightweight runtime that refetches the dev CSS endpoint on HMR. `css-only` serves just the CSS endpoint. `off` disables dev middleware/virtual modules. -- In dev, inject the virtual CSS + runtime from your HTML shell. If a `