Facebook 的开源 StyleX 用 JavaScript 编写 CSS

Meta（前身为 Facebook）开源了一个新的 CSS-in-JS 库 StyleX。

github地址：

此外，StyleX 不仅仅是一个基于编译器的 css-in-js 库，它旨在满足大型应用程序、可重用组件库和静态类型库的需求。 Meta 的产品，如 Facebook、WhatsApp、Instagram、Workplace、Threads 等，都使用 StyleX 作为他们的 CSS 样式解决方案。

StyleX 主要功能。

快：stylex 在编译时和运行时都很高效。 Babel 转换不会对构建过程产生重大影响。 在运行时，stylex 避免了使用 j**ascript 插入样式的开销，并且仅在必要时有效地组合类名字符串。 生成的 CSS 经过优化，以确保浏览器可以快速解析大型样式。

可 伸缩：stylex 旨在容纳像 Meta 这样的非常大的库。 通过原子构建和文件级缓存，Babel 插件能够在编译时处理数以万计的组件的样式。 由于 StyleX 被设计为封装样式，因此它允许在隔离环境中开发新组件，并期望它们在其他组件中使用后能够很好地呈现。

可用性：stylex 自动管理 CSS 选择器的特异性，以确保生成的规则之间没有冲突。 它为开发人员提供了一个可靠地应用样式并确保“最后应用的样式始终生效”的系统。

类型安全：使用 TypeScript 或 Flow 类型来约束组件接受的样式，每个样式属性和变量都具有完整的类型定义。 这有助于提高可读性和可维护性，同时减少潜在的错误和冲突。

样式重复数据删除：stylex 鼓励在同一个文件中编写样式和组件。 从长远来看，这种方法有助于使样式更具可读性和可维护性。 StyleX 能够利用静态分析和构建时工具跨组件删除重复的样式并删除未使用的样式。

测试：stylex 可以配置为输出调试类名而不是功能原子类名。 这可用于拍摄快照，以便在对设计进行微小更改时不会经常更改。 这样，开发人员可以更轻松地测试和验证样式的正确性，从而提高开发效率和产品质量。

例**

import stylex from '@stylexjs/stylex';const styles = stylex.create(, element: ,const styleprops = stylex.apply(styles.root, styles.element);

import * as stylex from "@stylexjs/stylex";const styles = stylex.create(,}export default function button(: readonly<>)