FAQ

Markdown

Answers to common questions about yak: production use, supported frameworks and bundlers, TypeScript, other CSS-in-JS libraries and troubleshooting.

General questions

Is yak production ready?

Yes, yak is production ready and used in production at scale.

Digitec Galaxus, Switzerland's largest e-commerce platform, sponsors yak and uses it in production with thousands of styled components across more than 100 engineers. They saw significant improvements in Core Web Vitals performance: over 20% faster LCP, 15% reduced SSR latency, and 10% faster INP, especially on mobile devices. You can read more about the journey in the blog post.

What frameworks and bundlers does yak support?

yak supports React and Solid, and the same SWC plugin runs in every bundler below:

Next.js 16.4+ with both webpack and Turbopack, for the App Router and the Pages Router
Vite 7+, including Vite 8 with OXC/Rolldown. Vite-based frameworks like React Router and TanStack Start (also with React Server Components) work too
Rsbuild 2+ through @yak/react/rsbuild, which also covers Rsbuild-based TanStack Start
Solid 2 with Vite through the @yak/solid package
Storybook 10+ with both the Vite and the webpack builder through the @yak/storybook addon

The Examples page has a runnable project for most of these setups. Planned frameworks are on the roadmap. If you need yak in a framework that isn't on this list, ask for it in our GitHub issue tracker and we'll give it a thought.

Can I mix/combine yak with other CSS-in-JS libraries?

Yes, you can use yak with other CSS-in-JS libraries.

You can use it with styled-components, emotion, tailwind or any other library that adds css classes to your components.

my-component.tsx

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

const Button = styled.button`
  background: #bf4f74;
  /* Target classes from other libraries */
  & .my-class-from-another-library {
    color: white;
  }
  /* use tailwind classes */
  ${atoms("mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8")}
`;

Can I reference a component in another component?

Yes, you can reference it in the tagged template literal the same way you would with styled-components.

my-component.tsx

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

const Button = styled.button`
  background: #bf4f74;
`;

const Nav = styled.nav`
  background: #bf4f74;
  ${Button} {
    color: white;
  }
`;

Does yak turn static values into CSS variables?

No. Constants from the same file, imported constants and values from .yak files are inlined into the CSS at build time. Only values that are known at runtime become CSS variables, and you write them as functions, like ${() => getValue()} or ${(props) => props.$size}.

FAQ