Meta（原 Facebook）開源了全新的 CSS-in-JS 庫 StyleX。

官方介紹道，StyleX 是一個富有表現(xiàn)力、具有確定性、可靠且可擴展的樣式系統(tǒng)。它通過使用編譯時 (compile-time) 工具融合了靜態(tài) CSS 的性能和可擴展性。 此外，StyleX 不僅僅是一個基于編譯器的 CSS-in-JS 庫，它經(jīng)過精心設計，可以滿足大型應用程序、可復用組件庫和靜態(tài)類型代碼庫的要求。Meta 旗下多款產(chǎn)品如 Facebook、WhatsApp、Instagram、Workplace、Threads 等都在使用 StyleX 作為其 CSS 樣式解決方案。 StyleX 主要特性

快速：StyleX 在編譯時和運行時都具備高效的性能。Babel 轉(zhuǎn)換不會對構(gòu)建過程產(chǎn)生顯著影響。在運行時，StyleX 避免了使用 JavaScript 插入樣式的開銷，并僅在必要時高效地組合類名字符串。生成的 CSS 經(jīng)過優(yōu)化，確保即使是大型網(wǎng)站的樣式也能被瀏覽器快速解析。

可擴展：StyleX 旨在適應像 Meta 這樣的超大型代碼庫。通過原子構(gòu)建和文件級緩存，Babel 插件能夠處理數(shù)萬個組件在編譯時的樣式處理。由于 StyleX 設計為封裝樣式，它允許在隔離環(huán)境中開發(fā)新組件，并期望一旦在其他組件中使用時能夠可預測地呈現(xiàn)。

可預測性：StyleX 會自動管理 CSS 選擇器的特異性，以確保生成的規(guī)則之間不會發(fā)生沖突。它為開發(fā)人員提供了一個可靠地應用樣式的系統(tǒng)，并確保 “最后應用的樣式始終生效”。

類型安全：使用 TypeScript 或 Flow 類型來約束組件接受的樣式，每個樣式屬性和變量都具有完全的類型定義。這有助于提高代碼的可讀性和可維護性，同時減少潛在的錯誤和沖突。

樣式去重：StyleX 鼓勵在同一文件中編寫樣式和組件。這種方法有助于使樣式在長期內(nèi)更具可讀性和可維護性。StyleX 能夠利用靜態(tài)分析和構(gòu)建時工具來跨組件去重樣式，并刪除未使用的樣式。

可測試性：StyleX 可以配置為輸出調(diào)試類名，而不是功能性的原子類名。這可以用于生成快照，以便在對設計進行輕微更改時不會經(jīng)常變化。通過這種方式，開發(fā)人員可以更輕松地測試和驗證樣式的正確性，從而提高開發(fā)效率和產(chǎn)品質(zhì)量。

示例代碼

import stylex from '@stylexjs/stylex';

const styles = stylex.create({
  root: {
    padding: 10,
  },
  element: {
    backgroundColor: 'red',
  },
});

const styleProps = stylex.apply(styles.root, styles.element);

下面是一個按鈕組件的示例代碼

import * as stylex from "@stylexjs/stylex";

const styles = stylex.create({
  base: {
    appearance: "none",
    borderWidth: 0,
    borderStyle: "none",
    backgroundColor: "blue",
    color: "white",
    borderRadius: 4,
    paddingBlock: 4,
    paddingInline: 8,
  },
});

export default function Button({
  onClick,
  children,
}: Readonly<{
  onClick: () => void;
  children: React.ReactNode;
}>) {
  return (
    
      {children}
    
  );
}

審核編輯：劉清