⛋ @terrazzo/plugin-css-in-js

Reference CSS variables from plugin-css in JS. Compatible with Linaria, StyleX, Vanilla Extract, Styled Components, and most CSS-in-JS libraries.

Setup

Requires Node.js. With that installed, run:

npm i -D @terrazzo/cli @terrazzo/plugin-css @terrazzo/plugin-css-in-js

Add a terrazzo.config.ts to the root of your project with:

import { defineConfig } from "@terrazzo/cli";
import css from "@terrazzo/plugin-css";
import cssInJs from "@terrazzo/plugin-css-in-js";

export default defineConfig({
  outDir: "./tokens/",
  plugins: [
    css(),
    cssInJs({
      filename: "vars.js", // Note: `.d.ts` is generated too
    }),
  ],
});

Lastly, run:

npx tz build

And you’ll see a ./tokens/tokens.js file generated in your project.

Full Documentation