Next-Yak

5.6.0

import { styled, css } from "next-yak";

export const Title = styled.button<{ $primary: boolean }>`
  font-size: 1.5em;
  color: palevioletred;
  &:hover {
    color: red;
  }
  ${({ $primary }) => $primary && css`
    background: blue;
    color: white;
  `}
`;

Performance

Next-Yak is way faster than most other CSS-in-JS libraries. Learn more about its Zero-Runtime approach in the docs or take a look at the comparison of 13 popular CSS approaches

The performance was validated across many thousands of real-world users:

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

Get started and profit from these improvements without any significant increase in build times

Features

• Next.js Compatibility
  Works smoothly with both React Server and Client Components
• Build-Time CSS
  Reduces load time by handling CSS during the build phase, using Next.js built-in CSS features
• Zero Runtime
  Operates with minimal impact, simply changing CSS classes without modifying the CSSOM or DOM
• Standard CSS Syntax
  Write styles in familiar, easy-to-use CSS
• Integrates with Atomic CSS
  Easily combines with atomic CSS frameworks like Tailwind CSS for more design options
• No significant build-time overhead
  Doesn't increase the build time significantly, by only transforming statically as much as possible without the need to evaluate arbitrary JavaScript.

import styled from "styled-components";

const Title = styled.h1`
  font-size: 1.5em;
  color: palevioletred;
  &:hover {
    color: red;
  }
`;

const App = () => (
  <Title>
    Hello World
  </Title>
);

// JS output (auto-generated)

const Title = styled.h1.withConfig({
  componentId: "sc-1289dod-0"
})`
  font-size: 1.5em;
  color: palevioletred;
  &:hover {
    color: red;
  }
`;

const App = () => (
  <Title>
    Hello World
  </Title>
);

/* no static css */