A lightweight zero-runtime CSS-in-TS toolkit

     

Overview  •  Quick Start  •  Usage

👀 Overview

Voicss is a bundler plugin that extracts void `css ...` blocks from .ts(x) files into native CSS.

🔥 Features

• ⚡ True zero-runtime: styles are extracted at build time, no JS in production
• 💎 Native CSS: write standard CSS with all modern features
• 📦 Modern bundlers: first-class support for Next.js and Vite
• 🔥 HMR: instant style updates during development
• 🧩 VS Code extension: syntax highlighting, autocomplete, validation, and more
• 🧹 ESLint plugin: CSS linting in template literals

🏁 Quick Start

Scaffold a demo project for your platform (Next.js/Vite/tsdown):

bun create voicss

🕹️ Usage

Vite

bun add -D @voicss/vite

// vite.config.ts
import type { UserConfig } from 'vite'
import voicss from '@voicss/vite'

export default {
	plugins: [voicss()],
} satisfies UserConfig

Next.js

bun add -D @voicss/next

// next.config.ts
import type { NextConfig } from 'next'
import { voicssTurboRule } from '@voicss/next'

export default {
	turbopack: { rules: { ...voicssTurboRule } },
} satisfies NextConfig