https://github.com/pikacss/pikacss

The instant on-demand Atomic CSS-in-JS engine
https://github.com/pikacss/pikacss

atomic-css css css-in-js engine front-end typescript

Last synced: 4 days ago
JSON representation

The instant on-demand Atomic CSS-in-JS engine

• Host: GitHub
• URL: https://github.com/pikacss/pikacss
• Owner: pikacss
• License: mit
• Created: 2023-03-01T15:28:40.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2025-04-18T09:43:31.000Z (12 months ago)
• Last Synced: 2025-04-20T00:52:59.007Z (12 months ago)
• Topics: atomic-css, css, css-in-js, engine, front-end, typescript
• Language: TypeScript
• Homepage: https://styocss.github.io/styocss/
• Size: 1.23 MB
• Stars: 6
• Watchers: 3
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          


  ✨ PikaCSS ✨





  The instant on-demand Atomic CSS-in-JS engine





  

    

    

  





  PikaCSS = Atomic CSS + CSS-in-JS








  🚧 This project is still under development. 🚧


  The API is not stable yet.








  

    

  

  

    

  

  

    

  

  

    

  





  

    

  



---

## Introduction

### What is PikaCSS?

> PikaCSS is an Atomic CSS-in-JS engine that allow you to write style in CSS-in-JS way and output in Atomic CSS way.

>

> Inspired by [UnoCSS](https://github.com/unocss/unocss), [WindiCSS](https://github.com/windicss/windicss), [TailwindCSS](https://github.com/tailwindlabs/tailwindcss), [StylifyCSS](https://github.com/stylify) and [Fela.js](https://github.com/robinweser/fela)!

### Why PikaCSS is been created?

  Click to 👀 the reason

> I love the idea of Atomic CSS, there are many great Atomic CSS solutions out there, such as UnoCSS, WindiCSS, TailwindCSS, Stylify, etc.

>

> Unfortunately, I am poor to memorize the utility class names, so UnoCSS, WindiCSS or TailwindCSS is not for me.

>

> I am surprised by the zero learning curve concept of Stylify, but I don't like the idea of using a custom syntax to workaround the limitations of html class attribute.

>

> To solve the problems above, the CSS-in-JS way is the best way to write styles, but it is not the best way to output styles.

>

> So I created PikaCSS, it is a Atomic CSS-in-JS engine that allow you to write style in CSS-in-JS way and output in Atomic CSS way!

---

## Features

- 🥰 Framework Agnostic

  > It is decoupled from any framework, so you can use it with any framework!

- 🛠 Zero Runtime

  > It transforms CSS-in-JS to Atomic CSS at build time!

  >

  > ⚠️ **Important**: All arguments passed to `pika()` must be statically analyzable at build time. Runtime variables, function calls, or dynamic expressions are not supported.

- 📖 Zero Learning Curve

  > In the simplest case, you just need to know the css property names!

- 🤖 TypeScript Auto-Completion

  > It has built-in TypeScript support, so you can get auto-completion!

---

## License

[MIT](./LICENSE)