{"id":26559,"library":"typewritingclass-compiler","title":"typewritingclass-compiler","description":"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.","status":"active","version":"0.3.2","language":"javascript","source_language":"en","source_url":"https://github.com/corysimmons/typewritingclass","tags":["javascript","typewritingclass","compiler","vite-plugin","css","static-extraction","typescript"],"install":[{"cmd":"npm install typewritingclass-compiler","lang":"bash","label":"npm"},{"cmd":"yarn add typewritingclass-compiler","lang":"bash","label":"yarn"},{"cmd":"pnpm add typewritingclass-compiler","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency for Vite plugin functionality","package":"vite","optional":false}],"imports":[{"note":"ESM-only since v0.1; no named default export, use import default.","wrong":"const twcPlugin = require('typewritingclass-compiler')","symbol":"twcPlugin","correct":"import twcPlugin from 'typewritingclass-compiler'"},{"note":"Named export, not default.","wrong":"import nativeTransform from 'typewritingclass-compiler'","symbol":"nativeTransform","correct":"import { nativeTransform } from 'typewritingclass-compiler'"},{"note":"TypeScript type only, cannot be required.","wrong":"const { ThemeInput } = require('typewritingclass-compiler')","symbol":"ThemeInput","correct":"import type { ThemeInput } from 'typewritingclass-compiler'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite'\nimport twcPlugin from 'typewritingclass-compiler'\nimport solid from 'vite-plugin-solid'\n\nexport default defineConfig({\n  plugins: [twcPlugin(), solid()],\n})\n\n// src/main.tsx\nimport 'virtual:twc.css'\nimport { tw } from 'typewritingclass'\n\nfunction App() {\n  return <div className={tw('bg-blue-500 text-white p-4')}>Hello</div>\n}","lang":"typescript","description":"Sets up Vite plugin with Solid.js, imports virtual CSS module, and uses `tw` from typewritingclass."},"warnings":[{"fix":"Ensure plugins order: [twcPlugin(), solid()]","message":"Solid.js plugin must come AFTER twcPlugin in the plugins array","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Wrap dynamic values: tw(dynamic(expr)) or set strict: false in options","message":"Strict mode is enabled by default; dynamic values must be wrapped with dynamic()","severity":"breaking","affected_versions":">=0.2.0"},{"fix":"Add import 'virtual:twc.css' at the top of your main file","message":"virtual:twc.css must be imported in your entry file","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Use import statements or set type: 'module' in package.json","message":"CommonJS require() is not supported; ESM-only","severity":"deprecated","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Add twcPlugin() to your Vite plugins array and restart the dev server.","cause":"Virtual module not registered because twcPlugin() is missing from Vite config","error":"Cannot find module 'virtual:twc.css'"},{"fix":"Use default import: import twcPlugin from 'typewritingclass-compiler'","cause":"Importing default export incorrectly (e.g., using named import)","error":"TypeError: twcPlugin is not a function"},{"fix":"Wrap the value: tw(dynamic(expr)) or disable strict mode with twcPlugin({ strict: false })","cause":"Strict mode enabled and a non-static value passed to tw()","error":"Error: Dynamic value must be wrapped with dynamic()"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}