Skip to content

Conversation

@kiangtengl
Copy link

What changed / motivation ?

Adds a bun plugin so that we can use stylex with bun. Plugin is a wrapper around the stylex babel transforms.

Main features

  • Appends to the bundle css file
  • Also allows for an option to output to a separate file, i.e. stylex.css

Usage

import stylexPlugin from '@stylexjs/bun-plugin';

await Bun.build({
  entrypoints: ['./src/App.tsx'],
  outdir: './public/dist',
  plugins: [
    stylexPlugin({
      useCSSLayers: true,
    }),
  ],
});

Linked PR/Issues

Fixes #497. Issue was closed because bun plugin didn't support require.resolve(..., options) but this has since been updated

Additional Context

Running the build in bun

stylex/examples/example-bun on  HEAD (b559b8a) [!] via  v20.17.0 
❯ bun run example:build
$ bun run scripts/build.ts
Browserslist: browsers data (caniuse-lite) is 7 months old. Please run:
  npx update-browserslist-db@latest
  Why you should do it regularly: https://github.com/browserslist/update-db#readme
Build succeeded!
Output: public/dist

Unit tests for the plugin

 PASS  __tests__/bun-plugin.test.js
  @stylexjs/bun-plugin
    extracts CSS from StyleX files
      ✓ basic styles (47 ms)
      ✓ multiple styles files (14 ms)
      ✓ complex styles with keyframes and pseudo-selectors (10 ms)
    handles files without StyleX
      ✓ ignores files without StyleX imports (1 ms)
    supports CSS layers
      ✓ wraps CSS in @layer when useCSSLayers is true (5 ms)
      ✓ CSS layers with multiple files (6 ms)
    TypeScript/TSX support
      ✓ transforms TSX files (7 ms)
    plugin configuration
      ✓ exports a function that returns a Bun plugin
      ✓ setup function registers onLoad and onEnd callbacks (1 ms)
    edge cases
      ✓ handles non-existent files gracefully (1 ms)
      ✓ handles empty file gracefully (2 ms)
      ✓ resets state between builds

Test Suites: 1 passed, 1 total
Tests:       12 passed, 12 total
Snapshots:   11 passed, 11 total
Time:        0.355 s, estimated 1 s
Ran all test suites.

Pre-flight checklist

stylex on  add-bun-plugin via  v20.17.0 
❯ npm run lint

> [email protected] lint
> npm run lint:report -- --fix

> [email protected] lint:report
> eslint . --ext .flow,.js,.jsx,.mjs --fix

stylex on  add-bun-plugin via  v20.17.0 took 6s 
❯ npm run flow

> [email protected] flow
> flow

Launching Flow server for /Users/kiangtengl/dev/stylex
Spawned flow server (pid=52452)
Logs will go to /private/tmp/flow/zSUserszSkiangtenglzSdevzSstylex.log
Monitor logs will go to /private/tmp/flow/zSUserszSkiangtenglzSdevzSstylex.monitor_log
No errors!

Test Results

Package | Result
-- | --
@stylexjs/bun-plugin | ✅ 12 passed
@stylexjs/babel-plugin | ✅ 117 passed, 1 failed (pre-existing on main)
@stylexjs/stylex | ✅ Passed
@stylexjs/eslint-plugin | ✅ Passed
@stylexjs/rollup-plugin | ✅ 3 passed
@stylexjs/postcss-plugin | ✅ 12 passed
@stylexjs/cli | ✅ 13 passed, 3 failed (pre-existing on main)
@stylexjs/unplugin | ✅ 3 passed
@stylexjs/shared | ✅ Passed
style-value-parser | ✅ 322 passed

## Pre-existing Issues (Same on Main)
Issue | Cause
transform-stylex-props-test.js fails | Pre-existing on main
@stylexjs/cli 3 tests fail | Pre-existing on main
typescript-tests fails | react-router dependency incompatibility
Docs build fails | react-router / Docusaurus incompatibility

Kiang Teng added 2 commits January 1, 2026 21:17
…tion

This adds a new `@stylexjs/bun-plugin` package that enables using StyleX with Bun's bundler.

## Why

Bun is a popular JavaScript runtime and bundler, and users have been asking for
native StyleX integration. This plugin allows developers to use StyleX in
Bun-based projects with the same developer experience as existing integrations
(rollup-plugin, postcss-plugin, etc.).

## What

New Package (`packages/@stylexjs/bun-plugin`):
- Implements a Bun plugin using `onLoad` hook for transforming StyleX code via Babel
- Uses `onEnd` hook to collect and write CSS after build completes
- Appends StyleX CSS to existing CSS files in the output directory (or creates a new file as fallback)
- Processes CSS with lightningcss for minification and browser compatibility
- Supports all `@stylexjs/babel-plugin` options plus additional options:
  - `fileName`: Fallback CSS filename (default: `'stylex.css'`)
  - `useCSSLayers`: Enable CSS `@layer` for specificity control
  - `babelConfig`: Custom Babel plugins/presets
  - `lightningcssOptions`: Custom lightningcss transform options
- Includes TypeScript declarations (`index.d.ts`)
- Comprehensive test suite with 12 tests covering:
  - Basic StyleX transformation
  - Multiple files with merged CSS
  - Complex styles (keyframes, pseudo-classes)
  - CSS layers support
  - TypeScript/TSX support
  - Development mode
  - Files without StyleX imports
  - Empty/missing StyleX scenarios

New Example (`examples/example-bun`):
- Demonstrates usage with a React + StyleX application
- Includes build script using the new plugin
- Uses design tokens via `globalTokens.stylex.ts`

## Test Plan

- Ran `npm run test -w @stylexjs/bun-plugin` - all 12 tests pass
- Built example-bun with `bun run example:build` - CSS correctly generated and appended
- Verified CSS output contains StyleX rules with proper @layer support
The yargs package was updated to v18 in commit c5bf938 which is
ESM-only. This broke the gen-types script which used CommonJS require().

This fix converts the yargs import to use dynamic import() which works
from CommonJS modules when importing ESM packages.

Test Plan:
- Ran `npm run build` - all packages build successfully including type generation
- Ran `npm run test:packages` - all tests pass including typescript-tests
- Ran `npm run lint` - no errors
@vercel
Copy link

vercel bot commented Jan 2, 2026

Someone is attempting to deploy a commit to the Meta Open Source Team on Vercel.

A member of the Team first needs to authorize it.

@meta-cla meta-cla bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Jan 2, 2026
@kiangtengl kiangtengl changed the title Add bun plugin support [plugin] Add bun plugin support Jan 7, 2026
@kiangtengl kiangtengl changed the title [plugin] Add bun plugin support [bun-plugin] Add bun plugin support Jan 7, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

StyleX Plugin for Bun.sh Bundler

1 participant