Ultra-Light Zero-Runtime CSS-in-TS Toolkit for React

   

Overview  •  Quick Start  •  Setup  •  Usage

👀 Overview

Voicss /vɔɪs/ is a lightweight zero-runtime CSS-in-TS toolkit for React that extracts void `css ...` blocks from .ts(x) files into native CSS.

• 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...
• ESLint Plugin: CSS formatting in Voicss blocks

⚡ Quick Start

Scaffold a demo project for Next.js/Vite/tsdown:

bun create voicss

⚙️ Setup

bun a -d voicss

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

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

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

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

🕹️ Usage

Write void `css ...` blocks in your .ts(x) files — they are extracted into native CSS at build time:

export default function App() {
	return <h1 className='title'>Hello</h1>
}

void `css
.title {
	color: red;
	font-size: 2rem;
}`

• Voicss produces global CSS
• Voicss blocks can be placed anywhere in a module