ngo/scripts/gui-css.mjs

// Write src/styles/gui.css — the whole @hanzo/gui atomic sheet, as a real asset.
//
// gui builds its atomic CSS as components are constructed, so the sheet only
// exists once something has rendered. On a statically exported site nothing
// renders in the browser before first paint, so a page that leaves gui to inject
// its own styles ships correct markup with no rules attached to it — it compiles
// and it is unstyled. Injecting at render time is the obvious route and the
// wrong one anyway: the callback runs on every flush and returns the entire
// accumulated sheet each time, so a page ships N identical copies of it,
// uncacheable and re-sent on every navigation.
//
// Generated here it is an ordinary stylesheet — Next fingerprints it, the
// browser caches it once, and it is in the HTML before anything paints.
//
// First link of `build`, so it cannot drift from src/lib/gui.ts. Named there
// rather than as `prebuild` because pnpm does not run pre/post scripts, and a
// generator that silently does not run leaves the last good sheet in place.
import { build } from 'esbuild';
import { writeFileSync, rmSync } from 'node:fs';

const root = new URL('..', import.meta.url);
const bundle = new URL('.guicfg.gen.mjs', root);

// src/lib/gui.ts is TypeScript and pulls in the @hanzogui graph, so it has to be
// bundled before Node can import it. react-native aliases to react-native-web
// for the same reason the Next build does it: the bare specifier resolves to the
// native implementation, which has no business running here.
await build({
  absWorkingDir: root.pathname,
  entryPoints: ['src/lib/gui.ts'],
  bundle: true,
  format: 'esm',
  platform: 'node',
  external: ['react', 'react-dom', 'react-native'],
  alias: { 'react-native': 'react-native-web' },
  outfile: bundle.pathname,
  logLevel: 'error',
});

const { css } = await import(bundle);
const sheet = `/* Generated by scripts/gui-css.mjs from src/lib/gui.ts — do not edit. */\n${css()}`;
writeFileSync(new URL('src/styles/gui.css', root), sheet);
rmSync(bundle);
console.log(`src/styles/gui.css — ${sheet.length.toLocaleString()} bytes`);