长期以来因高效而备受推崇的项目管理工具 Linear，已经将其 React 应用程序从 styled-components 迁移至 Meta 原子化 CSS-in-JS 库 StyleX。工程师 Kenneth Skovhus 表示，这次迁移共涉及 1000 多个拉取请求。他早前在个人博客上发布过一篇文章，记录该项目的完成进度为 58%。经过大约五个月的工作，团队已于 2026 年 8 月初完成了这次迁移。
运行时 CSS-in-JS 会让用户在客户端渲染时承担样式生成和规则注入的开销，而在升级到 React 18 的并发渲染后，Linear 切身感受到了这一代价，大约就在 styled-components 进入维护模式的那个时期。来自 Sanity 的 Cody Olsen 甚至发布了一个利用 React 18 useInsertionEffect 进行优化的分支版本，并将其称为“最后的手段”。该方案将 Linear 的渲染时间缩短了 40%。第二个原因是封装问题，像 styled(Button) 这样的模式使得从外部重新设计组件变得过于容易，而随着编码代理的使用日益增多，团队希望刻意增加这种操作的难度。
StyleX 将样式生成移至构建阶段，并输出无冲突的原子类。下面是一个典型的定义：
import * as stylex from '@stylexjs/stylex';const styles = stylex.create({ box: { padding: 16, color: 'blue' },});Linear 评估了大多数 React 样式选项，发现 vanilla-extract 是最接近的替代方案，但因其 API 零散且样式文件分散而没有采用。为了避免手动迁移，Skovhus 构建了一个确定性的 codemod，目前已经处理了超过 500 个 PR 和大约 10 万行代码，并配有在线演练环境。如果其他团队想尝试类似的转型，可以从 StyleX 文档入手，借助 Oxlint 制定自定义规则，并像 Linear 那样将 CSS Modules 作为处理全局选择器的备用方案。按照 Linear 的说法，这次改造带来的收益包括：在视图密集型页面上的主线工作量减少了 20% 至 35%，在中端机器上的导航速度提升了约 30%，而且页面切换时不再注入任何 CSS 规则。
这一举措正值 StyleX 掀起一股热潮之际。正如 This Week in React 所指出的那样，在 Cursor 自身从 Tailwind 切换过来，以及 Meta 开源 Astryx 设计系统之后，该库在 X 平台上大受欢迎。在 Syntax 上，Scott Tolinski 和 Wes Bos 探讨了为何人人都转向 StyleX，并得出结论：这种额外的严格性对人类来说并不有趣，但自动化工具却能从中获益。曾经在雅虎负责过类似原子化系统的资深工程师 Reid Burke 提醒各团队，要警惕选择庞大的 API 接口所带来的陷阱，因为 styled-components 开放且图灵完备的 API 正是导致自动化如此困难的根源。
GitHub 上有一场题为“使用 StyleX 很棒，但规范限制太严”的讨论，反映出人们对父元素依赖选择器和全局选择器这些限制的普遍不满。
Linear 是一款专为软件团队打造的项目管理和问题跟踪工具，长期以来以键盘驱动的界面和对速度的重视而著称。StyleX 是 Meta 推出的开源原子化 CSS-in-JS 库。它将样式生成移至构建阶段，并生成小巧且互不冲突的原子类，而非在应用运行时注入 CSS。Facebook、Instagram 和 WhatsApp 的网页版均使用了这个库。随着各技术团队开始寻求以牺牲部分运行时灵活性为代价，换取可预测的稳定性能与更严格的组件边界，该库也获得了更广泛的行业关注。
