What is PikaCSS?

PikaCSS is an Atomic CSS-in-JS engine that allows you to write styles in CSS-in-JS way and output in Atomic CSS way. It combines the best of both worlds by merging Atomic CSS with CSS-in-JS approaches.

Key Features

Benefits from CSS-in-JS and Atomic CSS

• Writing in CSS-in-JS style

  • Easy to group and structure styles together
  • Just use standard CSS properties
  • No need to memorize utility class names

• Outputting in Atomic CSS style

  • No need to maintain a large CSS file
  • Small CSS bundle size

Zero Runtime

• PikaCSS is encapsulated as a vite plugin that transforming your CSS-in-JS code at build time
• No additional runtime overhead, no extra JavaScript code in your bundle
• ⚠️ Important Constraint: Because styles are processed at build time, all arguments passed to pika() functions must be statically analyzable. This means:
  • ❌ Cannot use runtime variables or function return values
  • ❌ Cannot use dynamic expressions that depend on props or state
  • ✅ Must use string literals, object literals, or static constants
  • ✅ For dynamic styling, use CSS custom properties (CSS variables)

Framework Agnostic

• Completely decoupled from any framework, allowing you to use it with any JavaScript framework or library

Developer Experience

• Built-in TypeScript support
• Rich auto-completion features
• You can even preview applied styles

Inspiration

The project was created to solve common pain points with existing solutions, combining the flexibility of CSS-in-JS syntax with the performance benefits of Atomic CSS, while maintaining excellent developer experience through TypeScript integration.

PikaCSS draws inspiration from several popular CSS solutions:

UnoCSS, WindiCSS, TailwindCSS, StylifyCSS, Fela.js