testStylesheetLinksWhatTheBuildServes

tcmts.react.test.testStylesheetLinksWhatTheBuildServes · #sfgsqx7n · term

<Stylesheet> links to a stylesheet the app's build serves (under the app's base), and writes other CSS into the page, named by its content so React keeps one of each.

import { Stylesheet } from "#codebase/tcmts/react";
import { withPage } from "#codebase/tcmts/react/test";
import assert from "node:assert/strict";
import type { ReactElement } from "react";

export const testStylesheetLinksWhatTheBuildServes = () =>
  withPage(
    { __TCM_BASE__: "/apps/x", __TCM_STYLESHEETS__: new Map([[".a {}", "styles-abcdefgh.css"]]) },
    () => {
      type El = ReactElement<{ rel?: string; href: string; precedence: string; children?: string }>;
      const linked = Stylesheet({ css: ".a {}" }) as El;
      assert.equal(linked.type, "link");
      assert.deepEqual(linked.props, {
        rel: "stylesheet",
        href: "/apps/x/_app/assets/styles-abcdefgh.css",
        precedence: "default",
      });
      const inline = Stylesheet({ css: ".b {}", precedence: "theme" }) as El;
      assert.equal(inline.type, "style");
      assert.equal(inline.props.precedence, "theme");
      assert.equal(inline.props.children, ".b {}");
      assert.match(inline.props.href, /^tcm-[a-z0-9]+$/);
      // the same CSS, the same href; other CSS, another
      assert.equal((Stylesheet({ css: ".b {}" }) as El).props.href, inline.props.href);
      assert.notEqual((Stylesheet({ css: ".c {}" }) as El).props.href, inline.props.href);
    },
  )

testStylesheetLinksWhatTheBuildServes

uses