typewritingclass-compiler

0.3.2 verified Fri May 01 auth: no javascript

Rust-powered static CSS extraction compiler and Vite plugin for Typewriting Class v0.3.2. It statically analyzes TypeScript/JavaScript source files at build time, extracts utility class calls (tw, cx, when), generates deterministic CSS class names and declarations, and replaces call sites with those names for zero-runtime CSS output. Released weekly. Key differentiators: Rust-based performance, strict mode requiring explicit dynamic() wrapping, and Solid.js plugin ordering requirement.

Common errors

error Cannot find module 'virtual:twc.css' ↓

cause Virtual module not registered because twcPlugin() is missing from Vite config

fix

Add twcPlugin() to your Vite plugins array and restart the dev server.

error TypeError: twcPlugin is not a function ↓

cause Importing default export incorrectly (e.g., using named import)

fix

Use default import: import twcPlugin from 'typewritingclass-compiler'

error Error: Dynamic value must be wrapped with dynamic() ↓

cause Strict mode enabled and a non-static value passed to tw()

fix

Wrap the value: tw(dynamic(expr)) or disable strict mode with twcPlugin({ strict: false })

Warnings

gotcha Solid.js plugin must come AFTER twcPlugin in the plugins array ↓

fix Ensure plugins order: [twcPlugin(), solid()]

breaking Strict mode is enabled by default; dynamic values must be wrapped with dynamic() ↓

fix Wrap dynamic values: tw(dynamic(expr)) or set strict: false in options

gotcha virtual:twc.css must be imported in your entry file ↓

fix Add import 'virtual:twc.css' at the top of your main file

deprecated CommonJS require() is not supported; ESM-only ↓

fix Use import statements or set type: 'module' in package.json

Install

npm install typewritingclass-compiler

yarn add typewritingclass-compiler

pnpm add typewritingclass-compiler

Imports

twcPlugin

wrong

const twcPlugin = require('typewritingclass-compiler')

correct

import twcPlugin from 'typewritingclass-compiler'

ESM-only since v0.1; no named default export, use import default.

nativeTransform

wrong

import nativeTransform from 'typewritingclass-compiler'

correct

import { nativeTransform } from 'typewritingclass-compiler'

Named export, not default.

ThemeInput

wrong

const { ThemeInput } = require('typewritingclass-compiler')

correct

import type { ThemeInput } from 'typewritingclass-compiler'

TypeScript type only, cannot be required.

Quickstart

Sets up Vite plugin with Solid.js, imports virtual CSS module, and uses `tw` from typewritingclass.

// vite.config.ts
import { defineConfig } from 'vite'
import twcPlugin from 'typewritingclass-compiler'
import solid from 'vite-plugin-solid'

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

// src/main.tsx
import 'virtual:twc.css'
import { tw } from 'typewritingclass'

function App() {
  return <div className={tw('bg-blue-500 text-white p-4')}>Hello</div>
}