Linear历时五个月、超千个PR完成从styled-components迁移至StyleX

项目管理工具 Linear 已将其 React 应用从 styled-components 迁移至 Meta 的原子化 CSS-in-JS 库 StyleX。工程师 Kenneth Skovhus 表示，此次迁移共涉及 1000 多个拉取请求，经过约五个月工作，团队已于 2026 年 8 月初完成迁移。

迁移的首要动因是性能。运行时 CSS-in-JS 会让客户端在渲染时承担样式生成与规则注入开销，Linear 在升级到 React 18 并发渲染后切身感受到这一代价，时间点大约与 styled-components 进入维护模式同期。来自 Sanity 的 Cody Olsen 曾发布利用 React 18 useInsertionEffect 优化的分支版本，将 Linear 的渲染时间缩短 40%，并称之为“最后的手段”。第二个原因是封装：styled(Button) 这类模式使外部重新设计组件过于容易，而随着编码代理使用增多，团队希望刻意增加这种操作的难度。

StyleX 将样式生成移至构建阶段，输出无冲突的原子类。Linear 评估了大多数 React 样式方案，认为 vanilla-extract 是最接近的替代品，但因其 API 零散、样式文件分散而未采用。为避免手工迁移，Skovhus 构建了确定性 codemod，已处理超过 500 个 PR 和约 10 万行代码，并提供在线演练环境。其他团队若想尝试类似转型，可从 StyleX 文档入手，借助 Oxlint 制定自定义规则，并像 Linear 那样以 CSS Modules 作为处理全局选择器的备用方案。

据 Linear 介绍，改造收益包括：视图密集型页面的主线工作量减少 20% 至 35%，中端机器上导航速度提升约 30%，页面切换时不再注入任何 CSS 规则。此举正值 StyleX 受到更多关注之际，在 Cursor 自身从 Tailwind 切换、Meta 开源 Astryx 设计系统之后，该库在 X 平台上颇受欢迎。不过 GitHub 上也有讨论反映，人们对父元素依赖选择器和全局选择器限制存在普遍不满。