cursedbelt 5.0.1 → 5.2.0

package/scripts/checkAreaStyles.spec.ts

@@ -2,7 +2,18 @@ import { describe, expect, test } from 'bun:test';
 import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from 'node:fs';
 import { tmpdir } from 'node:os';
 import { join } from 'node:path';
-import { checkAreaStyles, classesInCss, readBeltSheets, tokensInJs } from './checkAreaStyles';
+import {
+  cascadeFaults,
+  checkAreaStyles,
+  classesInCss,
+  hasVariantPrefix,
+  inlineCandidatesIn,
+  onlyAsPropertyName,
+  onlyInMergeTables,
+  readBeltSheets,
+  tokensInJs,
+} from './checkAreaStyles';
+import { compileStylesheet } from './generateUtilityStyles';
 
 const BELT = {
   union: `@layer utilities { .flex { display: flex } .rounded-full { border-radius: 9999px } .hover\\:bg-muted { &:hover { @media (hover: hover) { background: var(--muted) } } } .recharts-tip { opacity: .5; } }`,
@@ -19,6 +30,26 @@ describe('classesInCss', () => {
     expect([...names].sort()).toEqual(['2xl:grid', 'a', 'hover:bg-muted', 'w-[1.5rem]']);
   });
 
+  test('🔴 a MARKER class (`peer`, `group`) that only appears inside :where()/:is() has no rule of its own', () => {
+    const css = `.peer-focus\\:ring-2:is(:where(.peer):focus ~ *){a:b} .group-hover\\:x:is(:where(.group\\/row):hover *){c:d} :where(.space-y-1>:not(:last-child)){e:f}`;
+    const names = classesInCss(css);
+    expect(names.has('peer')).toBe(false);
+    expect(names.has('group')).toBe(false);
+    expect(names.has('group/row')).toBe(false);
+    expect(names.has('peer-focus:ring-2')).toBe(true);
+    // …while a REAL utility Tailwind writes inside :where() is still a class with a rule.
+    expect(names.has('space-y-1')).toBe(true);
+  });
+
+  test("🔴 `peer` in an app's JS demands NO area — the real union and areas (apps/family, 2026-09-23)", () => {
+    const belt = readBeltSheets();
+    const { missing } = checkAreaStyles({ js: ['<input class="peer"/>'], css: [''] }, belt);
+    expect(missing.filter((m) => m.className === 'peer')).toEqual([]);
+    // …while a real workbench-only class still does, so the check is still looking.
+    const real = checkAreaStyles({ js: ['peer-focus:ring-2'], css: [''] }, belt).missing;
+    expect(real.map((m) => m.className)).toContain('peer-focus:ring-2');
+  });
+
   test("reads the real union — cursedbelt's own styles-utilities.css", () => {
     const { union, areas } = readBeltSheets();
     const names = classesInCss(union);
@@ -69,3 +100,129 @@ describe('checkAreaStyles', () => {
     }
   });
 });
