Facebook開源StyleX如何在JavaScript中寫CSS呢？

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

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

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

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

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

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

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

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

示例代碼

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}
    
  );
}

審核編輯：劉清