400 - 《StyleX》

1、StyleX 是什么？他是 Meta 新开源的 CSS in JS 方案，更严格来说，他是 Atom CSS in JS 方案。虽然他刚开源，生态还很新，但它并不是一个新库，它支持了所有 Meta 网站，包括 Facebook、Instagram、WhatsApp 和 Threads 等，见下图，这种 Classname 就是 Atom CSS 的表现。

2、大多 CSS in JS 方案都存在几个问题。

1）性能。性能是指在运行时通过 JS 把样式解析出来并插入到 DOM 里，这可能会带来较大的成本，所以不少库都在往「0 运行时」转，比如 Vanilla Extract 和 Panda，StyleX 也是此类。

2）兼容。比如对 React SSR、流式 SSR、RSC 的支持，尤其是 RSC，应该不少方案都还不支持。StyleX 应该是支持的，未具体验证。

3）产物尺寸。传统的 CSS in JS 方案，产物尺寸会随着项目大小线性增长，而原子化（Atom）的方案通常能减少 50%-70%。StyleX 会生成一个高度优化的原子化的单一 CSS 包。

4）类型安全。除 stylex.create 和 stylex.props 两个主 API 本身类型完整外，stylex 还提供了 StyleXStyles、StyleXStylesWithout 等类型接口让你对类型有更多控制权，比如只接受 color 属性，比如只接受除 margin 之外的所有属性等。

StyleX 除了解决以上问题，在产物确定性、API 设计、框架无关、模块化和可组合性等方面都有考虑。

3、StyleX 的问题？我觉得有几个，1）生态，毕竟刚出的，2）工程化，工具还没有 rust swc 的实现，接入意味着用 Babel 做文件的额外转换，如果是大项目，肯定会慢很多，3）脚手架代码多，StyleX 的设计理念之一是「可读性和可维护性优于简洁性」，为了可读性和可维护性，你可能需要写更多代码，4）Dev 和 Build 的不一致性，如果你的项目比较大，这可能是个大问题，比如让定位样式问题变得复杂，让 Debug 成本变高。

4、如何上手 StyleX？

1）除 Next.js 外，手动配还是有点麻烦的。webpack 用 @stylexjs/webpack-plugin，next.js 用 @stylexjs/nextjs-plugin。

2）定义样式。支持伪类、伪元素、media-query 等。

import * as stylex from '@stylexjs/stylex';
const styles = stylex.create({
  base: {
    fontSize: 16,
    line