Vite Plugin

The Vite plugin statically extracts styles at build time into optimized CSS with full HMR support.

Install

pnpm

pnpm add typewritingclass
pnpm add -D typewritingclass-compiler

bun

bun add typewritingclass
bun add -d typewritingclass-compiler

npm

npm install typewritingclass
npm install -D typewritingclass-compiler

Configure

vite.config.ts

import { defineConfig } from 'vite'
import twcPlugin from 'typewritingclass-compiler'

export default defineConfig({
  plugins: [twcPlugin()],
})

Add your framework plugin alongside it:

// React, Svelte, Vue -- order doesn't matter
plugins: [react(), twcPlugin()]

Solid.js: twcPlugin must come first

vite-plugin-solid uses Vite’s enforce: 'pre' phase, the same as twcPlugin. When two enforce: 'pre' plugins run, array order determines execution order. If solid() runs first, it rewrites import paths before the TWC compiler can identify typewritingclass imports, and all tw chains silently skip compilation.

// Solid -- twcPlugin MUST come before solid
plugins: [twcPlugin(), solid()]

This applies to any framework plugin that uses enforce: 'pre' and rewrites import specifiers.

Options

twcPlugin({
  strict: true, // default: true -- errors on non-static cx() args
})

See Strict Mode for details.

How it works

1. Theme loading — imports theme modules and passes them to the Rust compiler.
2. Transform — for each .ts/.tsx/.js/.jsx file with typewritingclass imports, the Rust compiler extracts styles and replaces calls with class name strings.
3. CSS injection — the plugin automatically injects the extracted CSS via a virtual module. No manual imports needed.
4. HMR — file changes invalidate the virtual module. The browser receives updated CSS without a full reload.

Source maps

Generated automatically via MagicString. DevTools trace CSS rules back to the original TypeScript source file and line.

Diagnostics

• Errors appear in Vite’s browser overlay and fail production builds.
• Warnings appear in the terminal.

Diagnostic	Cause
Cannot statically evaluate argument	A cx() arg is a variable. Wrap in dynamic() or disable strict mode.
Unknown utility function	Unrecognized function inside cx().
Property conflict detected	Same CSS property set multiple times in one cx() call.

Fallback

If the compiler cannot statically extract a file, the original source is preserved and the runtime injector is automatically prepended as a fallback.