google-balls-the-thrusting / theme-plugin.ts

import type { BunPlugin } from "bun";
import { cssTheme } from "./theme";

function generateThemeCSS(): string {
  const vars = Object.entries(cssTheme.colors)
    .map(([name, value]) => `  --color-${name}: ${value};`)
    .join("\n");
  return `@theme {\n${vars}\n}\n`;
}

const VIRTUAL_PATH = "virtual:theme.css";
const RESOLVED_PATH = "/__virtual__/theme.css";

// @ts-ignore - hooks into bun-plugin-tailwind's import resolver to intercept virtual:theme.css
const originalResolve = globalThis.__tw_resolve;
// @ts-ignore
globalThis.__tw_resolve = (id: string, base: string) => {
  if (id === VIRTUAL_PATH) return RESOLVED_PATH;
  return originalResolve?.(id, base);
};

// @ts-ignore - hooks into bun-plugin-tailwind's file reader to serve generated @theme CSS
const originalReadFile = globalThis.__tw_readFile;
// @ts-ignore
globalThis.__tw_readFile = async (path: string, encoding: string) => {
  if (path === RESOLVED_PATH) return generateThemeCSS();
  return originalReadFile?.(path, encoding);
};

const themePlugin: BunPlugin = {
  name: "tailwind-theme-generator",
  setup() {},
};

export default themePlugin;