PikaCSSInstant on-demand Atomic CSS-in-JS

Write styles with familiar CSS-in-JS syntax, get full TypeScript autocomplete, and compile to optimized atomic CSS at build time — zero runtime cost.

⚡

Zero Runtime

All styling work happens at build time. Your production bundle ships plain class name strings and a static CSS file — no runtime overhead.

🧩

Each CSS property-value pair becomes a unique, reusable atomic class. Shared styles are deduplicated automatically, keeping CSS size minimal.

⚙️

Start with sensible defaults. PikaCSS auto-discovers or creates a config file when needed — no boilerplate required.

🧠

Style arguments are evaluated at build time via `new Function(...)`, so they must be statically analyzable. No custom syntax to learn.

🤖

Full typed style authoring with generated autocomplete support. CSS properties, values, selectors, and plugin-defined tokens are all type-safe.

🔌

One engine across Vite, Rollup, Webpack, esbuild, Rspack, Rolldown, and Nuxt via `@pikacss/unplugin-pikacss`.

🎨

Supports pseudo-classes, pseudo-elements, media queries, and custom selectors inline within your style definitions.

🧰

5 built-in plugins (variables, keyframes, selectors, shortcuts, important) plus external plugins for icons, CSS resets, and typography.