@tribe-nest/forge 3.50.0 → 3.53.0

package/src/ui/styled/_tests/utilityPrefix.spec.ts

@@ -0,0 +1,156 @@
+import { describe, expect, it } from "vitest";
+import { readdirSync, readFileSync, statSync } from "node:fs";
+import { join } from "node:path";
+
+/**
+ * Every Tailwind utility in a Forge component carries the `fg:` prefix.
+ *
+ * THE ONE RULE, and the only one. Forge builds its stylesheet with
+ * `prefix(fg)` (see tailwind.input.css), so `fg:flex` compiles to `.fg\:flex`
+ * and a bare `flex` compiles to NOTHING. An unprefixed class is therefore not a
+ * style that loses an argument, it is a style that does not exist: the element
+ * renders unstyled and no error is raised anywhere.
+ *
+ * WHY THE PREFIX EXISTS. Tailwind utilities are global and unprefixed by
+ * construction, so Forge's `.hidden` and a host's `.hidden` are the same rule.
+ * Shipping Forge's copies bare meant one of the two had to lose everywhere, and
+ * both orderings shipped a bug: Forge above the host collapsed the admin
+ * sidebar (027b8aa9d), Forge below the host pinned a coaching booking page's
+ * "Select availability" card over its cover image on every published site, and
+ * made `hidden sm:block` blocks permanently invisible. A cascade layer picks
+ * one global winner for a name that means different things on different
+ * elements, so it could never settle it. The prefix removes the collision.
+ *
+ * WHAT IS NOT A UTILITY, and must stay bare:
+ *  - the hand-written classes in Forge's own stylesheets (`cf-rise`,
+ *    `forge-rich`, `forge-spin`, …), which are real CSS rules;
+ *  - `group` and `peer`, which are Tailwind MARKERS targeted by `group-*` /
+ *    `peer-*` and never emitted as rules of their own;
+ *  - anything arriving through the `className` PROP, which belongs to the host.
+ */
+
+/** Hand-written CSS in Forge's own stylesheets, plus Tailwind's markers. */
+const NOT_UTILITIES = new Set([
+  "cf-card",
+  "cf-halo",
+  "cf-pop",
+  "cf-ring",
+  "cf-rise",
+  "cf-tick",
+  "forge-community-composer-editable",
+  "forge-pa-compact",
+  "forge-rich",
+  "forge-spin",
+  "group",
+  "peer",
+]);
+
+const PREFIX = "fg:";
+
+function walk(dir: string, out: string[] = []): string[] {
+  for (const entry of readdirSync(dir)) {
+    const full = join(dir, entry);
+    if (statSync(full).isDirectory()) {
+      if (entry !== "_tests") walk(full, out);
+    } else if (full.endsWith(".tsx") || full.endsWith(".ts")) out.push(full);
+  }
+  return out;
+}
+
+/**
+ * The whole `className=` value, braces and backticks balanced.
+ *
+ * A regex cannot do this, and the naive one nearly shipped the bug it is meant
+ * to prevent: `` className={`pb-32 md:pb-0${className ? ` ${className}` : ""}`} ``
+ * contains a NESTED backtick, so a `` /\{`([^`]*)`\}/ `` pattern never matched it
+ * and four components sat unprefixed while the guard reported clean.
+ */
+function classNameExpressions(src: string): Array<{ expr: string; index: number }> {
+  const found: Array<{ expr: string; index: number }> = [];
+  const marker = "className=";
+  for (let i = src.indexOf(marker); i !== -1; i = src.indexOf(marker, i + 1)) {
+    let j = i + marker.length;
+    if (src[j] === '"') {
+      const end = src.indexOf('"', j + 1);
+      if (end === -1) continue;
+      found.push({ expr: src.slice(j, end + 1), index: i });
+      continue;
+    }
+    if (src[j] !== "{") continue;
+    let depth = 0;
+    let inTemplate = false;
+    for (; j < src.length; j += 1) {
+      const ch = src[j];
+      if (ch === "\\") { j += 1; continue; }
+      if (ch === "`") inTemplate = !inTemplate;
+      else if (ch === "{") depth += 1;
+      else if (ch === "}") {
+        depth -= 1;
+        if (depth === 0) break;
+      }
+    }
+    found.push({ expr: src.slice(i + marker.length, j + 1), index: i });
+  }
+  return found;
+}
+
+/** Every literal class token in a className expression, interpolations aside. */
+function classTokens(expr: string): string[] {
+  const tokens: string[] = [];
+
+  // 1. Quoted strings, which is where a ternary keeps its classes:
+  //    `${open ? "fg:flex" : "fg:hidden"}`.
+  for (const m of expr.matchAll(/"([^"]*)"|'([^']*)'/g)) {
+    tokens.push(...(m[1] ?? m[2] ?? "").split(/\s+/));
+  }
+
+  // 2. Template TEXT, with every `${...}` removed first so an interpolation's
+  //    own code can never be mistaken for a class name.
+  let stripped = "";
+  let depth = 0;
+  for (let i = 0; i < expr.length; i += 1) {
+    if (expr[i] === "$" && expr[i + 1] === "{") { depth += 1; i += 1; continue; }
+    if (depth > 0) {
+      if (expr[i] === "{") depth += 1;
+      else if (expr[i] === "}") depth -= 1;
+      continue;
+    }
+    stripped += expr[i];
+  }
+  for (const m of stripped.matchAll(/`([^`]*)`/g)) tokens.push(...(m[1] ?? "").split(/\s+/));
+
+  return tokens.filter(Boolean);
+}
+
+describe("Forge utilities are prefixed", () => {
+  it("has no unprefixed utility in any component", () => {
+    const root = join(__dirname, "..", "..", "..");
+    const offences: string[] = [];
+
+    for (const file of walk(root)) {
+      const src = readFileSync(file, "utf-8");
+      for (const { expr, index } of classNameExpressions(src)) {
+        for (const cls of classTokens(expr)) {
+          if (cls.startsWith(PREFIX) || NOT_UTILITIES.has(cls)) continue;
+          const line = src.slice(0, index).split("\n").length;
+          offences.push(
+            `${file.slice(file.indexOf("packages/"))}:${line} "${cls}" has no fg: prefix, so it compiles to nothing and silently does not apply. Write "fg:${cls}", or add it to NOT_UTILITIES if it is hand-written CSS.`,
+          );
+        }
+      }
+    }
+
+    expect(offences, offences.join("\n")).toEqual([]);
+  });
+
+  it("ships no bare utility in the packaged stylesheet", () => {
+    // The other half, measured on the OUTPUT rather than the source: even if a
+    // component slipped one through, nothing unprefixed may reach a host's page,
+    // because that is the rule a bare class would break.
+    const css = readFileSync(join(__dirname, "..", "forge-utilities.css"), "utf-8");
+    const bare = [...css.matchAll(/^\s*\.([a-zA-Z][a-zA-Z0-9_-]*)\s*(?:,|\{)/gm)]
+      .map((m) => m[1]!)
+      .filter((c) => !c.startsWith("fg") && !NOT_UTILITIES.has(c));
+    expect([...new Set(bare)], "unprefixed rules in the shipped stylesheet").toEqual([]);
+  });
+});

package/src/ui/styled/broadcast/BroadcastMoqStage.tsx

@@ -120,5 +120,5 @@ export function BroadcastMoqStage({ url, name, muted, onFailed }: BroadcastMoqSt
     };
   }, [url, name, muted]);
 
-  return <div ref={hostRef} className="h-full w-full bg-black" />;
+  return <div ref={hostRef} className="fg:h-full fg:w-full fg:bg-black" />;
 }

package/src/ui/styled/chat/ChatThreadPanel.tsx

@@ -48,7 +48,7 @@ export function ChatThreadPanel({
 
   return (
     <section
-      className="fixed inset-0 z-50 md:static md:z-auto md:w-[360px] flex flex-col"
+      className="fg:fixed fg:inset-0 fg:z-50 fg:md:static fg:md:z-auto fg:md:w-[360px] fg:flex fg:flex-col"
       style={{ background: theme.colors.background, borderLeft: border }}
     >
       <header style={{ padding: "12px 16px", borderBottom: border, display: "flex", alignItems: "center", gap: 12 }}>