+
+/** tailwind-merge's class-group table, as `cn()` ships it in a built bundle (flix, 2026-09-23). */
+const MERGE_TABLE =
+  '"text-decoration":["underline","overline","line-through","no-underline"],' +
+  '"font-style":["italic","not-italic"],"fvn-ordinal":["ordinal"],"divide-x":[{"divide-x":le()}],' +
+  // flix 5.1.0 build: a group mixing names with minified helper references.
+  // (verbatim shape: the minifier drops the quotes from identifier keys)
+  'cursor:[{cursor:["auto","nwse-resize","zoom-in","zoom-out",fe,ue]}]';
+
+describe('🔴 tailwind-merge tables are not usage (task 2118)', () => {
+  test('a token ONLY in the table is excused; a group key is excused', () => {
+    expect(onlyInMergeTables('line-through', MERGE_TABLE)).toBe(true);
+    expect(onlyInMergeTables('not-italic', MERGE_TABLE)).toBe(true);
+    expect(onlyInMergeTables('divide-x', MERGE_TABLE)).toBe(true);
+  });
+
+  test('refused when the token is ALSO in a rendered class string, or in an unkeyed array, or absent', () => {
+    expect(onlyInMergeTables('line-through', `${MERGE_TABLE};x("flex line-through text-sm")`)).toBe(false);
+    expect(onlyInMergeTables('ring-inset', 'x=["ring-inset"]')).toBe(false);
+    expect(onlyInMergeTables('ring-inset', '')).toBe(false);
+    // An array holding a CALL is not a table.
+    expect(onlyInMergeTables('zoom-in', '"cursor":["zoom-in",f()]')).toBe(false);
+  });
+
+  test('the flix shape reports NO miss for table-only tokens and `peer`, and still reports `right-3`', () => {
+    const belt = readBeltSheets();
+    const js = [`${MERGE_TABLE};const a=x("peer");const b={className:"absolute right-3 top-2"};`];
+    const { missing } = checkAreaStyles({ js, css: ['.absolute{position:absolute}.top-2{top:.5rem}'] }, belt);
+    const names = missing.map((m) => m.className);
+    for (const excused of ['line-through', 'not-italic', 'ordinal', 'divide-x', 'no-underline', 'zoom-in', 'peer']) expect(names).not.toContain(excused);
+    expect(names).toContain('right-3');
+  });
+});
+
+describe('🔴 a property NAME is not class usage (task 2131, station)', () => {
+  // Verbatim from station's build: d3's scale check, inside recharts.
+  const STATION = 'function RE(e){if(e!=null)return"invert"in e&&typeof e.invert=="function"?e.invert:null}';
+
+  test('an `in` test and an object key are excused', () => {
+    expect(onlyAsPropertyName('invert', STATION)).toBe(true);
+    expect(onlyAsPropertyName('invert', 'const o={"invert":1}')).toBe(true);
+  });
+
+  test('refused when the token is ALSO a class, or a lone string value (`cn("italic")` IS usage)', () => {
+    expect(onlyAsPropertyName('invert', `${STATION};x({className:"invert grayscale"})`)).toBe(false);
+    expect(onlyAsPropertyName('italic', 'x=cn("italic",y)')).toBe(false);
+    expect(onlyAsPropertyName('h-8', 'const v={size:{sm:"h-8"}}')).toBe(false);
+    expect(onlyAsPropertyName('invert', '')).toBe(false);
+  });
+
+  test('the station shape reports no `invert` miss', () => {
+    const { missing } = checkAreaStyles({ js: [STATION], css: [''] }, readBeltSheets());
+    expect(missing.map((m) => m.className)).not.toContain('invert');
+  });
+});
+
+describe('an area is `@source inline` candidates since 5.1.0 (task 2124)', () => {
+  test('inlineCandidatesIn reads both quote kinds and skips markers', () => {
+    const css = `/* banner */\n@source inline("flex sm:hidden peer");\n@source inline('before:content-[""]');\n`;
+    expect([...inlineCandidatesIn(css)].sort()).toEqual(['before:content-[""]', 'flex', 'sm:hidden']);
+  });
+
+  test('the shipped areas carry their utilities as candidates, and the check can still name an area', () => {
+    const belt = readBeltSheets();
+    expect(inlineCandidatesIn(belt.areas.core ?? '').size).toBeGreaterThan(400);
+    const { missing } = checkAreaStyles({ js: ['x("truncate")'], css: [''] }, belt);
+    expect(missing).toEqual([{ className: 'truncate', area: 'core' }]);
+  });
+});
+
+describe('🔴 the ORDER check — a base utility after a variant that sets the same property (task 2124)', () => {
+  test('flix @87ba751: its own `sm:flex` pass, then core.css\'s precompiled `.hidden` — RED', () => {
+    // The two offsets the task measured in dist/assets/index-*.css, verbatim in shape.
+    const built =
+      '@layer utilities{@media(min-width:40rem){.sm\\:flex{display:flex}.sm\\:hidden{display:none}}' +
+      '.flex{display:flex}.grid{display:grid}.hidden{display:none}}';
+    const faults = cascadeFaults([built]);
+    expect(faults).toContainEqual({ base: 'hidden', variant: 'sm:flex', properties: ['display'] });
+  });
+
+  test("G2's fixture: `.md:p-8` then `.p-4` — RED", () => {
+    const faults = cascadeFaults(['@layer utilities{@media (width>=48rem){.md\\:p-8{padding:2rem}}.p-4{padding:1rem}}']);
+    expect(faults.map((f) => `${f.base}>${f.variant}`)).toEqual(['p-4>md:p-8']);
+  });
+
+  test('ONE Tailwind pass never has a fault — including .container, divide-y and arbitrary properties', async () => {
+    const one = (await compileStylesheet('@import "tailwindcss" source(none);\n@import "./styles-static.css";\n@import "./theme.css";\n')).build([
+      'hidden', 'sm:flex', 'p-4', 'md:p-8', 'container', 'max-w-sm', 'divide-y', 'border-t', 'break-words',
+      '[overflow-wrap:anywhere]', 'text-[color:var(--accent)]', 'text-sm', 'hover:bg-muted', 'bg-muted',
+    ]);
+    expect(cascadeFaults([one])).toEqual([]);
+  });
+
+  test('🔴 the structural fix: app + areas compile as ONE pass (5.1.0), where precompiled areas were two (≤5.0.x)', async () => {
+    // The app's own `hidden sm:flex` (flix's header) and cursedbelt's core, both ways.
+    const app = '@import "tailwindcss" source(none);\n@source inline("hidden sm:flex sm:hidden flex");\n@import "./styles-static.css";\n';
+    const onePass = (await compileStylesheet(`${app}@import "./styles-areas/core.css";\n@import "./theme.css";\n`)).build([]);
+    expect(cascadeFaults([onePass])).toEqual([]);
+    // What ≤5.0.x shipped: core compiled on its own and appended after the app's pass.
+    const core = [...inlineCandidatesIn(readBeltSheets().areas.core ?? '')];
+    const precompiledCore = (await compileStylesheet('@import "tailwindcss/utilities.css" layer(utilities);\n@reference "./styles-static.css";\n@reference "./theme.css";\n')).build(core);
+    const appPass = (await compileStylesheet(`${app}@import "./theme.css";\n`)).build([]);
+    expect(cascadeFaults([`${appPass}\n${precompiledCore}`]).some((f) => f.variant === 'sm:flex' && f.base === 'hidden')).toBe(true);
+  });
+
+  test('hasVariantPrefix: only a colon outside brackets is a variant', () => {
+    expect(hasVariantPrefix('sm:flex')).toBe(true);
+    expect(hasVariantPrefix('[&>*]:w-full')).toBe(true);
+    expect(hasVariantPrefix('[overflow-wrap:anywhere]')).toBe(false);
+    expect(hasVariantPrefix('text-[color:var(--x)]')).toBe(false);
+  });
+
+  test('the CLI exits 1 on an out-of-order build even when every class is styled', () => {
+    const dir = mkdtempSync(join(tmpdir(), 'belt-order-check-'));
+    try {
+      mkdirSync(join(dir, 'assets'));
+      writeFileSync(join(dir, 'assets', 'index.js'), 'const c="truncate";');
+      writeFileSync(join(dir, 'assets', 'index.css'), '@layer utilities{@media(min-width:40rem){.sm\\:flex{display:flex}}.truncate{overflow:hidden}.hidden{display:none}}');
+      const r = Bun.spawnSync(['bun', join(import.meta.dir, 'checkAreaStyles.ts'), dir], { stdout: 'pipe', stderr: 'pipe' });
+      expect(r.exitCode).toBe(1);
+      expect(r.stderr.toString()).toContain('.hidden (later) overrides .sm:flex');
+    } finally {
+      rmSync(dir, { recursive: true, force: true });
+    }
+  });
+});

