esbuild Plugin

The esbuild plugin provides the same static CSS extraction as the Vite plugin, using esbuild’s onResolve and onLoad hooks.

Install

bun

bun add typewritingclass
bun add -d typewritingclass-esbuild typewritingclass-compiler

pnpm

pnpm add typewritingclass
pnpm add -D typewritingclass-esbuild typewritingclass-compiler

npm

npm install typewritingclass
npm install -D typewritingclass-esbuild typewritingclass-compiler

Configure

build.ts

import * as esbuild from 'esbuild'
import twcEsbuildPlugin from 'typewritingclass-esbuild'

await esbuild.build({
  entryPoints: ['src/main.tsx'],
  bundle: true,
  outdir: 'dist',
  plugins: [twcEsbuildPlugin()],
})

Options

twcEsbuildPlugin({
  strict: true, // default: true
})

See Strict Mode for details.

Virtual CSS module

Same as Vite — import in your entry file:

import 'virtual:twc.css'

Watch mode

const ctx = await esbuild.context({
  entryPoints: ['src/main.tsx'],
  bundle: true,
  outdir: 'dist',
  plugins: [twcEsbuildPlugin()],
})
await ctx.watch()

Comparison with Vite

Feature	Vite	esbuild
Package	typewritingclass-compiler	typewritingclass-esbuild
HMR	Full	Via watch/serve
Source maps	MagicString	esbuild built-in
Diagnostics	Browser overlay	Terminal output

Both use the same Rust compiler and produce identical CSS.