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

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

// 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>;
};

._b04b {
  font-size: 24px;
}

._0ad5 {
  color: red;
}

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 }}
    />
  );
}

{ return ( ); } ">

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>
  );
}

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

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

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

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