Compile-time atomic CSS library.

Last update: Mar 9, 2022

pieces-js

Compile-time atomic CSS library.

Heavily inspired by stylex and linaria.

Online Example with Vite

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

Basic

{ return (
Foo
); }; // Bar.tsx import { css } from "@pieces-js/tag"; const Bar = () => { return (
Bar
); }; // will compile to // Foo.tsx const Foo = () => { return
Foo
; }; // Bar.tsx import { css } from "@pieces-js/tag"; const Bar = () => { return
Bar
; }; ">
// Foo.tsx
import { css } from "@pieces-js/tag";

const Foo = () => {
  return (
    <div
      className={css`
        color: red;
      `}
    >
      Foo
    </div>
  );
};

// Bar.tsx
import { css } from "@pieces-js/tag";

const Bar = () => {
  return (
    <div
      className={css`
        color: red;
        font-size: 24px;
      `}
    >
      Bar
    </div>
  );
};

// will compile to

// Foo.tsx

const Foo = () => {
  return <div className={"_0ad5 _b04b"}>Foo</div>;
};

// Bar.tsx
import { css } from "@pieces-js/tag";

const Bar = () => {
  return <div className={"_0ad5"}>Bar</div>;
};

with gennerated style

._b04b {
  font-size: 24px;
}

._0ad5 {
  color: red;
}

Dynamic styles

); } ">
import React from "react";
import { css } from "@pieces-js/tag";

export function Box({ size }) {
  return (
    <div
      className={css`
        height: var(--box-size);
        width: var(--box-size);
      `}
      style={{ "--box-size": size }}
    />
  );
}

FYI

& selector

{ return (
foo
); } ">
import { css } from "@pieces-js/tag";

const Foo = () => {
  return (
    <div className={css`
      &:hover {
        animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
        transform: translate3d(0, 0, 0);
      }
    `}>foo</div>
  );
}

Setup with bundler

with Next.js

Follow the setup with Webpack. The official pieces-js plugin is in WIP.

with Vite

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import piecesJs from "@pieces-js/plugin";

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

with Webpack

const piecesJs = require("@pieces-js/plugin");

module.exports = {
  //...
  plugins: [piecesJs.webpack()],
  //...
};

SSR

Webpack

As pieces-js just compile and extract your code into static css file, you could choose isomorphic-style-loader or mini-css-extract-plugin to implement SSR.

FYI

Next.js

If you are using pieces-js with Next.js, you don't need do anything.

GitHub

https://github.com/iheyunfei/pieces-js
You might also like...

Create tailwind css react components like styled components with classes name on multiple lines

Create Tailwind CSS React components like styled components with class names on multiple lines and conditional class rendering

May 11, 2022

CSS-in-JS solution with style-to-state bindings, SSR, and a next-level developer experience.

A set of modules is for CSS-in-JS solution that includes state-to-style bindings, SRR and next-level developer experience. It includes a framework-agnostic implementation

Mar 23, 2022

Whirlwind is a utility-first styling framework specifically designed for React Native. It is heavily inspired by Tachyons and Tailwind CSS and uses low-level building blocks for rapidly building custom designs.

React Native Whirlwind ๐ŸŒช๏ธ A utility-first CSS framework designed for React Native. Whirlwind is a utility-first CSS framework specifically designed f

May 6, 2022

Style your React components with simplicity using css inside your comments.

Style your React components with simplicity using css inside your comments.

Oct 12, 2021

Encapsulated styling for your javascript components with all the power of javascript and CSS combined.

Stilr Encapsulated styling for your javascript components with all the power of javascript and CSS combined. Unique class names (Content Hash Based) U

May 7, 2021

Parse CSS and add vendor prefixes to rules by Can I Use

Autoprefixer PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use. It is recommended by Google and used in Twi

May 18, 2022

Incredible fast template toolkit for making new or re-styling existing components with Tailwind CSS.

Stail Incredible fast template toolkit for making new or re-styling existing components with Tailwind CSS. Why it's needed? First of all, I'm tired fr

Jan 25, 2022

This repository allows you to create a React template component folder. It optionally includes scss and css files

Generate-React-Components - grc grc let you generate react components in typescript in a folder you specify and it will include .tsx, .scss, .css file

Nov 26, 2021

Vite plugin that emulates Scoped CSS for React components

vite-react-css Vite plugin that emulates Scoped CSS for React components (using generated class names) Compatible with SSR Automatic code-splitting Ho

Feb 7, 2022
CSS Maid ๐Ÿงน A tool made for React.js to clean up CSS default styling! Give your CSS a nice reset and style with less hassle!
CSS Maid ๐Ÿงน A tool made for React.js to clean up CSS default styling! Give your CSS a nice reset and style with less hassle!

CSS Maid ?? What is it? CSS Maid is a tool for React.js that helps clean up & reset default css! It resets default padding, remove text-decoration on

Sep 1, 2021
Court.css - A naive CSS Utility framework based on JSX and css custom properties

court.css ?? A (work in progress) JSX-based, CSS utility framework with a predic

Mar 14, 2022
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation

Aphrodite Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation. Support for colocating y

May 10, 2022
๐Ÿ‘ฉโ€๐ŸŽค CSS-in-JS library designed for high performance style composition
๐Ÿ‘ฉโ€๐ŸŽค CSS-in-JS library designed for high performance style composition

emotion The Next Generation of CSS-in-JS Emotion 11 has been released ?? See the blog post Emotion is a performant and flexible CSS-in-JS library. Bui

May 14, 2022
Material-tailwind - An easy-to-use components library for Tailwind CSS and Material Design
Material-tailwind - An easy-to-use components library for Tailwind CSS and Material Design

Material-tailwind - An easy-to-use components library for Tailwind CSS and Material Design

May 10, 2022
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress ๐Ÿ’…
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress ๐Ÿ’…

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress ?? Looking for v5? The master branch is un

May 17, 2022
JSS is an authoring tool for CSS which uses JavaScript as a host language.

JSS A lib for generating Style Sheets with JavaScript. For documentation see our docs. Backers Support us with a monthly donation and help us continue

May 13, 2022
Seamless mapping of class names to CSS modules inside of React components.
Seamless mapping of class names to CSS modules inside of React components.

React CSS Modules React CSS Modules implement automatic mapping of CSS modules. Every CSS class is assigned a local-scoped identifier with a global un

May 7, 2022
CSS media queries in react - for responsive design, and more.

react-responsive Information Package react-responsive Description Media queries in react for responsive design Browser Version >= IE6* Demo The best s

May 12, 2022
๐Ÿ  Airbnb website using React, Next.js and Tailwind CSS
๐Ÿ  Airbnb website using React, Next.js and Tailwind CSS

This example shows how to use Tailwind CSS (v2.2) with Next.js. It follows the steps outlined in the official Tailwind docs.

May 2, 2022