我们很高兴地推出 StyleX。StyleX 是一款用于大型应用的表达性、确定性、可靠性和可扩展性样式系统。我们借鉴了之前样式库的最佳理念，创造出既熟悉又独具特色的全新方案。
什么是 StyleX？
StyleX 采用了 CSS-in-JS 库的开发者体验，并利用编译时工具将其与静态 CSS 的性能和可扩展性相结合。然而，StyleX 不仅仅是另一个基于编译器的 CSS-in-JS 库。StyleX 经过精心设计，以满足大型应用程序、可重用组件库和静态类型代码库的要求。
- StyleX 支持 CSS 的表达性子集。它避免了复杂的选取器，并保证生成的 CSS 中没有特异性冲突。
- StyleX 将样式转换为“原子”CSS 类名，并对其进行组织和优化。无需学习或管理单独的实用程序类名库。
- StyleX 允许在文件和组件边界之间合并样式，使其成为允许用户自定义的组件库的理想选择。
- StyleX 是完全类型化的，并提供类型实用程序，以允许对组件可以接受的属性和值进行细粒度控制。
StyleX 的优势是什么？
快速
StyleX 旨在在编译时和运行时都保持快速。Babel 转换不会显着减慢构建速度。
在运行时，StyleX 完全避免了使用 JavaScript 在运行时插入样式相关的成本，并且在必要时只做少量工作来有效地组合类名字符串。生成的 CSS 经过尺寸优化，确保即使是最大网站的样式也能被浏览器快速解析。
可扩展性
StyleX 旨在扩展到极大的代码库，例如我们在 Meta 中使用的代码库。Babel 插件可以通过利用原子构建和文件级缓存来处理在编译时处理数千个组件中的样式。并且，由于 StyleX 旨在封装样式，因此它允许在隔离环境中开发新组件，并期望它们在用在其他组件中时能够以可预测的方式呈现。
通过生成原子 CSS 类名，StyleX 有助于最大程度地减少 CSS 包的大小。随着应用程序中组件数量的增加，CSS 包的大小开始趋于稳定。这使开发人员无需手动优化或延迟加载 CSS 文件。
可预测性
StyleX 自动管理 CSS 选择器的特异性，以确保生成的规则之间没有冲突。StyleX 为开发人员提供了一个可靠应用样式的系统，并确保“最后应用的样式始终有效”。
可组合性
StyleX 样式易于组合。不仅可以有条件地应用多个本地样式，还可以跨文件和组件传递样式。样式始终以可预测的结果合并。
类型安全
您可以使用 TypeScript 或 Flow 类型来约束组件接受的样式。每个样式属性和变量都是完全类型化的。
代码共存
StyleX 允许并鼓励在与使用它们的组件相同的文件中编写样式。这种代码共存有助于使样式在长期内更易于阅读和维护。StyleX 能够使用静态分析和构建时工具来消除跨组件的样式重复，并删除未使用的样式。
可测试性
StyleX 可以配置为输出调试类名，而不是功能性原子类名。这可以用于生成对次要设计更改的响应频率不高的快照。
StyleX 是如何工作的？
StyleX 是一组协同工作的工具。
- 一个 Babel 插件
- 一个小型运行时库
- 一个 ESLint 插件
- 一个不断增长的与打包程序和框架集成的集合。
StyleX 最重要的部分是 Babel 插件。它查找并提取源代码中定义的所有样式，并在编译时将其转换为原子类名。一个辅助函数对收集到的样式进行重复数据删除、排序并将其写入 CSS 文件。这些工具用于实现打包程序插件。
为了使使用 StyleX 尽可能自然，StyleX 支持各种静态模式，通过使用本地常量和表达式来定义样式。此外，为了为您提供最佳性能，Babel 插件还尽可能预先计算最终类名，以消除任何运行时成本——甚至包括合并来自给定文件中的类名。如果组件在同一个文件中静态地定义和使用样式，则运行时成本将为**零**。
当使用更强大的模式（例如样式组合）时，一个微小的运行时会动态地合并类名对象。此运行时经过优化，速度极快，结果会被缓存。
StyleX 的起源
之前的 Facebook 网站使用了类似于 CSS 模块的东西，并遇到了各种问题，这些问题激发了CSS-in-JS 的最初想法。访问facebook.com 的普通访客将下载数十兆字节的 CSS。其中大部分未被使用。为了优化初始加载，我们将延迟加载 CSS，这反过来会导致更新缓慢（或“交互到下一次绘制”）时间。复杂选择器的使用会导致冲突或“特异性战争”。工程师经常求助于使用!important或更复杂的选取器来解决问题，这使得整个系统逐渐恶化。
几年前，当我们使用 React 从头开始重建facebook.com 时，我们知道我们需要更好的东西，于是构建了 StyleX。
StyleX 旨在实现可扩展性，并且其设计在我们多年的使用经验中得到了证明。我们在不影响性能或可扩展性的前提下为 StyleX 添加了新功能，同时使 StyleX 更易于使用。
使用 StyleX 对于我们在 Meta 的可扩展性和表达性来说都是一项巨大的改进。在facebook.com上，我们能够将 CSS 包从数十兆字节的延迟加载 CSS 减少到几百千字节的单个包。
我们创建 StyleX 不仅是为了满足 Web 上 React 开发人员的样式需求，还为了统一 Web 和原生环境中 React 的样式。
Meta 如何使用 StyleX？
StyleX 已成为 Meta 中每个 Web 表面为组件设置样式的首选方式。StyleX 用于为 Meta 的每个主要外部和内部产品（包括 Facebook、WhatsApp、Instagram、Workplace 和 Threads）设置 React 组件的样式。它改变了我们编写组件的方式，并解决了我们团队之前在无法封装和扩展其样式化组件方面遇到的问题。
我们扩展了 StyleX 的原始功能，以便 Meta 的工程师可以使用 StyleX 编写静态和动态样式。我们的团队正在使用 StyleX 主题 API 开发“通用”组件，这些组件采用主题以呈现不同 Meta 产品中使用的不同设计系统的样式。并且，由于 StyleX 与 React Native 样式系统引入的封装原则保持一致，因此我们正在逐步扩展对跨平台样式的支持。
开源
我们开源的是我们在内部使用的内容。我们首先在 Github 上进行开发，然后将其同步回 Meta。尽管 StyleX 最初是在 Meta 为 Meta 创建的，但它并非特定于 Meta。
也就是说，这仅仅是一个开始。我们期待与社区合作，引入更多优化和集成。
我们希望您像我们一样喜欢使用 StyleX。❤️