Stylesheet

tcmts.react.Stylesheet · #vmyjxx4b · term · runs anywhere

CSS for the page, through React's stylesheets: once however many components render it, kept when they're gone, ahead of the page's content, grouped by precedence ("default"). A stylesheet of the codebase (a .css file) is served by the app's build as a file of its own and linked to (__TCM_STYLESHEETS__, filled as its modules load): the page waits for it to load rather than show unstyled, and the browser keeps it. Other CSS is written into the page.

import { createElement } from "react";
import type { ReactNode } from "react";

export function Stylesheet({
  css,
  precedence = "default",
}: {
  css: string;
  precedence?: string;
}): ReactNode {
  const served = (
    globalThis as { __TCM_STYLESHEETS__?: Map<string, string> }
  ).__TCM_STYLESHEETS__?.get(css);
  if (served)
    return createElement("link", {
      rel: "stylesheet",
      href: `${(globalThis as { __TCM_BASE__?: string }).__TCM_BASE__ ?? ""}/_app/assets/${served}`,
      precedence,
    });
  // (React keeps one per `href`: named by its content, as two 32-bit FNV-1a hashes)
  let a = 0x811c9dc5;
  let b = 0x01000193;
  for (let i = 0; i < css.length; i++) {
    const c = css.charCodeAt(i);
    a = Math.imul(a ^ c, 0x01000193);
    b = Math.imul(b ^ c, 0x811c9dc5);
  }
  const key = `${(a >>> 0).toString(36)}${(b >>> 0).toString(36)}`;
  return createElement("style", { href: `tcm-${key}`, precedence }, css);
}

Stylesheet

used by