package/scripts/checkAreaStyles.ts

@@ -25,6 +25,10 @@
  * costs a broken screen on a live hostname. A class that appears in NO area is excluded (the
  * area split already proves core-plus-every-area equals the union, `src/stylesAreas.spec.ts`).
  *
+ * ── …and whether the build's utilities are in ONE order (5.1.0, task 2124) ──────────────
+ * {@link cascadeFaults}: a base utility after a variant that sets the same property is two sorted
+ * Tailwind passes concatenated, and the base wins at every width. Both halves exit 1.
+ *
  * Usage, from an app, after its build:
  *   bun node_modules/cursedbelt/scripts/checkAreaStyles.ts dist
  * Exit 0 = complete, 1 = a class is unstyled (listed with its area), 2 = could not measure
@@ -47,7 +51,16 @@ function unescapeIdent(raw: string): string {
   );
 }
 
-/** Every class selector in a stylesheet, unescaped. Comments are dropped first. */
+/**
+ * 🔴 MARKER classes: `peer`, `group` and their named forms (`group/row`). Tailwind reads them
+ * only inside another class's selector (`.peer-focus\:ring-2:is(:where(.peer):focus ~ *)`); the
+ * stylesheet has no rule FOR them, so no area carries one and none may be demanded for one.
+ * Measured 2026-09-23 (task 2118): `.peer` sits only inside `workbench.css`'s `peer-focus:` rules,
+ * so every app writing `class="peer"` was told to import the whole `workbench` area.
+ */
+export const isMarkerClass = (name: string): boolean => /^(peer|group)(\/[\w-]+)?$/.test(name);
+
+/** Every class a stylesheet names in a selector, unescaped — except the {@link isMarkerClass} ones. */
 export function classesInCss(css: string): Set<string> {
   const out = new Set<string>();
   const code = css.replace(/\/\*[\s\S]*?\*\//g, '');
@@ -56,17 +69,208 @@ export function classesInCss(css: string): Set<string> {
     for (const m of selector.matchAll(/\.((?:\\[0-9a-fA-F]{1,6} ?|\\.|[A-Za-z0-9_-])+)/g)) {
       const name = unescapeIdent(m[1] as string);
       if (/^[0-9]/.test(name) && !/[a-z]/i.test(name)) continue; // `.5` in a stray number
+      if (isMarkerClass(name)) continue;
       out.add(name);
     }
   }
   return out;
 }
 
+/**
+ * The candidates an area stylesheet names in `@source inline("…")` / `@source inline('…')` —
+ * what an area IS since 5.1.0 (task 2124): candidates the app's own Tailwind pass generates,
+ * not precompiled rules. Brace expansion is not used by the generator, so none is done here.
+ */
+export function inlineCandidatesIn(css: string): Set<string> {
+  const out = new Set<string>();
+  for (const m of css.matchAll(/@source\s+inline\(\s*(?:"([^"]*)"|'([^']*)')\s*\)/g)) {
+    for (const token of (m[1] ?? m[2] ?? '').split(/\s+/)) if (token && !isMarkerClass(token)) out.add(token);
+  }
+  return out;
+}
+
 /** Every whitespace/quote/backtick-delimited token in a JS bundle. */
 export function tokensInJs(js: string): Set<string> {
   return new Set(js.split(/[\s"'`]+/).filter((t) => t.length > 0 && t.length < 200));
 }
 
+// ── tailwind-merge's tables are not class usage (5.1.0, task 2118) ───────────────────────
+
+const escapeRe = (s: string): string => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+/**
+ * Does `token` occur in the built JS ONLY as an entry of tailwind-merge's class-group table —
+ * `"text-decoration":["underline","overline","line-through","no-underline"]` — or as a group's own
+ * key (`"divide-x":[{…}]`)? `cn()` ships that table in every bundle, so tokenising it reported
+ * `line-through`, `not-italic`, `ordinal`, `ring-inset`, `zoom-in`, `divide-x`, `normal-case` and
+ * `no-underline` as used on flix and demanded seven areas it never renders (~3 kB gzip, measured
+ * 2026-09-23). Lifted from `apps/music/scripts/check-area-styles.ts`, with its tests.
+ *
+ * 🔴 Refuses whenever the token ALSO appears bare inside any longer string — a real className —
+ * and when it appears in an array that is not a keyed table entry. A filter that could only say
+ * "fine" would be the check going green on nothing.
+ */
+export function onlyInMergeTables(token: string, js: string): boolean {
+  const quoted = new RegExp(`"${escapeRe(token)}"`, 'g');
+  let seen = 0;
+  for (const m of js.matchAll(quoted)) {
+    seen++;
+    const at = m.index ?? 0;
+    if (js[at + m[0].length] === ':') continue; // a group's own NAME, as an object key
+    const open = js.lastIndexOf('[', at);
+    const close = js.indexOf(']', at);
+    if (open < 0 || close < 0) return false;
+    const inside = js.slice(open + 1, close);
+    // Quoted names, and the minified helper references tailwind-merge mixes into a group
+    // (`"cursor":[…,"zoom-in","zoom-out",fe,ue]` on flix) — never an expression or a call.
+    const ELEMENT = '(?:"[^"]*"|[A-Za-z_$][\\w$]*)';
+    if (!new RegExp(`^\\s*${ELEMENT}(\\s*,\\s*${ELEMENT})*\\s*$`).test(inside)) return false;
+    // Keyed — `"divide-x":[` or, once a minifier drops the quotes, `cursor:[`.
+    if (!/(?:"[\w-]+"|[A-Za-z_$][\w$]*)\s*:\s*$/.test(js.slice(Math.max(0, open - 64), open))) return false;
+  }
+  const bare = new RegExp(`(^|[\\s"'\`])${escapeRe(token)}(?=[\\s"'\`]|$)`, 'g');
+  return seen > 0 && [...js.matchAll(bare)].length === seen;
+}
+
+/**
+ * Does `token` occur in the built JS only as a PROPERTY NAME — the left side of an `in` test
+ * (`"invert"in e`, d3's scale check inside recharts) or an object key (`{"invert":…}`)? A className
+ * is always a string VALUE, never either (task 2131, measured on station's build 2026-09-23: the
+ * only false reference left after the tailwind-merge filter, and it demanded the `media` area).
+ * Refused as soon as the token also appears in any class string.
+ */
+export function onlyAsPropertyName(token: string, js: string): boolean {
+  const quoted = new RegExp(`(["'])${escapeRe(token)}\\1`, 'g');
+  let seen = 0;
+  for (const m of js.matchAll(quoted)) {
+    seen++;
+    const after = js.slice((m.index ?? 0) + m[0].length, (m.index ?? 0) + m[0].length + 4);
+    if (!/^\s*(?::|in\b)/.test(after)) return false;
+  }
+  const bare = new RegExp(`(^|[\\s"'\`])${escapeRe(token)}(?=[\\s"'\`]|$)`, 'g');
+  return seen > 0 && [...js.matchAll(bare)].length === seen;
+}
+
+// ── the ORDER check (5.1.0, task 2124) ─────────────────────────────────────────────────
+
+export interface CascadeFault {
+  /** The base utility that comes LATER, and so wins at every width. */
+  base: string;
+  /** The variant it silently overrides. */
+  variant: string;
+  /** The properties both set. */
+  properties: string[];
+}
+
+interface UtilityRule {
+  cls: string;
+  variant: boolean;
+  properties: Set<string>;
+}
+
+/** A `:` OUTSIDE brackets: `sm:flex` is a variant, `[overflow-wrap:anywhere]` and `text-[color:red]` are not. */
+export function hasVariantPrefix(cls: string): boolean {
+  let depth = 0;
+  for (const ch of cls) {
+    if (ch === '[' || ch === '(') depth++;
+    else if (ch === ']' || ch === ')') depth = Math.max(0, depth - 1);
+    else if (ch === ':' && depth === 0) return true;
+  }
+  return false;
+}
+
+/** Every rule inside `@layer utilities`, in document order: its class, whether it is a variant, what it sets. */
+function utilityRules(css: string): UtilityRule[] {
+  const code = css.replace(/\/\*[\s\S]*?\*\//g, '');
+  const out: UtilityRule[] = [];
+  const stack: { header: string; props: Set<string> }[] = [];
+  let buf = '';
+  const flushDecls = (text: string) => {
+    const top = stack[stack.length - 1];
+    if (!top) return;
+    for (const decl of text.split(';')) {
+      const m = /^\s*([-\w]+)\s*:/.exec(decl);
+      if (m?.[1] && !m[1].startsWith('--')) top.props.add(m[1]);
+    }
+  };
+  for (let i = 0; i < code.length; i++) {
+    const ch = code[i];
+    if (ch === '"' || ch === "'") {
+      const end = code.indexOf(ch, i + 1);
+      buf += code.slice(i, end < 0 ? code.length : end + 1);
+      i = end < 0 ? code.length : end;
+      continue;
+    }
+    if (ch === '{') {
+      const header = buf.slice(buf.lastIndexOf(';') + 1).trim();
+      flushDecls(buf.slice(0, buf.lastIndexOf(';') + 1));
+      stack.push({ header, props: new Set() });
+      buf = '';
+      continue;
+    }
+    if (ch === '}') {
+      flushDecls(buf);
+      buf = '';
+      const block = stack.pop();
+      if (!block || block.props.size === 0) continue;
+      const chain = [...stack.map((b) => b.header), block.header];
+      if (!chain.some((h) => /^@layer\s+utilities\b/.test(h))) continue;
+      // The innermost SELECTOR carrying these declarations (a nested `@media` block's parent).
+      const selector = [...chain].reverse().find((h) => !h.startsWith('@'));
+      const m = selector ? /^\.((?:\\[0-9a-fA-F]{1,6} ?|\\.|[A-Za-z0-9_-])+)/.exec(selector) : null;
+      if (!m) continue;
+      const cls = unescapeIdent(m[1] as string);
+      // A VARIANT is a class with a variant prefix (`sm:`, `hover:`, `dark:`, `@md:`). Not "inside
+      // a @media": `.container` emits its own breakpoint blocks and is still a base utility, and
+      // `.divide-y > :not(:last-child)` is a base with a structural selector.
+      out.push({ cls, variant: hasVariantPrefix(cls), properties: block.props });
+      continue;
+    }
+    buf += ch;
+  }
+  return out;
+}
+
+/**
+ * 🔴 A BASE utility that comes after a VARIANT setting the same property, in `@layer utilities`.
+ *
+ * One Tailwind pass can never produce this: it emits every base utility, then every variant, so a
+ * variant always follows the base it overrides. It appears only when two separately SORTED passes
+ * are concatenated — cursedbelt's precompiled areas (≤ 5.0.x) after an app's own pass — and then
+ * the base wins at every width: flix's `.hidden` (from core.css, later) beat its own `.sm:flex`, and
+ * the desktop nav vanished at 1440 px (task 2124). Same specificity, later wins.
+ *
+ * Conservative on purpose — EVERY such pair, not only pairs the markup combines. Since 5.1.0 an
+ * app's build has one pass, so a healthy build has zero pairs and this costs no false positive; a
+ * build that has any is a build with two passes, and the pair the markup does not combine TODAY
+ * is the one the next commit does (G2 measured latent `sm:p-4`/`p-1.5` in collections). Judging only
+ * combined pairs would pass that build and ship the bug one className later. `@supports` wrappers
+ * are a base utility's own fallback, not a variant.
+ */
+export function cascadeFaults(cssTexts: readonly string[]): CascadeFault[] {
+  const faults: CascadeFault[] = [];
+  const seen = new Set<string>();
+  for (const css of cssTexts) {
+    const rules = utilityRules(css);
+    const variantsSoFar: UtilityRule[] = [];
+    for (const rule of rules) {
+      if (rule.variant) {
+        variantsSoFar.push(rule);
+        continue;
+      }
+      for (const v of variantsSoFar) {
+        const shared = [...rule.properties].filter((p) => v.properties.has(p));
+        if (shared.length === 0) continue;
+        const key = `${rule.cls}|${v.cls}`;
+        if (seen.has(key)) continue;
+        seen.add(key);
+        faults.push({ base: rule.cls, variant: v.cls, properties: shared });
+      }
+    }
+  }
+  return faults;
+}
+
 function filesUnder(dir: string, ext: string, out: string[] = []): string[] {
   for (const entry of readdirSync(dir)) {
     if (entry === 'node_modules') continue;
@@ -84,24 +288,28 @@ export interface AreaCheckResult {
   cssFiles: number;
   /** How many belt classes the JS references — a zero here means the check saw nothing. */
   referenced: number;
+  /** {@link cascadeFaults} over the built CSS — base utilities that override a variant. */
+  outOfOrder: CascadeFault[];
 }
 
 /** The measurement, over explicit texts — what the spec drives. */
 export function checkAreaStyles(
   input: { js: string[]; css: string[] },
   belt: { union: string; areas: Record<string, string> },
-): Omit<AreaCheckResult, 'jsFiles' | 'cssFiles'> {
+): Omit<AreaCheckResult, 'jsFiles' | 'cssFiles' | 'outOfOrder'> {
   const union = classesInCss(belt.union);
   const areaOf = new Map<string, string>();
   for (const [area, css] of Object.entries(belt.areas)) {
-    for (const name of classesInCss(css)) if (!areaOf.has(name)) areaOf.set(name, area);
+    for (const name of [...classesInCss(css), ...inlineCandidatesIn(css)]) if (!areaOf.has(name)) areaOf.set(name, area);
   }
   const emitted = new Set<string>();
   for (const css of input.css) for (const name of classesInCss(css)) emitted.add(name);
   const referenced = new Set<string>();
   for (const js of input.js) for (const token of tokensInJs(js)) if (union.has(token) && areaOf.has(token)) referenced.add(token);
+  const allJs = input.js.join('\n');
   const missing = [...referenced]
     .filter((name) => !emitted.has(name))
+    .filter((name) => !onlyInMergeTables(name, allJs) && !onlyAsPropertyName(name, allJs))
     .sort()
     .map((className) => ({ className, area: areaOf.get(className) as string }));
   return { missing, referenced: referenced.size };
@@ -123,7 +331,8 @@ export function checkDist(distDir: string): AreaCheckResult {
     { js: jsFiles.map((f) => readFileSync(f, 'utf8')), css: cssFiles.map((f) => readFileSync(f, 'utf8')) },
     readBeltSheets(),
   );
-  return { ...result, jsFiles: jsFiles.length, cssFiles: cssFiles.length };
+  const cssTexts = cssFiles.map((f) => readFileSync(f, 'utf8'));
+  return { ...result, outOfOrder: cascadeFaults(cssTexts), jsFiles: jsFiles.length, cssFiles: cssFiles.length };
 }
 
 if (import.meta.main) {
@@ -137,14 +346,25 @@ if (import.meta.main) {
     console.error(`✗ ${dir} holds ${result.jsFiles} .js and ${result.cssFiles} .css file(s) — nothing to compare.`);
     process.exit(2);
   }
+  if (result.outOfOrder.length > 0) {
+    console.error(`✗ ${result.outOfOrder.length} base utilit(y|ies) come AFTER a variant that sets the same property, so the base wins at every width:`);
+    for (const f of result.outOfOrder.slice(0, 12)) console.error(`    .${f.base} (later) overrides .${f.variant}  — ${f.properties.join(', ')}`);
+    if (result.outOfOrder.length > 12) console.error(`    … +${result.outOfOrder.length - 12} more`);
+    console.error('  Two sorted Tailwind passes were concatenated — cursedbelt ≤ 5.0.x precompiled areas after the app\'s own.');
+    console.error('  cursedbelt ≥ 5.1.0 areas are candidates for the app\'s ONE pass: upgrade, and rebuild.');
+  }
   if (result.missing.length === 0) {
-    console.log(`✓ belt area styles complete: all ${result.referenced} cursedbelt classes the build references are styled (${result.jsFiles} js, ${result.cssFiles} css).`);
+    if (result.outOfOrder.length > 0) process.exit(1);
+    console.log(
+      `✓ belt area styles complete: all ${result.referenced} cursedbelt classes the build references are styled, ` +
+        `and no base utility follows a variant (${result.jsFiles} js, ${result.cssFiles} css).`,
+    );
     process.exit(0);
   }
   const byArea = new Map<string, string[]>();
   for (const { className, area } of result.missing) byArea.set(area, [...(byArea.get(area) ?? []), className]);
   console.error(`✗ ${result.missing.length} cursedbelt class(es) the built JS uses have NO rule in the built CSS.`);
-  console.error('  Import the area that carries them (after core) — `@import "cursedbelt/styles-areas/<area>.css";`:');
+  console.error('  Import the area that carries them — `@import "cursedbelt/styles-areas/<area>.css";`:');
   for (const [area, names] of [...byArea].sort()) console.error(`    ${area}.css  ← ${names.slice(0, 8).join(' ')}${names.length > 8 ? ` … +${names.length - 8}` : ''}`);
   process.exit(1);
 }

package/scripts/cssRules.ts

@@ -30,8 +30,15 @@ export const flatten = (css: string): Map<string, Set<string>> => {
 	const stack: string[] = [];
 	const open: string[][] = [[]];
 	let buf = '';
+	// 🔴 One spelling per declaration: whitespace collapsed, and a quoted string normalised to
+	// double quotes. Since 5.1.0 an area is compiled by the APP's Tailwind pass, which prints
+	// `"Segoe UI"` where the precompiled union printed `'Segoe UI'` over a line break — the same
+	// declaration, and a comparison that called it a lost one was comparing formatters.
 	const push = (raw: string): void => {
-		const decl = raw.trim();
+		const decl = raw
+			.trim()
+			.replace(/\s+/g, ' ')
+			.replace(/'([^'"]*)'/g, '"$1"');
 		if (decl) open[open.length - 1]?.push(decl);
 	};
 	for (let i = 0; i < css.length; i++) {

package/scripts/gate.ts

@@ -65,7 +65,7 @@ function viaWorktree(from: string): string | null {
 		});
 		if (git.status !== 0) return null;
 		const gitDir = (git.stdout ?? "").trim();
-		if (!gitDir || !gitDir.startsWith("/")) return null;
+		if (!gitDir?.startsWith("/")) return null;
 		// `<primary>/.git` → `<primary>`, then the ordinary walk up.
 		return findForgeRoot(dirname(gitDir));
 	} catch {