将 Linear 从 styled-components 迁移至 StyleX

本文详细介绍了 Linear 团队将前端样式方案从 styled-components 迁移到 StyleX 的过程。文章讨论了迁移背后的动机，包括性能优化、构建时样式提取以及更好的类型安全。同时分享了迁移过程中遇到的实际挑战、技术决策以及最终取得的成果，为其他考虑迁移到 StyleX 的团队提供了有价值的经验参考。

背景速读

- Linear 是一个知名的项目管理工具（SaaS），其团队用 React 构建了一套复杂的前端 UI。该博客来自 Linear 的工程师，分享他们将代码库从 styled-components 迁移到 StyleX 的经验。 - styled-components 是 React 生态中长期流行的“CSS-in-JS”库，允许在 JavaScript 里写样式，但运行时开销较大，会影响性能。 - StyleX 是 Meta（Facebook）开源的 CSS-in-JS 解决方案，核心特点是“零运行时”——在构建阶段将样式编译为普通 CSS 文件，从而减少浏览器端的计算负担。 - 迁移的核心动机：减少运行时开销以提升性能（尤其是在 Linear 这样高度交互、频繁重渲染的 UI 中），同时保持开发体验和类型安全。 - 这次迁移也反映了行业内从运行时 CSS-in-JS 向编译时 / 零运行时方案（如 StyleX、Vanilla Extract、Panda CSS）转移的趋势。