⛋ @terrazzo/plugin-vanilla-extract

Generate Vanilla Extract CSS themes from DTCG tokens.

Setup

Requires Node.js. With that installed, run:

npm i -D @terrazzo/cli @terrazzo/plugin-css @terrazzo/plugin-vanilla-extract

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

import { defineConfig } from "@terrazzo/cli";
import css from "@terrazzo/plugin-css";
import vanillaExtract from "@terrazzo/plugin-vanilla-extract";

export default defineConfig({
  plugins: [
    css({
      // Optional: control the final CSS variable names
      variableName: (token) => token.id.replace(/\./g, "-"),
      // Optional: pass `skipBuild: true` to not generate a .css file if only using Vanilla Extract.
      skipBuild: false,
    }),

    vanillaExtract({
      filename: "themes.css.ts",

      // generate createTheme()
      themes: [
        { name: "light", input: { theme: "light" } },
        { name: "dark", input: { theme: "dark" } },
      ],

      // generate createGlobalTheme()
      globalThemes: [
        {
          selector: "@media (prefers-color-scheme: light)",
          input: { theme: "light" },
        },
        {
          selector: "@media (prefers-color-scheme: dark)",
          input: { theme: "dark" },
        },
      ],
    }),
  ],
});

This plugin extends plugin-css and always generates createGlobalThemeContract() to match your generated CSS global variable names 1:1. But from there, you can use either locally-scoped (createThem()) or globally-scoped (createGlobalTheme()) themes.

View documentation