Files
dogfather-universe/server/pruef-css-klassen.mjs
T
DogFatherGitandClaude Opus 5 4eab64bd20 Eine neue Form fuer jedes Modul -- und der Kalender zeigt nur noch, was einen angeht
Filipe: "DU HAST WIEDER EINE KLEINE AENDERUNG UEBERALL GEMACHT ANSTATT
EINE RIESEN AENDERUNG." Er hatte recht, und der Grund war jedes Mal
derselbe: Ich habe das MATERIAL getauscht (Mattglas, Leuchtschiene,
Verlauf) und die FORM gelassen. Ein abgerundetes Rechteck bleibt ein
abgerundetes Rechteck -- und die Silhouette ist das Einzige, was man aus
fuenf Metern erkennt.

Jetzt ist die Form eine andere: abgeschnittene Ecke oben links
(clip-path, echte Silhouette), ein Kantenlicht in der Kategoriefarbe
darauf, Eckwinkel unten rechts, ein feines Raster statt Koernung.
35 Bauteile auf allen 18 Seiten, in einer eigenen Datei (module.css).

DREI DINGE, DIE DABEI SCHIEFGINGEN UND JETZT ABGESICHERT SIND

1. Die Regeln standen in :where() -- Spezifitaet null, also gewann jede
   aeltere .kachel::before-Regel. Jetzt :is().
2. module.css stand an DRITTER Stelle im Ladeweg. Auf Calls,
   Automationen, Bereich und Dateien hat sie damit gar nichts bewirkt:
   Die Seitendateien setzen dort selbst border-radius und box-shadow und
   kommen spaeter. Genau das ergab wieder "ueberall ein bisschen". Sie
   wird jetzt als LETZTE geladen, geprueft auf allen 18 Seiten.
3. Die Klassenliste steht siebenmal in der Datei (CSS kennt keine
   Variable fuer Selektoren). Eine vergessene Kopie faellt niemandem
   auf -- pruef-css-klassen vergleicht sie deshalb alle, mit Gegenprobe.

DER KALENDER: NUR NOCH, WAS EINEN ANGEHT

Filipe: "calls oder termine soll jeder nur sehen die er selber macht
oder jeden betrifft." Das gilt auch fuer DogFather, und das ist die
eigentliche Aenderung -- er bekam bisher 1=1. "Jeden betrifft" heisst:
ohne Gegenueber und ohne Teilnehmerliste. Wer niemanden eintraegt, meint
alle. Die Rollenfrage entfaellt im Kalender damit vollstaendig.

SECHS PRUEFUNGEN, DIE EINE WELT GEMESSEN HABEN, DIE ES NICHT MEHR GIBT

Alle sechs wurden auf die neue Regel umgeschrieben, keine geloescht --
loeschen haette die Zahl gesenkt und den neuen Weg ungeprueft gelassen:
ics, serien, sicht, spicy, teilnehmer, tagesblick, team.

UND VIER ECHTE FUNDE, DIE DABEI HERAUSFIELEN

* pruef-workspace-seiten war seit dem Bildumbau von heute Frueh auf
  ALLEN 32 Seiten rot: Sie verlangte noch das eine Motiv. Die neue
  Bedingung ist schaerfer als beide alten -- das geladene Bild muss zu
  dem Merkmal passen, das die Seite selbst traegt. Und die Meldung sagt
  jetzt, WELCHE Bedingung gefallen ist.
* pruef-leistung-optik hat sich selbst ausgesperrt (meldete sich als
  Manager an, der die Zahlen seit Filipes Anweisung nicht mehr sehen
  darf) und stuerzte danach ab: 2 Pruefungen statt 56. Der Absturz hat
  verdeckt, dass sie sieben Fingerziele als "zu klein" meldete -- es
  waren die unsichtbaren Knoepfe der zugeklappten Woche, 0x0.
