pieces-js (WIP)

Compile-time atomic CSS library.

Heavily inspired by stylex and linaria.

View Demo View Github

install

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

Usage

import { css } from '@pieces-js/tag'
import { FC } from "react";

const Foo: FC = () => {
  return (
    <div className={css`
      color: red;
      font-size: 24px;
      border: 1px black solid;
    `}>foo</div>
  );
}

export default Bar;

setup with bundler

with Vite

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { vitePlugin as piecesJs } from '@pieces-js/plugin'

export default defineConfig({
  plugins: [piecesJs(), react()],
})

with Webpack

const { webpackPlugin: piecesPlugin } = require('@pieces-js/plugin')


module.exports = {
  //...
  plugins: [
    piecesPlugin(),
  ],
  //...
}