Usage with esbuild

Installation

# npm
npm i -D @wyw-in-js/esbuild
# yarn
yarn add --dev @wyw-in-js/esbuild
# pnpm
pnpm add -D @wyw-in-js/esbuild
# bun
bun add -d @wyw-in-js/esbuild

Configuration

import wyw from '@wyw-in-js/esbuild';
import esbuild from 'esbuild';
 
const prod = process.env.NODE_ENV === 'production';
 
esbuild
  .build({
    entryPoints: ['src/index.ts'],
    outdir: 'dist',
    bundle: true,
    minify: prod,
    plugins: [
      wyw({
        filter: /\.(js|jsx|ts|tsx)$/,
        sourceMap: prod,
      }),
    ],
  })
  .catch(() => process.exit(1));

Additional Babel transformations

esbuild doesn't support chaining multiple onLoad transforms for the same file. If your project needs extra Babel plugins to run before WyW evaluation (for example, plugins that operate on TS/JSX), enable babelTransform:

wyw({
  babelTransform: true,
  babelOptions: {
    plugins: [
      // your custom Babel plugins
    ],
  },
});

Order: Babel(source) → esbuild.transform() → WyW transform.

Note: babelOptions are still used by WyW when parsing/evaluating modules. With babelTransform: true, the same plugins may run both before esbuild and again during WyW's internal Babel stage. Prefer idempotent plugins.

This is opt-in and may impact performance, so keep filter narrow when possible.

Transforming libraries in `node_modules`

By default, the esbuild plugin skips transforming files from node_modules for performance.

To transform a specific library, enable transformLibraries and narrow filter:

wyw({
  transformLibraries: true,
  filter: /node_modules\\/(?:@fluentui)\\//,
});

Disabling vendor prefixing

Stylis adds vendor-prefixed CSS by default. To disable it (and reduce CSS size), pass prefixer: false:

wyw({
  prefixer: false,
});

Keeping CSS comments

Stylis strips CSS comments by default. To preserve them (for example, /*rtl:ignore*/), pass keepComments:

wyw({
  keepComments: true,
  // or keep only matching comments:
  // keepComments: /rtl:/,
});

Note: esbuild removes CSS comments when minify: true. Disable CSS minification if you need comments in the final output.

Bun Index