next-yak
Version:
next-yak is a CSS-in-JS solution tailored for Next.js that seamlessly combines the expressive power of styled-components syntax with efficient build-time extraction of CSS using Next.js's built-in CSS configuration
102 lines (73 loc) • 3.99 kB
Markdown
# next-yak
[](https://www.npmjs.com/package/next-yak)
[](https://github.com/DigitecGalaxus/next-yak/blob/main/LICENSE)
**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](https://www.galaxus.ch), 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](https://yak.js.org/)**.
- [Getting Started (Next.js)](https://yak.js.org/docs/getting-started)
- [Vite Setup](https://yak.js.org/docs/vite)
- [Storybook Setup](https://yak.js.org/docs/storybook)
- [Migration from styled-components](https://yak.js.org/docs/migration-from-styled-components)
- [Features](https://yak.js.org/docs/features)
- [Playground](https://yak.js.org/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
```bash
npm install next-yak
```
## Quick Start
### Next.js
```js
// next.config.ts
import { withYak } from "next-yak/withYak";
export default withYak({
// your next.js config
});
```
### Vite
```js
// 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
```jsx
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](https://github.com/DigitecGalaxus/next-yak/blob/main/LICENSE).
## Contributing
Contributions are welcome! The [contributing guide](https://github.com/DigitecGalaxus/next-yak/blob/main/CONTRIBUTION.md) helps you get started.