Senden Sie MUI-Stile mit dem Markup, das sie braucht

Fixkamo-internal
Verschifft
2. September 2026 um 09:08 UTC
Autor
kamo
Ausschuss
d473a2c

internal.kamocrm.com servierte ein Dokument mit 1,34 MB, das 123 "css-xxxx" enthielt. Klassennamen -MuiW-root css-e26q24" darunter - und keine Regel für einen von sie. Ein Browser malt, dass genau wie gegeben, und was es gibt, ist die berichtet Blitz: das "Loading" des nisten "Loading"... als unstyled .<h6" in der oberen linken Ecke eingeklemmt, und die acht "MuiSvgIcon"-Elemente daneben bei 300x150 pro Stück, die ist die Größe ein ersetztes Element nimmt, wenn nichts es und MUI-Symbole keine Breite oder Höhe Attribut tragen. Dann lief die Flüssigkeitszufuhr, Emotionen eingefügt Regel Client-Seite, und die Seite an Ort und Stelle geschnappt. Die Shell ist im HTML seit .perf(ssssr): server-render die authentifizierte app, und das ist es wert zu halten. Es ist der Unterschied zwischen einem Dokument mit 16 KB von realem DOM darin und einer mit fast keiner. Was es auch tat, war die Anwendung hängt von etwas ab, was hier behauptet: dass die Klassennamen Emotionen schreiben in diesen Markup kommen mit ihren Regeln. Emotion entscheidet, dass pro Render, aus seiner eigenen Lektüre der Umwelt, und es gibt keine Möglichkeit zu sehen aus dem Inneren der App, ob es richtig. Nichts wirft, nichts protokolliert, nein Test, der eine Komponente Mitteilungen macht, und die Seite ist richtig ein paar hundert Millisekunden später. Ein Umbau hat inzwischen ein Bild hervorgebracht, das sie aussendet, das ist die andere Hälfte des Problems: Das Verhalten ist nicht unsers, auf das wir uns verlassen müssen. So wird es gesagt, anstatt angenommen. EmotionRegistry macht den Baum durch eine cache im compat-Modus, sammelt, was dieser Cache eingelegt, und emittiert es durch "useServerInsertedHTML", das nichts über die Umgebung fragt. Gemessen gegen die reale App: eins "<style" in -<head", 48,5 KB, alle 58 der definiert Klassen die servierte Markup verwendet, anstelle von 71 Tags verstreut den Körper vor dem Markup, anstatt mit ihm zu interversieren. Key "css", das ist Emotion Standard, so dass sich kein Klassenname irgendwo ändert; es ist auch der Schlüssel der Browser-Seite "Cache" sucht, wenn es eine server-rendered "style[data-emotion]"-Element, das ist, was den Client stoppt Einfügen alle 58 ein zweites Mal. Nicht vorbestellt: Ordnung entscheidet hier in entweder Richtung, da "app/globals.css" und das White-Label-Thema CSS enthalten Nein.Mui' Selektoren überhaupt und "tailwind.config.js" setzt "wichtig: wahr". Im Baum befand sich bereits die Abhängigkeit von "@emotion/react"; Dies erklärt es, bei der bereits aufgelösten Version, so dass der Lockfile-Eintrag nicht bewegen und "npm ci" installiert genau das, was es vorher installiert hat. Bewacht, weil der Ausfall für alles andere im Repository unsichtbar ist. check-emotionssssr scheitert, wenn die Registrierung gelöscht wird oder ein Anbieter gehievt wird darüber - was ruhig nehmen würde, dass subtree Stile wieder aus der Dokument - und beide Ausfälle wurden bestätigt, gefangen zu werden, bevor die Wache war verkabelt in "npm Test". Geprüft: das emittierte Stylesheet deckt jede Klasse in der servierten Markup, mit ************ unter ihnen; alle 13 anderen Wachen passieren; tsc berichtet nichts Neues; vitest ist bei den gleichen 30 bereits bestehenden Ausfällen wie origin/main ist auf dieser Maschine (@kamo/* Pakete hinter der Lockdatei lokal).

Alle Änderungen

Wie, was Sie sehen Versand?

Jedes dieser Updates landet automatisch in Ihrem Arbeitsbereich. Starten Sie frei und beobachten Sie es Woche für Woche wachsen.

Free Forever startenPreisgestaltung anzeigen