PikaCSS

Appearance

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

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