🔥 Features

• ⚡ True Zero Runtime: styles are extracted at compile-time, no JS in production
• 💎 Native CSS: write regular CSS with all modern features
• 📦 Modern Bundlers: built-in support for Next.js (Turbopack) and Vite (Rolldown)
• 🔥 Hot Reload: instant CSS updates during development
• 🌐 Global Types: eliminate the need to import css in every module
• 🧩 VS Code Extension: syntax highlighting, validation, autocompletion, tooltips, and more
• 🧹 ESLint Plugin: auto-fixable formatting rules for CSS inside templates

🚀 Quick Start

No need to read further, just try it out:

pnpm create rawstyle  # scaffold a demo project for your chosen platform

⚙️ Setup

1. Install the сore and the appropriate bundler plugin:

pnpm add -D rawstyle @rawstyle/next  # for Next.js
pnpm add -D rawstyle @rawstyle/vite  # for Vite

2. Configure the bundler to use the plugin:

Next.js (Turbopack)

// next.config.ts
import { rawstyleTurboRule } from '@rawstyle/next'
import type { NextConfig } from 'next'

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

The loader extracts CSS and injects it into the module as a base64-encoded CSS import.

Vite (Rolldown)

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

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

The plugin emits a virtual .css module containing extracted styles and imports it as a side effect.

🕹️ Usage

Import-based

import { css, cn } from 'rawstyle'

Global types

You can make the css and cn type declarations global to avoid importing them in every module:

// via tsconfig.json:
"compilerOptions": {
	"types": ["rawstyle/globals"]
}

// or add this to your globals.d.ts:
import 'rawstyle/globals'
// or
/// <reference types="rawstyle/globals" />

🧩 API

Rawstyle provides two core primitives: css and cn:

// src/module.tsx
export const Component = ({ theme }: { theme: string }) => (
	// `cn` - class names merging utility
	<div className={cn('class', theme === 'dark' && card)}>
		Hello, World!
	</div>
)
// `css` assigned to a variable - generates scoped CSS
const card = css`
	padding: 1rem;
	color: var(--primary);
	&:hover { box-shadow: 0 4px 12px black; }
`
// `css` as a standalone expression - generates global CSS
void css`
	:root { --primary: #303030; }
	body { margin: 0; background: #ebebeb; }
`

This code compiles to:

import '\0virtual.css'

export const Component = ({ theme }: { theme: string }) => (
	<div className={['class', theme === 'dark' && card].filter(Boolean).join(' ')}>
		Hello, World!
	</div>
)

const card = 'card_hash5'

As you can see, the css template literal is replaced with a hashed class name, cn is transformed into a conditional string joiner, and the CSS is extracted into a separate virtual .css file:

/* virtual.css */
:root { --primary: #303030; }
body { margin: 0; background: #ebebeb; }

.card_hash5 {
	padding: 1rem;
	color: var(--primary);
	&:hover { box-shadow: 0 4px 12px black; }
}

🧩 Ecosystem

Rawstyle provides a suite of tools to enhance your development experience:

• VS Code Extension 🡥
• ESLint Plugin 🡥