galaxuslabs/yak

Vanilla CSS syntax in TypeScript, with zero runtime. yak is CSS-in-JS for React and Solid with the styled-components API: a Rust SWC plugin compiles your styles to plain CSS files at build time, so it works with React Server Components and ships no styling runtime to the browser.

Documentation · Playground · Blog

Formerly next-yak. Same library, same team. From version 10 the React package is @yak/react, and versions before 10 stay on npm as next-yak. The migration guide covers the switch.

yak runs in production at Digitec Galaxus, the largest e-commerce platform in Switzerland, across thousands of styled components, and measurably improved its Core Web Vitals there.

Package	Version	What it is
@yak/react		yak for React, with plugins for Next.js, Vite and Rsbuild
@yak/solid		yak for Solid 2, with a Vite plugin (experimental)
@yak/swc		the Rust SWC plugin that both runtimes use to extract the CSS
@yak/eslint-plugin		ESLint and Oxlint rules for yak
@yak/storybook		Storybook addon for the Vite and webpack builders

• Build-time CSS: styles become plain CSS files at compile time, and the bundler's own CSS pipeline handles them
• React Server Components: works in Server and Client Components alike
• Next.js, Vite and Rsbuild: Next.js with webpack or Turbopack, Vite 7+ (react-router, TanStack Start, ...), Rsbuild 2+ and Storybook
• React and Solid: the same API for both, shaped to how each framework works
• Cross-file imports: import constants, mixins and selectors from .yak files and other modules
• Standard CSS: nesting, keyframes and media queries as you write them in a stylesheet
• Atomic CSS: mixes with utility classes from Tailwind and similar frameworks
• TypeScript first: typed props, theme and cross-file selectors
• Small runtime: it only swaps class names and CSS variables based on props
• Few dependencies: , all of them build-time tools

Install the package and wrap your Next.js config. It works with webpack and Turbopack, no further configuration needed.

npm install @yak/react

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

const nextConfig = {
  // your Next.js config
};

export default withYak(nextConfig);

Then start styling:

import { styled } from "@yak/react";

const StyledDiv = styled.div`
  color: #333;
  padding: 16px;
  background-color: #f0f0f0;
`;

export default function HomePage() {
  return <StyledDiv>Hello, yak!</StyledDiv>;
}

Try it in the StackBlitz demo or fork the StackBlitz starter.

Any Vite-based framework works with Vite 7+, including Vite 8 with Rolldown: plain Vite, react-router, TanStack Start and more. Add viteYak() before the React plugin.

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

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

See the Vite guide.

Rsbuild 2+ works through pluginYak, next to pluginReact() and Rsbuild's built-in SWC.

// rsbuild.config.ts
import { defineConfig } from "@rsbuild/core";
import { pluginReact } from "@rsbuild/plugin-react";
import { pluginYak } from "@yak/react/rsbuild";

export default defineConfig({
  plugins: [pluginReact(), pluginYak()],
});

See the Rsbuild guide.

@yak/solid brings the same API to Solid 2. It is experimental while Solid 2 is in release candidate.

npm install @yak/solid

// vite.config.ts
import { defineConfig } from "vite";
import solid from "@solidjs/vite-plugin";
import { yak } from "@yak/solid/vite";

export default defineConfig({
  plugins: [yak(), solid()],
});

See the Solid guide.

The @yak/storybook addon sets up yak in Storybook 10+ with the Vite and the webpack builder.

npm install --save-dev @yak/storybook

See the Storybook guide.

@yak/eslint-plugin flags CSS that yak cannot compile well and helps with a migration from styled-components.

npm install --save-dev @yak/eslint-plugin

See the ESLint plugin guide.

Versions before 10 are published as next-yak:

@yak/solid needs solid-js and @solidjs/web 2.0.0-rc.15 or newer.

Dynamic Styles will only toggle the css class during runtime:

import { styled, css } from "@yak/react";

const ToggleButton = styled.button`
  color: white;
  padding: 10px 20px;
  ${(props) =>
    props.$active
      ? css`
          background-color: green;
        `
      : css`
          background-color: dimgray;
        `};
`;

Dynamic Properties use custom properties (aka css variables) under the hood to extract the CSS at build time but modify properties at runtime:

import { styled } from "@yak/react";

const ProgressBar = styled.div`
  width: ${(props) => `${props.$percent}%`};
  height: 20px;
  background-color: #3498db;
  transition: width 0.3s ease-in-out;
`;

const ProgressBarContainer = styled.div`
  border: 1px solid #ccc;
`;

const ExampleComponent = () => {
  const progress = 75; // You can dynamically set this value

  return (
    <ProgressBarContainer>
      <ProgressBar $percent={progress} />
    </ProgressBarContainer>
  );
};

In yak, you can target other components directly using CSS selectors as long as they are in the same file:

import { styled, keyframes } from "@yak/react";

const flip = keyframes`
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
`;

const Glow = styled.div`
  /* Add your Glow component styles here */
`;

const Text = styled.span`
  display: inline-block;
  ${Glow}:hover & {
    animation: 1.5s ${flip} ease-out;
  }
`;

const ExampleComponent = () => {
  return (
    <Glow>
      <Text>This text will flip on hover.</Text>
    </Glow>
  );
};

yak supports CSS nesting out of the box.

yak was validated across many thousands of real-world users at Digitec Galaxus:

• >20% faster navigational LCP
• >15% reduced SSR latency
• >10% faster INP

Read more in the Digitec Galaxus blog post.

yak uses a Rust-based SWC plugin to extract CSS at build time. The extracted CSS is processed through the bundler's native CSS pipeline (PostCSS for webpack and Vite, Lightning CSS for Turbopack and Rsbuild), ensuring consistency between your CSS files and CSS-in-JS.

yak ships with atomic CSS support, so you can use tailwind out of the box without additional configuration.

import { styled, atoms } from "@yak/react";

// Mixing tailwind with custom styles
const Icon = styled.p`
  ${atoms("font-bold")}
  @supports (initial-letter: 2) {
    initial-letter: 2;
  }
`;

// Apply tailwind classes conditionally
const Button = styled.button`
  ${({ $primary }) =>
    $primary
      ? atoms("bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded")
      : atoms(
          "bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded",
        )}
`;

The downside of dynamic properties is that they require inline style attributes. While this is not a problem for most cases, we can't use them for media queries.

yak allows you to define build time constants which can be used in your styles:

import { styled } from "@yak/react";
import { breakpoints, spacings } from "./constants.yak";

const Container = styled.div`
  padding: ${spacings.md};
  ${breakpoints.md} {
    padding: ${spacings.lg};
  }
`;

While trying to get yak to work properly we stumbled across several bugs. Thanks for merging our PRs and fixes in Next.js, webpack, PostCSS, and more ❤️

Massive kudos to:

• @sokra: For guiding us through the webpack module and loader APIs
• @kdy1: For his support while rewriting our Babel plugin as a blazing fast SWC Rust WASM plugin
• @samcx: For his great help to merge features into Next.js

Special thanks to the contributors and the inspiring projects that influenced yak:

• Styled-Components: For pioneering the styled syntax and redefining styling in the React ecosystem
• Linaria: For its innovative approach to zero-runtime CSS in JS
• Emotion: For pushing the boundaries of CSS-in-JS
• Vanilla Extract: For its focus on type-safe, zero-runtime CSS
• Tailwind CSS: For its exceptional atomic CSS approach

yak is licensed under the MIT License.

Contributions are welcome!

The contributing guide helps you get started with setting up the development environment and explains the development workflow

Feel free to reach out with any questions, issues, or suggestions!