Powrót CSS‑in‑JS i konsekwencje React 19: Panda, StyleX, Pigment, Restyle oraz wydajność
Published on 27.10.2025
Bytes #298 — CSS‑in‑JS is so back
TLDR: Coraz więcej nowych bibliotek stylowania dla Reacta powraca do podejścia CSS‑in‑JS, napędzane przez zmiany w React (np. RSC i nowe możliwości hoistowania styli) oraz chęć połączenia ergonomii z wydajnością. To mniej nostalgiczny, a bardziej ewolucyjny powrót: nowe implementacje unikają dawnych kompromisów serwer‑klient.
Bytes #298 — CSS‑in‑JS is so back
Panda CSS — Build modern websites using build time and type-safe CSS‑in‑JS
TLDR: Panda CSS to biblioteka generująca CSS w czasie buildu, z naciskiem na typowanie TypeScript, wzorce (recipes) i kompatybilność z RSC — obietnica: zero runtime przy dobrym DX. To przykład podejścia „CSS‑in‑JS, ale bez kosztu runtime”.
Introducing StyleX
TLDR: StyleX od Meta to system stylowania oparty na compile‑time transformacjach, dający atomowe klasy, przewidywalność specyficzności i wsparcie typów — optymalizowany pod ogromne codebase’y i wydajność przeglądarek.
A preview of Pigment CSS — the next generation of CSS‑in‑JS (MUI)
TLDR: Pigment CSS to zero‑runtime CSS‑in‑JS stworzony przez MUI, zaprojektowany z myślą o kompatybilności z React Server Components i migracji użytkowników MUI z Emotion bez konieczności dużych zmian w API.
A preview of Pigment CSS — MUI
Restyle — Zero Config CSS for React
TLDR: Restyle to biblioteka oferująca „zero config” stylowanie: styled components, style props, css function i css prop, ze wsparciem dla wariantów, pseudo‑selektorów i themingu — skupiona na prostocie użycia i elastyczności.
Restyle — Zero Config CSS for React
React 19 and Suspense — A Drama in 3 Acts (TkDodo)
TLDR: React 19 wprowadził zmianę w zachowaniu Suspense: rodzeństwo w tym samym boundary przestało domyślnie ładować równolegle, co dla wielu bibliotek takich jak react‑query wygenerowało nieoczekiwane „waterfall” podczas fetchowania danych. To uderza w optymalizacje i wymaga przemyślenia wzorców użycia Suspense.
React 19 and Suspense — A Drama in 3 Acts
How React 19 (Almost) Made the Internet Slower — The Miners
TLDR: Analiza pokazuje, że zmiana w React 19 związana z Suspense może znacząco pogorszyć wydajność wielu aplikacji poprzez wprowadzenie sekwencyjnego ładowania danych zamiast równoległego; tuż obok technicznych wyjaśnień znajdziemy rekomendacje jak temu zapobiec.
How React 19 (Almost) Made the Internet Slower
Performance testing in CI: Let's break the build! (SpeedCurve)
TLDR: Włączenie testów wydajności do pipeline’u CI i „łamanie buildu” przy przekroczeniu budgetów to skuteczny sposób, by zapobiegać regresjom wydajności w dłuższej perspektywie. To nie tylko techniczny krok, ale zmiana procesu.
Performance testing in CI: Let's break the build!
NEW: RUM attribution and subparts for Interaction to Next Paint (SpeedCurve)
TLDR: SpeedCurve rozszerza diagnostykę RUM dla Interaction to Next Paint (INP) o atrybucję elementu i „subparts” (input delay, processing, presentation), co znacznie ułatwia lokalizowanie źródeł opóźnień w responsywności.
RUM attribution and subparts for Interaction to Next Paint
Disclaimer: This article was generated using newsletter-ai powered by claude-sonnet-4-20250514 LLM. While we strive for accuracy, please verify critical information independently.