@terrazzo/plugin-css-in-js

Use CSS Vars in clientside JS. Compatible with Linaria, StyleX, Vanilla Extract, Styled Components, and most CSS-in-JS libraries.
194,379 479
Install
npm install @terrazzo/plugin-css-in-js
Latest Version:2.10.0
License:MIT
Last Updated:Oct 21, 2026
Links: GitHub  ·  npm
Maintainer: drewpowers

⛋ @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

Related Packages

component-css-extractor

Extract CSS from any scoped styles in a component framework. In the browser.

6,916 38
the-themex-project

Themex aims to prevent a blank screen in your IDE and serves as a solid foundati...

7,230 18
sanhaua

Sanhaua design system

3,820 1
superior-mq

css in js media query functions

3,920 1
@c2n/components

Every c2n web component in one package: one import per component, JSX and Vue te...

2,747 5

Version History

Version Released License
2.10.0 MIT
2.9.0 MIT
2.8.0 MIT
2.7.1 MIT
2.7.0 MIT
Pre-releases (11)
Version Released License
2.0.0-rc.0 MIT
2.0.0-beta.6 MIT
2.0.0-beta.5 MIT
2.0.0-beta.4 MIT
2.0.0-beta.3 MIT