- Spegnimento
- 2 settembre 2026 alle ore 09:08 UTC
- Autore
- kamo
- Impegno
- d473a2c
internal.kamocrm.com stava servendo un documento di 1.34 MB contenente 123 `css-xxxx` nomi di classe — `MuiBox-root css-e26q24` tra loro — e non una regola per loro. Un browser dipinge esattamente come indicato, e ciò che dà è il segnalato flash: il nav's "Loading..." come un non-stile ` < jammed nell'angolo in alto a sinistra, e gli otto elementi `MuiSvgIcon` ` <svg>` accanto a esso a 300x150 a pezzo, che essendo la dimensione che un elemento sostituito prende quando nulla le dimensioni e le icone MUI non portare nessun attributo di larghezza o altezza. Poi l'idratazione corse, l'emozione inserita ogni regola lato client, e la pagina è scattata in posizione. Il guscio è stato in HTML da `perf(sr): server-render l'autenticazione app`, e vale la pena mantenere — è la differenza tra un documento con 16 KB di DOM reale in esso e uno con quasi nessuno. Ciò che ha fatto è stato rendere l'applicazione dipende da qualcosa che nulla afferma qui: che i nomi di classe emozione scrive in quel markup arrivare con le loro regole. L'emozione decide che per render, dalla sua lettura dell'ambiente, e non c'è modo di vedere dall'interno dell'app se ha avuto ragione. Niente getti, niente tronchi, niente test che rende un componente avvisi, e la pagina è corretta poche centinaia Millisecondi dopo. Una ricostruzione ha da allora prodotto un'immagine che li emette, che è l'altra metà del problema: il comportamento non è nostro da dipendere. Così è dichiarato invece di assunto. EmotionRegistry rende l'albero attraverso un cache in modalità compat, raccoglie ciò che la cache inserisce e lo emette attraverso `useServerInsertedHTML`, che non chiede nulla sull'ambiente. Misura contro l'applicazione reale: un ` <style>` in ` <head>`, 48.5 KB, definendo tutti i 58 del classi gli usi di markup serviti, al posto di 71 tag sparsi per il corpo — prima del markup piuttosto che interleaved con esso. Key `css`, che è il default di emozione, quindi nessun nome di classe cambia ovunque; è anche la chiave il lato browser `createCache` cerca quando adotta un elemento server-rendered `style[data-emotion]`, che è ciò che blocca il client inserendo tutte le 58 alla seconda volta. Non sospeso: l'ordine non decide nulla qui dentro o direzione, dal `app/globals.css` e il tema white-label CSS contengono no `.Mui` selettore a tutti e `tailwind.config.js` imposta `importante: true`. `@emotion/cache` era già nell'albero come dipendenza di `@emotion/react`; questo lo dichiara, alla versione già risolta, quindi l'ingresso del file di blocco fa non spostare e `npm ci` installa esattamente quello che ha installato prima. Guardiato, perché il fallimento è invisibile a tutto il resto nel repository. check-emotion-ssr non riesce se il registro viene cancellato o se un fornitore viene issato sopra di esso — che avrebbe tranquillamente prendere gli stili di quel subtree di nuovo fuori documento — ed entrambi i fallimenti sono stati confermati per essere catturati prima che la guardia fosse cablato in `npm test`. Verificato: il foglio di stile emesso copre ogni classe nel markup servito, con tra di loro, passano tutte e 13 le guardie. tsc non riferisce nulla di nuovo; vitest è allo stesso 30 fallimenti preesistenti come origine/main è su questa macchina (@kamo/* pacchetti dietro il file di blocco localmente).