* personen.html beim Manager: Der Erklaersatz ("Codes, Sperren und das
  Protokoll bleiben bei DogFather") kam nie an -- das Element gab es
  nicht, und das && davor hat den Fehlgriff verschluckt. Die Liste stand
  ausserdem dauerhaft auf aria-busy="true": fuer einen Screenreader lud
  die Seite fuer immer.
* pruef-schranke hielt personen.html noch fuer DogFather-only. Die Seite
  wechselt jetzt die Erwartung, statt aus der Pruefung zu verschwinden:
  Seite auf fuer die Leitung, Verwaltungsdaten dahinter weiterhin zu.

Die Anmeldeseite wurde nicht angefasst (nur ihr Versionsstempel).

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-09-07 07:12:48 +02:00

495 lines
22 KiB
JavaScript
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/* STEHT DAS CSS AUCH AUF DER SEITE, DIE ES BENUTZT?
ENTSTANDEN AUS EINEM ECHTEN FEHLER (05.09.2026).
Die Teilnehmerwahl im Kalender benutzte `.wahl__knopf` und
`.wahl__rolle`. Beide sind sauber definiert -- in dateien.css. Und
kalender.html bindet dateien.css nicht ein.
Ohne `display:inline-flex` und `gap` stehen zwei <span> eben direkt
nebeneinander. Auf Filipes Bildschirm stand deshalb:
DogfatherDogFather VanVanDogFather CigdemManager
Vierzig Prüfungen zur Teilnehmerwahl waren grün. Sie prüften, dass
die richtigen Personen ankommen, dass Fremde weggefiltert werden,
dass die Sichtbarkeit stimmt -- alles richtig, und alles am Problem
vorbei. KEINE hat gefragt, ob das Ergebnis auch aussieht wie
gedacht. Das ist die dritte Sorte Fehler aus der Projektnotiz: nicht
der übersprungene Test, nicht der grüne, der das Falsche prüft,
sondern die Frage, die niemand gestellt hat.
WAS HIER GEMESSEN WIRD
Für jede Workspace-Seite:
1. Welche Stylesheets bindet sie ein? (rekursiv über @import)
2. Welche Klassen vergibt sie -- im HTML *und* in ihrem eigenen
JavaScript (className, classList.add, setAttribute('class')).
3. Ist jede davon in einem der eingebundenen Stylesheets definiert?
WAS BEWUSST NICHT GEMESSEN WIRD
Klassen, die es nur zum Anfassen gibt (`js-`), reine Datenanker und
Klassen aus gemeinsamen Bausteinen, die jede Seite lädt. Und die
Gegenrichtung ("CSS ohne Benutzer") gehört nicht hierher: Ungenutztes
CSS ist Ballast, kein Fehler.
DRITTER AUSGANG: Findet die Prüfung keine Seiten oder keine Klassen,
ist das kein "bestanden" -- dann hat sie nichts gemessen und sagt es.
GEGENPROBE am Ende: Eine erfundene Klasse muss auffallen, und eine
echte darf es nicht. */
import { readFileSync, readdirSync, existsSync } from "node:fs";
import { join, dirname, resolve } from "node:path";
import { fileURLToPath } from "node:url";
const HIER = dirname(fileURLToPath(import.meta.url));
const WURZEL = resolve(HIER, "..");
const WS = join(WURZEL, "workspace");
let fehler = 0;
const ok = (b, t) => { console.log((b ? " ok " : " FEHL ") + t); if (!b) fehler++; };
/* ---------- Welche Stylesheets bindet eine Seite ein? -------------------- */
/** Liest ein Stylesheet und folgt seinen @import-Zeilen. */
function cssMitImporten(pfad, gesehen = new Set()) {
const echt = resolve(pfad);
if (gesehen.has(echt) || !existsSync(echt)) return "";
gesehen.add(echt);
const text = readFileSync(echt, "utf8");
let alles = text;
for (const m of text.matchAll(/@import\s+(?:url\()?["']([^"')]+)["']\)?/g)) {
alles += "\n" + cssMitImporten(join(dirname(echt), m[1].split("?")[0]), gesehen);
}
return alles;
}
/** Alle Klassennamen, die ein CSS-Text definiert. */
function definierteKlassen(css) {
const raus = new Set();
/* Erst Kommentare weg: In diesem Haus stehen lange Erklärungen im
CSS, und dort kommen Klassennamen als Fließtext vor ("wie
.wahl__knopf in dateien.css"). Die zählen nicht als Definition --
sonst würde ausgerechnet der Kommentar, der den Fehler beschreibt,
ihn verdecken. */
const ohne = css.replace(/\/\*[\s\S]*?\*\//g, " ");
for (const m of ohne.matchAll(/\.(-?[A-Za-z_][\w-]*)/g)) raus.add(m[1]);
return raus;
}
/* ---------- Welche Klassen vergibt eine Seite? --------------------------- */
/** Klassen aus dem HTML. */
function klassenAusHtml(html) {
const raus = new Set();
const ohneKommentar = html.replace(/<!--[\s\S]*?-->/g, " ");
for (const m of ohneKommentar.matchAll(/\bclass\s*=\s*["']([^"']+)["']/g)) {
for (const k of m[1].split(/\s+/)) if (k) raus.add(k);
}
return raus;
}
/** Klassen aus JavaScript. Nur die Formen, die dieses Haus benutzt --
* ein vollständiger Parser wäre hier Aufwand ohne Ertrag. */
function klassenAusJs(js) {
const raus = new Set();
const ohne = js.replace(/\/\*[\s\S]*?\*\//g, " ");
const muster = [
/\.className\s*=\s*['"]([^'"]+)['"]/g,
/setAttribute\(\s*['"]class['"]\s*,\s*['"]([^'"]+)['"]/g,
/class\s*=\s*\\?["']([^"'\\]+)/g, // in Template-Literalen
];
for (const m of muster) {
for (const t of ohne.matchAll(m)) {
for (const stueck of t[1].split(/['",\s]+/)) {
const k = stueck.trim();
/* Nur echte Klassennamen -- keine Variablen, keine Ausdrücke. */
if (k && /^-?[A-Za-z_][\w-]*$/.test(k)) raus.add(k);
}
}
}
/* classList.add() BRAUCHT eine eigene Behandlung.
Der erste Entwurf nahm den ganzen Klammerinhalt und zerlegte ihn
an Anführungszeichen und Kommas. Bei
classList.add(i === 0 ? 'marke__haupt' : 'marke__leise')
fiel dabei `i` als angebliche Klasse heraus -- und die Prüfung
meldete auf sechzehn Seiten eine fehlende Klasse `.i`, die es nie
gab. Eine Warnung, die falsch ist, ist schlimmer als keine: Sie
kostet Zeit und wird beim nächsten Mal überlesen.
Deshalb werden hier NUR die Zeichenketten gelesen, nie der
Ausdruck drumherum. */
for (const t of ohne.matchAll(/classList\.(?:add|remove|toggle)\(([^)]*)\)/g)) {
for (const s of t[1].matchAll(/['"]([^'"]+)['"]/g)) {
for (const k of s[1].trim().split(/\s+/)) {
if (k && /^-?[A-Za-z_][\w-]*$/.test(k)) raus.add(k);
}
}
}
return raus;
}
/** Welche eigenen Skripte bindet die Seite ein? */
function skripteVon(html) {
const raus = [];
for (const m of html.matchAll(/<script[^>]+src\s*=\s*["']([^"']+)["']/g)) {
const p = m[1].split("?")[0];
if (/^https?:/.test(p)) continue; // fremde Skripte nicht
raus.push(join(WS, p.replace(/^\//, "").replace(/^workspace\//, "")));
}
return raus;
}
function stylesheetsVon(html) {
const raus = [];
for (const m of html.matchAll(/<link[^>]+rel\s*=\s*["']stylesheet["'][^>]*>/g)) {
const h = /href\s*=\s*["']([^"']+)["']/.exec(m[0]);
if (!h || /^https?:/.test(h[1])) continue;
raus.push(join(WS, h[1].split("?")[0].replace(/^\//, "").replace(/^workspace\//, "")));
}
return raus;
}
/* Klassen, die absichtlich kein CSS haben. Jede Ausnahme braucht einen
Grund -- eine Liste ohne Begründung wächst, bis sie alles enthält. */
const OHNE_CSS = new Set([
"leise", // Grundstil, steht in gate.css als Elementregel
]);
const OHNE_CSS_PRAEFIX = ["js-", "u-"]; // reine Anfasser, nie gestaltet
/* =======================================================================
Die Messung
======================================================================= */
console.log("\n=== Ist jede benutzte Klasse auf ihrer Seite auch definiert? ===");
const seiten = readdirSync(WS).filter((n) => n.endsWith(".html"));
/* DIE ANZAHL GEHOERT IN DIE BEDINGUNG, nicht nur in den Meldetext.
Findet die Prüfung keine Seiten, hat sie nichts gemessen -- und
"0 von 0 Klassen fehlen" wäre grün und wertlos. */
ok(seiten.length >= 10, `${seiten.length} Workspace-Seiten gefunden`);
/* ALLES CSS DES HAUSES -- für die entscheidende Unterscheidung.
Eine Klasse ohne CSS ist zweierlei, und nur eines davon ist ein
Fehler:
(a) NIRGENDS gestaltet. Ein reiner Struktur-Anker wie
`.k-wdh__ende`, der nur ein <div> benennt. Kein Fehler --
sonst müsste man jedem Container Deko andichten.
(b) Gestaltet, aber in einer Datei, die DIESE SEITE NICHT LÄDT.
Das ist der Fehler von heute: Jemand hat es gestaltet, es
sieht im Editor richtig aus, und auf der Seite kommt nichts
an. Niemandem fällt es auf, weil das CSS ja existiert.
Nur (b) schlägt an. */
const ALLE_CSS = definierteKlassen(
readdirSync(join(WS, "assets/css")).filter((n) => n.endsWith(".css"))
.map((n) => readFileSync(join(WS, "assets/css", n), "utf8")).join("\n"));
let geprueft = 0;
const luecken = []; // (b) -- gestaltet, aber nicht hier
const ungestaltet = []; // (a) -- nur zur Ansicht
for (const seite of seiten) {
const html = readFileSync(join(WS, seite), "utf8");
const css = stylesheetsVon(html).map((p) => cssMitImporten(p)).join("\n");
const definiert = definierteKlassen(css);
const benutzt = klassenAusHtml(html);
for (const skript of skripteVon(html)) {
if (!existsSync(skript)) continue;
for (const k of klassenAusJs(readFileSync(skript, "utf8"))) benutzt.add(k);
}
for (const k of benutzt) {
if (OHNE_CSS.has(k)) continue;
if (OHNE_CSS_PRAEFIX.some((p) => k.startsWith(p))) continue;
geprueft++;
if (definiert.has(k)) continue;
if (ALLE_CSS.has(k)) luecken.push(`${seite}: .${k}`);
else ungestaltet.push(`${seite}: .${k}`);
}
}
/* Auch hier die Anzahl in die Bedingung: Wären alle Muster kaputt und
fänden nichts, stünde sonst "0 Lücken" da -- grün, ohne je eine
Klasse angesehen zu haben. */
ok(geprueft > 200, `${geprueft} Klassenverwendungen geprüft`);
/* NACH KLASSE GRUPPIERT, nicht nach Seite. Eine fehlende Klasse auf
sechzehn Seiten ist EIN Fehler, nicht sechzehn -- und wer sechzehn
fast gleiche Zeilen liest, überliest die siebzehnte, die etwas
anderes sagt. */
const nachKlasse = new Map();
for (const eintrag of luecken) {
const [seite, klasse] = eintrag.split(": .");
if (!nachKlasse.has(klasse)) nachKlasse.set(klasse, []);
nachKlasse.get(klasse).push(seite);
}
const bericht = [...nachKlasse.entries()]
.sort((a, b) => b[1].length - a[1].length)
.map(([k, s]) => `.${k} — fehlt auf ${s.length} Seite${s.length === 1 ? "" : "n"}`
+ ` (${s.slice(0, 3).join(", ")}${s.length > 3 ? " …" : ""})`);
ok(luecken.length === 0 && geprueft > 200,
luecken.length
? `${nachKlasse.size} Klasse${nachKlasse.size === 1 ? "" : "n"} sind gestaltet, aber nicht auf ihrer Seite:`
+ `\n ${bericht.join("\n ")}`
: `jede gestaltete Klasse kommt auch auf ihrer Seite an`);
/* Kein Fehler, nur zur Kenntnis: Klassen, die es nirgends gibt. Meist
Struktur-Anker; gelegentlich aber ein Tippfehler, der hier auffällt,
bevor jemand sich wundert, warum nichts passiert. */
const nurAnker = new Set(ungestaltet.map((e) => e.split(": .")[1]));
console.log(` -- ${nurAnker.size} Klassen sind nirgends gestaltet `
+ `(Struktur-Anker, kein Fehler): ${[...nurAnker].slice(0, 8).join(", ")}`
+ (nurAnker.size > 8 ? " …" : ""));
/* =======================================================================
Schriftgrößen: nichts unter 11,5 Pixeln
=======================================================================
ZUM ZWEITEN MAL AM SELBEN TAG (06.09.2026). Erst hatten die
Art-Plaketten des Tagesblicks 10,56 px, dann -- nach der Korrektur --
die neue "JETZT"-Marke 10,88. Beide Male gemeldet von pruef-handy
und pruef-grosscheck, beide Male erst nach einem Browserlauf von
mehreren Minuten.
Die Regel steht seit dem 01.09.2026 im Haus: Unter 11,5 px liest auf
einem Handy niemand mehr, und was dort niemand liest, ist auf dem
Rechner nur Zierde. Sie wurde bisher nur AM BILD geprüft. Hier wird
sie an der Quelle geprüft -- in Sekunden statt in Minuten, und
bevor überhaupt jemand einen Browser startet.
WARUM BEIDE PRÜFUNGEN BLEIBEN: Diese hier findet den Wert im
Stylesheet. Sie kann nicht wissen, ob eine Regel am Ende überhaupt
greift oder von einer späteren überschrieben wird -- das sieht nur
der Browser. Die eine ist schnell und ungenau, die andere langsam
und genau. Zusammen fangen sie beides ab.
GERECHNET WIRD MIT 16 px Grundgröße: 0,72 rem = 11,52 px ist gerade
noch erlaubt, 0,71 rem = 11,36 px nicht mehr. */
console.log("\n=== Ist irgendeine Schrift zu klein? ===");
{
const GRENZE_PX = 11.5;
const GRUND_PX = 16;
let gemessen = 0;
const zuKlein = [];
for (const datei of readdirSync(join(WS, "assets/css")).filter((n) => n.endsWith(".css"))) {
const text = readFileSync(join(WS, "assets/css", datei), "utf8")
.replace(/\/\*[\s\S]*?\*\//g, " "); // Kommentare weg
for (const treffer of text.matchAll(/font-size:\s*([\d.]+)(rem|em|px)/g)) {
const wert = Number(treffer[1]);
const einheit = treffer[2];
/* `em` hängt von der Umgebung ab und lässt sich hier nicht
ausrechnen -- solche Stellen werden nicht gezählt, statt sie zu
raten. Sie sind selten und die Browserprüfung sieht sie. */
if (einheit === "em") continue;
const px = einheit === "px" ? wert : wert * GRUND_PX;
gemessen++;
if (px < GRENZE_PX) {
const zeile = text.slice(0, treffer.index).split("\n").length;
zuKlein.push(`${datei}:${zeile} → ${treffer[1]}${einheit} = ${px.toFixed(2)} px`);
}
}
}
/* DIE ANZAHL GEHÖRT IN DIE BEDINGUNG: Fände das Muster gar nichts,
stünde sonst "0 zu kleine" da -- grün, ohne je eine Größe
angesehen zu haben. */
ok(gemessen > 150, `${gemessen} Schriftgrößen im Stylesheet geprüft`);
/* EINE GRUNDLINIE, KEIN WUNSCHWERT -- dasselbe Vorgehen wie beim
Layout-Sprung in pruef-tempo-workspace.
Im Bestand stehen 43 solche Stellen. Sie alle zu ändern wäre ein
Eingriff ins Aussehen von dreizehn Stylesheets, kein Fehlerfix --
und die Browserprüfung (pruef-handy) beanstandet davon nur die,
die auf einem Handy WIRKLICH sichtbar sind. Viele greifen dort
gar nicht oder werden überschrieben.
Eine Prüfung, die vom ersten Tag an rot ist, wird weggeklickt --
und mit ihr die echte Warnung. Sie hält deshalb den heutigen Stand
fest und schlägt an, sobald es MEHR werden. Genau das hätte heute
zweimal gegriffen: erst bei den Art-Plaketten (10,56 px), dann bei
der Jetzt-Marke (10,88) -- beide Male hätte es Minuten statt eines
Browserlaufs gekostet.
Wird der Bestand irgendwann aufgeräumt, gehört die Zahl gesenkt.
Sie steht hier als Zahl und nicht als Liste, damit niemand eine
neue Stelle in eine Ausnahmeliste einträgt und sie damit
stillschweigend erlaubt. */
const GRUNDLINIE = 43;
ok(zuKlein.length <= GRUNDLINIE && gemessen > 150,
zuKlein.length > GRUNDLINIE
? `${zuKlein.length} Stellen unter ${GRENZE_PX} px — das sind `
+ `${zuKlein.length - GRUNDLINIE} MEHR als die Grundlinie ${GRUNDLINIE}. `
+ `Neu hinzugekommen ist vermutlich eine davon:\n `
+ zuKlein.slice(-6).join("\n ")
: `${zuKlein.length} Stellen unter ${GRENZE_PX} px `
+ `(Grundlinie ${GRUNDLINIE}, nicht mehr geworden)`);
if (zuKlein.length && zuKlein.length <= GRUNDLINIE) {
console.log(` -- davon im Bestand: ${zuKlein.slice(0, 3).join(" · ")} …`
+ ` — sichtbar sind sie laut pruef-handy nicht, sonst stünden sie dort`);
}
/* GEGENPROBE: Erkennt die Rechnung beide Einheiten -- und lässt sie
einen erlaubten Wert in Ruhe? Ohne das wäre "0 Treffer" wertlos. */
const probe = ".a { font-size: .68rem; } .b { font-size: 10px; } .c { font-size: .95rem; }";
const gefunden = [...probe.matchAll(/font-size:\s*([\d.]+)(rem|em|px)/g)]
.map(([, w, e]) => (e === "px" ? Number(w) : Number(w) * GRUND_PX))
.filter((px) => px < GRENZE_PX);
ok(gefunden.length === 2,
`Gegenprobe: von drei Größen werden die zwei zu kleinen erkannt `
+ `(${gefunden.map((p) => p.toFixed(2)).join(", ")} px), die dritte nicht`);
}
/* =======================================================================
GEGENPROBE — die Messung muss beides können
======================================================================= */
console.log("\n=== Gegenprobe ===");
{
/* 1. Der echte Fehler von heute, nachgestellt: eine Seite, die eine
Klasse benutzt, deren CSS in einem nicht eingebundenen
Stylesheet steht. */
const definiert = definierteKlassen(".k-dabei__knopf { color: red; }");
ok(definiert.has("k-dabei__knopf"), "eine definierte Klasse wird erkannt");
ok(!definiert.has("gibt-es-nicht"), "eine erfundene Klasse wird NICHT erkannt");
/* 2. Klassen aus JavaScript werden wirklich mitgelesen -- sonst wäre
genau der heutige Fall unsichtbar geblieben, denn die Wahl wird
komplett aus JS gebaut und steht in keinem HTML. */
const ausJs = klassenAusJs("b.className = 'k-dabei__knopf';\nx.classList.add('offen');");
ok(ausJs.has("k-dabei__knopf") && ausJs.has("offen"),
"Klassen aus className und classList.add werden gefunden");
/* 3. Ein Klassenname, der nur im KOMMENTAR steht, gilt nicht als
definiert. Sonst hätte ausgerechnet die Erklärung dieses Fehlers
ihn zugedeckt. */
const nurKommentar = definierteKlassen("/* wie .wahl__knopf in dateien.css */\n.echt { color: red; }");
ok(!nurKommentar.has("wahl__knopf") && nurKommentar.has("echt"),
"ein Klassenname aus einem Kommentar zählt nicht als Definition");
/* 4. Und der Beweis am echten Bestand: Die Wahl im Kalender muss
JETZT gedeckt sein -- vor der Reparatur wäre genau das rot. */
const kal = readFileSync(join(WS, "kalender.html"), "utf8");
const kalCss = definierteKlassen(stylesheetsVon(kal).map((p) => cssMitImporten(p)).join("\n"));
const noetig = ["k-dabei", "k-dabei__knopf", "k-dabei__zeichen", "k-dabei__name",
"k-dabei__titel", "k-dabei__liste", "k-dabei__gruppe", "k-dabei__haken", "k-dabei__punkt"];
const fehlend = noetig.filter((k) => !kalCss.has(k));
ok(fehlend.length === 0 && noetig.length === 9,
fehlend.length ? `im Kalender fehlt CSS für: ${fehlend.join(", ")}`
: `alle ${noetig.length} Klassen der Teilnehmerwahl sind in kalender.css definiert`);
/* 5. Und die alten Klassen sind wirklich weg -- nicht nur die neuen
da. Ein halber Umbau hinterlässt beides. */
const kalJs = readFileSync(join(WS, "assets/js/kalender.js"), "utf8");
ok(!/wahl__knopf|wahl__rolle|wahl__name/.test(kalJs.replace(/\/\*[\s\S]*?\*\//g, " ")),
"die alten .wahl__*-Klassen stehen nicht mehr im Kalender-Skript");
/* 6. DIE WICHTIGSTE GEGENPROBE: Unterscheidet die Prüfung die beiden
Fälle wirklich? Der ganze Wert hängt daran -- ohne sie könnte
die Bedingung "ALLE_CSS.has(k)" verdreht sein, und die Prüfung
wäre grün, während sie den echten Fehler durchwinkt.
Nachgestellt wird der Fall von heute an einem Miniaturbeispiel:
Zwei Klassen, beide ohne CSS auf ihrer Seite -- eine davon
woanders gestaltet, die andere nirgends. */
const seitenCss = definierteKlassen(".nur-hier { color: red; }");
const hausCss = definierteKlassen(".nur-hier { color: red; } .woanders { color: blue; }");
const fallB = !seitenCss.has("woanders") && hausCss.has("woanders");
ok(fallB, fallB
? "gestaltet, aber nicht auf dieser Seite → wird als Fehler erkannt"
: "MISSLUNGEN — der eigentliche Fehlerfall würde durchgehen");
const fallA = !seitenCss.has("blosser-anker") && !hausCss.has("blosser-anker");
ok(fallA, fallA
? "nirgends gestaltet → gilt als Struktur-Anker, kein Fehler"
: "MISSLUNGEN — Struktur-Anker würden fälschlich anschlagen");
/* 7. Und der Fehlalarm, den es schon gab, darf nicht zurückkommen:
`classList.add(i === 0 ? 'a' : 'b')` hatte `i` als Klasse
gemeldet -- auf sechzehn Seiten. */
const ausAusdruck = klassenAusJs("x.classList.add(i === 0 ? 'marke__haupt' : 'marke__leise');");
ok(!ausAusdruck.has("i") && ausAusdruck.has("marke__haupt") && ausAusdruck.has("marke__leise"),
"aus classList.add(bedingung ? 'a' : 'b') werden beide Klassen gelesen, aber nicht die Variable");
}
/* =======================================================================
DIE SIEBEN KOPIEN DER MODULLISTE MÜSSEN GLEICH SEIN
module.css beschreibt die Form aller Module -- Silhouette,
Kantenlicht, Raster, Handy, Kontrastmodus. Dieselbe Klassenliste
steht dafür siebenmal in der Datei (im Kontrastmodus dreimal); CSS
kennt keine Variable für Selektoren.
Das ist die verwundbare Stelle: Wer eine Karte hinzufügt und nur
sechs der sieben Stellen pflegt, bekommt eine Karte MIT Schräge und
OHNE Kantenlicht -- und niemandem fällt es auf, weil nichts kaputt
geht. Genau diese Sorte stiller Abweichung fängt hier eine Prüfung
ab, statt sich auf Sorgfalt zu verlassen.
======================================================================= */
console.log("\n=== module.css: die Modulliste steht siebenmal — und überall gleich");
{
const pfad = join(WURZEL, "workspace/assets/css/module.css");
const text = readFileSync(pfad, "utf8");
/* Jede Kopie ist mit `/* MODULLISTE *​/` markiert; gelesen wird die
Klammer des `:is(...)` direkt danach. */
const listen = [];
const marke = /\/\* MODULLISTE \*\/\s*:is\(([^)]*)\)/g;
for (let t; (t = marke.exec(text)) !== null; ) {
listen.push(t[1].split(",").map((s) => s.trim()).filter(Boolean));
}
/* Die Anzahl gehört in die BEDINGUNG, nicht nur in den Meldetext:
Fände die Prüfung keine einzige Liste, wäre "alle gleich" sonst
trivial erfüllt -- grün, ohne etwas angesehen zu haben. */
ok(listen.length === 7, `sieben markierte Kopien gefunden (${listen.length})`);
const erste = listen[0] || [];
ok(erste.length >= 30, `die Liste umfasst ${erste.length} Klassen`);
const abweichung = listen.findIndex(
(l) => l.length !== erste.length || l.some((k, i) => k !== erste[i]));
ok(abweichung === -1, abweichung === -1
? "alle sieben Kopien sind Zeichen für Zeichen gleich"
: `Kopie ${abweichung + 1} weicht ab (${listen[abweichung].length} statt ${erste.length} Klassen)`);
/* GEGENPROBE: Der Vergleich muss auch NEIN sagen können. Ohne sie
bewiese die Zeile darüber nur, dass irgendetwas verglichen wurde. */
const geprobt = [erste, erste.slice(0, -1)];
const findetEs = geprobt.findIndex(
(l) => l.length !== erste.length || l.some((k, i) => k !== erste[i]));
ok(findetEs === 1, "eine künstlich verkürzte Kopie wird erkannt");
/* Und die Datei muss auf jeder Seite ZULETZT stehen -- sonst
überschreiben die Seitendateien die Form wieder, so wie es bis zum
07.09.2026 auf vier Seiten der Fall war. */
let zuletzt = 0, gesamt = 0;
for (const seite of readdirSync(join(WURZEL, "workspace")).filter((f) => f.endsWith(".html"))) {
if (seite === "index.html") continue; // die Anmeldeseite lädt sie nicht
const html = readFileSync(join(WURZEL, "workspace", seite), "utf8");
const bl = [...html.matchAll(/<link[^>]+rel="stylesheet"[^>]*>/g)].map((m) => m[0]);
if (!bl.some((z) => z.includes("css/module.css"))) continue;
gesamt++;
if (bl[bl.length - 1].includes("css/module.css")) zuletzt++;
}
ok(gesamt >= 15 && zuletzt === gesamt,
`module.css steht auf allen ${gesamt} Seiten als letzte Stilvorlage (${zuletzt})`);
}
console.log(`\n${fehler === 0 ? "ALLES IN ORDNUNG" : `${fehler} FEHLER`}`);
process.exit(fehler ? 1 : 0);