cursedbelt 5.7.1 → 5.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "cursedbelt",
-	"version": "5.7.1",
+	"version": "5.7.2",
 	"license": "ISC",
 	"type": "module",
 	"description": "The React design system of the cursedbelt split — components, styles, theme. cursedbelt-core below it; server tier in cursedbelt-server.",

package/scripts/checkAreaStyles.spec.ts

@@ -75,7 +75,7 @@ describe('checkAreaStyles', () => {
     const js = [`const a="flex rounded-full";const b=\`recharts-tip \${x}\`;`];
     const css = [`.flex{display:flex}.rounded-full{border-radius:9999px}`];
     const result = checkAreaStyles({ js, css }, BELT);
-    expect(result.missing).toEqual([{ className: 'recharts-tip', area: 'charts' }]);
+    expect(result.missing).toEqual([{ className: 'recharts-tip', area: 'charts', areas: ['charts'] }]);
     expect(result.referenced).toBe(3);
   });
 
@@ -177,7 +177,23 @@ describe('an area is `@source inline` candidates since 5.1.0 (task 2124)', () =>
     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' }]);
+    expect(missing).toEqual([{ className: 'truncate', area: 'core', areas: ['core'] }]);
+  });
+});
+
+describe('🔴 a class two areas carry names BOTH (5.7.2)', () => {
+  test("station's `min-w-40`: `media` AND `workbench`, not just the alphabetically first", () => {
+    // Measured 2026-09-24: station adopted `ListToolbar` (a `workbench` module), its gate went red
+    // on `min-w-40`, and the fix this printed was `media.css` — an area station renders nothing from.
+    const { missing } = checkAreaStyles({ js: ['x("min-w-40")'], css: [''] }, readBeltSheets());
+    expect(missing).toHaveLength(1);
+    expect(missing[0]?.areas).toContain('media');
+    expect(missing[0]?.areas).toContain('workbench');
+  });
+
+  test('the areas are sorted and never repeat — whatever order the sheets were read in', () => {
+    const belt = { union: '.w-1{width:1px}', areas: { zeta: '@source inline("w-1");\n.w-1{width:1px}', alpha: '@source inline("w-1");' } };
+    expect(checkAreaStyles({ js: ['x("w-1")'], css: [''] }, belt).missing).toEqual([{ className: 'w-1', area: 'alpha', areas: ['alpha', 'zeta'] }]);
   });
 });
 

package/scripts/checkAreaStyles.ts

@@ -476,8 +476,13 @@ function filesUnder(dir: string, ext: string, out: string[] = []): string[] {
 }
 
 export interface AreaCheckResult {
-  /** Belt classes the JS uses and the CSS does not style → the area that carries each. */
-  missing: { className: string; area: string }[];
+  /**
+   * Belt classes the JS uses and the CSS does not style → the areas that carry each. `areas` is
+   * EVERY area whose sheet carries the class, sorted; `area` is the first of them. 🔴 Name them all:
+   * `min-w-40` is in both `media` and `workbench`, and until 5.7.2 this said only `media` —
+   * the wrong advice for station, whose `min-w-40` came from `ListToolbar` (a `workbench` module).
+   */
+  missing: { className: string; area: string; areas: string[] }[];
   jsFiles: number;
   cssFiles: number;
   /** How many belt classes the JS references — a zero here means the check saw nothing. */
@@ -494,9 +499,9 @@ export function checkAreaStyles(
   belt: { union: string; areas: Record<string, string> },
 ): Omit<AreaCheckResult, 'jsFiles' | 'cssFiles' | 'outOfOrder' | 'undefinedVariables'> {
   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), ...inlineCandidatesIn(css)]) if (!areaOf.has(name)) areaOf.set(name, area);
+  const areaOf = new Map<string, string[]>();
+  for (const [area, css] of Object.entries(belt.areas).sort(([a], [b]) => a.localeCompare(b))) {
+    for (const name of new Set([...classesInCss(css), ...inlineCandidatesIn(css)])) areaOf.set(name, [...(areaOf.get(name) ?? []), area]);
   }
   const emitted = new Set<string>();
   for (const css of input.css) for (const name of classesInCss(css)) emitted.add(name);
@@ -507,7 +512,10 @@ export function checkAreaStyles(
     .filter((name) => !emitted.has(name))
     .filter((name) => !onlyInMergeTables(name, allJs) && !onlyAsPropertyName(name, allJs))
     .sort()
-    .map((className) => ({ className, area: areaOf.get(className) as string }));
+    .map((className) => {
+      const areas = areaOf.get(className) as string[];
+      return { className, area: areas[0] as string, areas };
+    });
   return { missing, referenced: referenced.size };
 }
 
@@ -595,9 +603,14 @@ if (import.meta.main) {
     process.exit(0);
   }
   const byArea = new Map<string, string[]>();
-  for (const { className, area } of result.missing) byArea.set(area, [...(byArea.get(area) ?? []), className]);
+  for (const { className, areas } of result.missing) {
+    const key = areas.map((a) => `${a}.css`).join(' | ');
+    byArea.set(key, [...(byArea.get(key) ?? []), 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 — `@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}` : ''}`);
+  console.error('  Import the area that carries them — `@import "cursedbelt/styles-areas/<area>.css";`.');
+  console.error('  Where a line names several (`a.css | b.css`), any one fixes it: import the area of the component you');
+  console.error("  mounted (scripts/styleAreas.ts says which that is) — not the first name, which is only alphabetical:");
+  for (const [areas, names] of [...byArea].sort()) console.error(`    ${areas}  ← ${names.slice(0, 8).join(' ')}${names.length > 8 ? ` … +${names.length - 8}` : ''}`);
   process.exit(1);
 }