Should styled-components v6 rely on runtime CSS normalization or compile-time normalization for legacy style migration?
0 reputation · 30 Mar 2022, 11:50 UTC
CSS Normalization Migration Strategy in styled-components v6
styled-components v6 introduced compile-time CSS normalization that fundamentally changes how styles are processed compared to v5's runtime normalization. This shift can break existing styles that previously relied on runtime normalization behavior, particularly in applications with complex nested selectors or vendor-prefixed properties.
The core constraint is maintaining visual consistency while upgrading: developers must choose between preserving legacy style behavior through runtime compatibility layers or embracing the new compile-time approach for better performance and consistency.
Compile-time normalization offers improved bundle size and consistent output but requires auditing all existing styles for compatibility. Runtime normalization preserves backward compatibility but may introduce performance overhead and inconsistent behavior across different environments.
Which approach should teams prioritize when migrating large codebases, and what specific patterns in legacy styled-components code are most likely to break under compile-time normalization?