obligat/pieces-js

A library that transforms your regular CSS into Atomic CSS in compile time.

pieces-js(WIP)

A library that transforms your regular CSS into Atomic CSS in compile time. Heavily inspired by stylex and linaria.

Online Example with Vite

Features

• Transform your regular CSS into Atomic CSS by compiler
• Easy to use with familiar CSS syntax
• Zero runtime for a CSS-in-JS library
• Compiling on demand in development
• No xxx.config.js 😉

Documentation

• Setup
  • with Next.js
  • with Vite
  • with Webpack
• Usage
• SSR

Installation

npm install @pieces-js/tag
npm install -D @pieces-js/plugin
// or
yarn add @pieces-js/tag
yarn add -D @pieces-js/plugin

Overview

import { css } from '@pieces-js/tag'

const className = css`
  color: red;
  font-size: 24px;
  &:hover {
    color: blue;
  }
`

const className2 = css`
  color: red;
  font-size: 48px;
`

// --- will compile to ---

const className = 'c1 c2 c3'

const className2 = 'c1 c4'

with gennerated style

.c1 {
  color: red;
}
.c2 {
  font-size: 24px;
}
.c3:hover {
  color: blue;
}
.c4 {
  font-size: 48px;
}