A lightweight compile-time CSS-in-TS library for React

     

Overview  •  Quick Start  •  Usage

👀 Overview

Voicss (/vɔɪs/) is a compile-time CSS-in-TS library that brings a fully native CSS experience directly into .ts(x) files.

Its core is just one line of code, and styling is done via the void `css ...` block syntax.

🔥 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

1. Install core and a bundler plugin:

bun add -D voicss @voicss/next  # for Next.js
bun add -D voicss @voicss/vite  # for Vite

2. Configure the bundler to use the plugin:

Next.js

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

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

Vite

// vite.config.ts
import type { UserConfig } from 'vite'
import react from '@vitejs/plugin-react'
import voicss from '@voicss/vite'

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

3. Start styling

Write standard CSS inside your .ts(x) files using the void `css ...` syntax. The bundler extracts these blocks into real CSS at build time — resulting in zero runtime overhead.