next-yak

next-yak is a build-time CSS-in-JS library powered by a Rust SWC plugin. Write styled-components syntax, get zero-runtime CSS extraction and full React Server Components compatibility.

Works with Next.js (Webpack & Turbopack), Vite (7+, including Vite 8 with OXC), and Storybook. Any Vite-based framework works out of the box, including react-router, TanStack Start, and more.

Production-proven: next-yak is sponsored and used in production by Digitec Galaxus, the largest e-commerce platform in Switzerland, across thousands of styled components, delivering measurable improvements in Core Web Vitals.

Features

• Multi-Framework: First-class support for Next.js (Webpack & Turbopack), Vite 7+ (react-router, TanStack Start, ...), and Storybook
• Build-Time CSS: Extracts CSS at compile time with zero runtime overhead
• React Server Components: Works seamlessly with both Server and Client Components
• Cross-File Imports: Import constants, mixins, and selectors from .yak files and other modules, works across all bundlers
• Standard CSS Syntax: Write familiar CSS with full nesting, keyframes, and media query support
• Integrates with Atomic CSS: Combines with utility-first frameworks like Tailwind CSS
• TypeScript First: Fully typed props, theme context, and cross-file selectors
• Lightweight Runtime: Minimal footprint, just swaps CSS class names based on props
• Minimal Dependencies: Only 8 dependencies in total (including transitive ones)

Documentation

Full documentation, guides, and a live playground are available at yak.js.org.

• Getting Started (Next.js)
• Vite Setup
• Storybook Setup
• Migration from styled-components
• Features
• Playground

Compatibility

| next-yak | Next.js | Vite | react | swc_core | | -------- | --------- | --------------- | ----------- | -------- | | 9.x | >= 16.1.0 | >= 7.0.0 (9.1+) | 19.x | 56.0.0 | | 8.x | >= 16.0.0 | - | 19.x | 45.0.1 | | 7.x | >= 15.4.4 | - | 19.x | 38.0.1 | | 6.x | >= 15.4.1 | - | 19.x | 27.0.6 | | 5.x | >= 15.2.1 | - | 19.x | 16.0.0 | | 4.x | >= 15.0.4 | - | 19.x | 5.0.1 | | 3.x | 15.x | - | 18.x / 19.x | 3.0.2 | | 2.x | 14.x | - | 18.x / 19.x | 0.279.0 |

Installation

npm install next-yak

Quick Start

Next.js

// next.config.ts
import { withYak } from "next-yak/withYak";

export default withYak({
  // your next.js config
});

Vite

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import { viteYak } from "next-yak/vite";

export default defineConfig({
  plugins: [viteYak(), react()],
});

Usage

import { styled } from "next-yak";

const Button = styled.button`
  background: #bf4f74;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 4px;
`;

License

next-yak is licensed under the MIT License.

Contributing

Contributions are welcome! The contributing guide helps you get started.