⚡Ultra-Light Compile-Time CSS-in-TS

   

Overview  •  Quick Start  •  Setup  •  Usage

👀 Overview

Voicss /vɔɪs/ is a lightweight compile-time 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