StyleX v0.8.0 現已推出，內含許多修正與新的 ESlint 規則。

Linting 增強功能​

我們已對我們的 ESLint 外掛程式做出了許多改善。我們同時改善了現有的規則，也新增了新的規則。感謝 Melissa Liu！

以下是一些重點說明

新的 valid-shorthands 規則​

這項規則透過我們的觀點，來執行應何時以及如何使用 CSS 速寫屬性。它禁止使用速寫的多值速寫，並禁止使用某些屬性。

const styles = stylex({
  invalidShorthands: {
    // border shorthands are entirely disallowed
    // Use `borderWidth`, `borderStyle`, and `borderColor` instead
    border: '1px solid black',
    // Multiple values for different sides within the same shorthand are disallowed
    borderWidth: '1px 2px 3px 4px',
    margin: '10px 20px 30px',
    padding: '10px 20px',
  },
  validShorthands: {
    borderBottomWidth: 3,
    borderColor: 'black',
    borderInlineEndWidth: 2,
    borderInlineStartWidth: 4,
    borderStyle: 'solid',
    borderTopWidth: 1,
    marginBottom: 30,
    marginInline: 20,
    marginTop: 10,
    paddingBlock: 10,
    paddingInline: 20,
  },
});

這些觀點能引導您朝向最一致且最具重用性的 CSS 邁進。

新的 enforce-extension 規則​

這項規則強制執行 定義變數時的規則._createMdxContent 它強制執行 stylex.defineVars 的用法應為檔案中的命名匯出，且檔案具有 .stylex.js（或 '.ts'、'.jsx'、'.tsx'）副檔名，並且此類檔案無其他匯出。

其他 Linting 修補​

我們已更新 ESLint 規則，以包含其他遺漏的屬性和值。特別注意，valid-styles 規則現在應能辨識

• fieldSizing 為有效的 prop
• @starting-style 為有效的 at 規則。

使用 lightningcss 進行後處理 ​

StyleX 的編譯處理實際上是一個三步驟的過程

1. 轉換 JavaScript 原始檔，將 stylex.create 等用法換成產生的類別名稱，並收集產生的 CSS。
2. 刪除重複值並對所有收集到的 CSS 進行排序
3. 將 CSS 寫入檔案。

然而，將 CSS 寫入檔案之前，通常需要對其進行後處理。此後處理可能包括縮小、加入前綴，或其他轉換。經過大量討論，我們決定將 lightningcss 標準化為此後處理程序。

首先，我們為 Rollup 外掛程式預設新增 lightningcss。接下來，我們會為其他打包程式外掛程式推出支援。

感謝 Prakshal Jain 為此專案的辛勞！

佈景主題改善 ​

我們對 StyleX 的佈景主題進行兩項小型但重要的改善。

使用 stylex.firstThatWorks 定義 CSS 變數的後備值 ​

StyleX 中有一個 stylex.firstThatWorks 函數，可以用來定義 CSS 屬性的後備值。這與在 CSS 中使用多個具有不同值同一屬性相似。

/* Represent this */
.my-class {
  background-color: #808080;
  background-color: oklab(0.5 0.5 0.5);
}

const styles = stylex.create({
  myClass: {
    // as:
    backgroundColor: stylex.firstThatWorks(
      'oklab(0.5 0.5 0.5)',
      '#808080',
    ),
  },
});

現在，此 API 也可用於 CSS 變數。

/* Represent this */
.my-class {
  background-color: var(--bg-color, #808080);
}

const styles = stylex.create({
  myClass: {
    // as:
    backgroundColor: stylex.firstThatWorks(
      'var(--bg-color)',
      '#808080',
    ),
  },
});

佈景主題具有高於預設 var 值的特殊性 ​

使用 stylex.createTheme 建立的 CSS 規則現在擁有高於使用 stylex.defineVars 建立的規則的特殊性。

這在絕大多數情況下應該不是問題，因為我們總是將規則以正確的順序進行排序。然而，在極少數的邊緣案例中，您可能在同一頁面載入多個 StyleX CSS 檔，此修正會確保一致性。

其他修正 ​

我們在 StyleX 的不同部分進行其他修正

• 修正：不再將 textAlign 的邏輯值轉換為 left 和 right。
• 修正: [CLI]從容處理刪除檔案時產生的錯誤 (#695)
• 功能：擴充 CLI 的組態選項 (#638)
• 修正：不再為用於變數的數字值新增「px」單位 (#694)
  • 修正：不再為使用原始數字值的其他屬性新增「px」單位 (#705)

文件改善 ​

我們為各種打包程式外掛程式的選項新增文件，並在 生態系統頁面新增其他專案。

我們也更新網站上的搜尋功能，使其更全面而且更準確。(由 Algolia 提供技術支援)

StyleX v0.7.3 現已提供，並已修正 Rollup 外掛，它之前並未納入所有要在 NPM 上發佈的必要檔案。

我們很興奮能發布 StyleX v0.7.0，它提供新的 CLI 工具，可讓您更容易使用 StyleX、改善變數以及修正各種錯誤。

CLI​

StyleX 仰賴一個編譯器轉換您的 JavaScript 程式碼以及產生靜態 CSS 檔案。然而，整合此編譯器與您的打包器可能會很棘手。因此，雖然我們持續致力於改善我們的打包器整合，但我們正推出一個新的 CLI 工具作為替代方案！

CLI 工具會轉換整個資料夾。它會產生 StyleX 已編譯完成，且已產生靜態 CSS 檔案的輸出資料夾。此外，CLI 工具會在使用 StyleX 的每個檔案中插入產生 CSS 檔案的匯入陳述式。

我們很高興能提供此替代方案給基於打包器的設定方式，並選擇以試驗性質的狀態發布 CLI 工具。我們很希望聽聽您的意見回饋，包括它對您的運作方式以及您希望看到的改進。

特別感謝 Joel Austin 在 CLI 工具上的貢獻。

CSS 變數實字名稱​

當使用 stylex.defineVars 時，StyleX 會抽象出實際的 CSS 變數名稱，讓您可以將其用作 JavaScript 參照。在幕後，會為每個變數產生獨特的變數名稱。

然而，在某些情況下，知道確切的變數名稱會很有用。例如，您可能會想在獨立的 CSS 檔案中使用該變數。

為了處理此類使用案例，我們更新 stylex.defineVars API，以將從 -- 開頭的實字作為現有的狀態。除了傳遞到 stylex.defineVars 的金鑰之外，其他 API 仍保持不變。

const vars = stylex.defineVars({
  '--primary-color': 'red',
  '--secondary-color': 'blue',
});

錯誤修正和改進​

此外，我們已修正類型、eslint 規則和打包器外掛中存在的錯誤。

我們很興奮能發布 StyleX v0.6.1，它提供一些用於處理 CSS 自訂屬性（又稱「變數」）的大改進，以及修正多項錯誤。

變數改進​

針對在 StyleX 中處理變數和主題，我們加入一些新功能和改進。

變數的備份值​

現在您可以為使用 stylex.defineVars API 定義的變數提供備份值。這項新的功能並未引入任何新的 API。相反地，既有的 stylex.firstThatWorks API 現在支援變數作為參數。

import * as stylex from '@stylexjs/stylex';
import {colors} from './tokens.stylex';

const styles = stylex.create({
  container: {
    color: stylex.firstThatWorks(colors.primary, 'black'),
  },
});

支援使用備份變數清單。

類型的變數​

StyleX 引入了一組用於定義 CSS 變數的 <syntax> 類型的全新 API。這會在生成的 CSS 輸出中產生 @property 規則，可用于動畫化 CSS 變數以及其他特殊用例。

在定義變數時，可使用新的 stylex.types.* 函式以特定類型進行定義。

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

const typedTokens = stylex.defineVars({
  bgColor: stylex.types.color<string>({
    default: 'cyan',
    [DARK]: 'navy',
  }),
  cornerRadius: stylex.types.length<string | number>({
    default: '4px',
    '@media (max-width: 600px)': 0,
  }),
  translucent: stylex.types.number<number>(0.5),
  angle: stylex.types.angle<string>('0deg'),
  shortAnimation: stylex.types.time<string>('0.5s'),
});

一旦變數已使用類型定義，便可使用 stylex.keyframes 對其進行動畫處理，就像任何其他 CSS 屬性一樣。

import * as stylex from '@stylexjs/stylex';
import {typedTokens} from './tokens.stylex';

const rotate = stylex.keyframes({
  from: { [typedTokens.angle]: '0deg' },
  to: { [typedTokens.angle]: '360deg' },
});

const styles = stylex.create({
  gradient: {
    backgroundImage: `conic-gradient(from ${tokens.angle}, ...colors)`,
    animationName: rotate,
    animationDuration: '10s',
    animationTimingFunction: 'linear',
    animationIterationCount: 'infinite',
  },
})

這可用于實現某些有趣的特效，例如動畫化圓錐形漸層的 angle。

此新功能主要與 CSS 類型有關，但新 API 也使變數的 TypeScript（或 Flow）類型更強大。

如範例中所示，當使用 stylex.createTheme 建立主題時，可使用一般型別引數約束變數可採用的值。

ESlint 外掛程式​

新增 sort-keys 規則​

我們已將新 sort-keys 規則新增到 StyleX ESlint 外掛程式。這條規則是一條風格規則，用於強制執行 StyleX 風格中按鍵排序的一致性。

感謝 nedjulius

針對 valid-styles 規則改善 propLimits。​

已改善 valid-styles 規則，以允許更多表達式的「屬性限制」。

雜項​

• ESlint 'valid-styles' 規則現允許使用使用 stylex.defineVars 建立的變數作為動態風格中的鍵值。
• 修復實驗性 stylex.include API 的錯誤
• 修復 stylex.createTheme 的偵錯類別名稱產生
• 不再從 0 值中移除單位
• 編譯錯誤修復

我們的 生態系統 頁面持續透過社群專案擴展。包括適用於排序 StyleX 風格的 Prettier 外掛程式。

很高興發布 Stylex v0.5.0，其中包含一些重要的改善和修正！

新增 stylex.attrs 函式​

stylex.props 函式會傳回一個包含 className 字串和 style 物件的物件。某些架構可能會預期 className 而不是 class，而 style 的值為字串。

我們將引入新 stylex.attrs 函式，以便 StyleX 能在更多地方發揮作用。 stylex.attrs 傳回一個包含 class 字串和 style 字串的物件。

新增 Eslint 外掛程式的 sort-keys 規則​

已引入新的 @stylexjs/sort-keys 外掛程式，該外掛程式會根據字母順序和優先順序對風格進行排序。這將使媒體查詢順序更可預測。

感謝 @nedjulius！

新增 StyleX Babel 外掛程式的 aliases 選項​

新增的 aliases 欄位可用於設定 StyleX 以解析在 tsconfig 檔案中可能設定的客製化別名。注意：StyleX 目前需要以別名的絕對路徑進行設定。

感謝 @rayan1810!

Esbuild 新外掛​

新增 Esbuild 官方外掛，命名為 @stylexjs/esbuild-plugin。

感謝 @nedjulius！

其他強化功能​

• 傳遞給 StyleX Babel 外掛的組態選項現在將會經過驗證。
• @stylexjs/stylex 現在除了 commonJS 輸出外，還具有 ESM 輸出。
• ESLint valid-styles 規則將會偵測將空字串用作字串值的情況。

錯誤修正​

• 之前會導致類型和程式碼審查錯誤的一些 CSS 屬性現在將能被接受。
• 使用變數定義 opacity 時將不再造成類型錯誤。
• 現在可以在 stylex.defineVars 內使用 stylex.keyframes，且運作正常。
• runtimeInjection 將會得到正確的處理。
• 現在可以正確地將從 defineVars 定義的變數值設定為動態樣式。
• 在 CSS 函式內使用 0px 將不再簡化為沒有單位的 0，因為在某些情況下這會導致問題。
• CSS 運算子周圍的空白將獲得保留。

除了以上內容外，我們還為我們的網站新增一個「生態系」頁面，以突顯各種 StyleX 社群專案。

三週前，我們開放 StyleX 的原始碼。在那時起，我們一直勤奮地修正錯誤並進行改善。以下是其中一些重點

強化功能​

• 編譯後產生的 JavaScript 數量進一步減少。
• 為 ESLint 外掛新增了此前部分遺漏的 CSS 屬性支援。
• 新增支援在 stylex.keyframes 中使用變數。
• 從生產階段執行環境中移除樣式注入的程式碼，將執行環境的 boyut 減少 50% 以上。
• 為 Rollup 外掛新增 Flow 和 TypeScript 類型。
• 新增在所有 bundler 外掛中使用 CSS Layers 的選項。
• TypeScript 現在將自動完成樣式屬性名稱。
• Bundler 外掛現在將略過不包含 StyleX 的檔案，縮短建置時間。

錯誤修正​

• 修正 ESLint 外掛有時無法解析用於媒體查詢和偽類別的區域常數的錯誤。
• 修正開發模式中注入樣式的執行環境運作有時會失敗的錯誤。
• 修正開發階段在執行環境中注入的樣式有時導致優先權衝突的錯誤。
• Theme 的 TypeScript 類型現在會在為錯誤的 VarGroup 套用佈景主題時正確地擲出錯誤。

除了以上內容外，我們也對類型和文件做了一些其他改進。我要向所有貢獻者表達感謝，謝謝他們提出公關請求。♥️

新年快樂！

我們很興奮地介紹 StyleX。StyleX 是一個有彈性、確定性、可靠且可彈性縮放的樣式系統，適用於雄心勃勃的應用程式。我們取材自過去的樣式函式庫中最好的構想，打造出同時既熟悉又獨一無二的全新產物。

什麼是 StyleX？​

StyleX 取用 CSS-in-JS 函式庫的開發人員體驗，並使用編譯時期工具將其與靜態 CSS 的效能和可擴充性做連結。不過，StyleX 不只是一個基於編譯器的 CSS-in-JS 函式庫。StyleX 經過仔細設計，以符合大型應用程式、可重複使用的元件函式庫和靜態類型化程式碼庫的需求。

1. StyleX 支援 CSS 的有彈性子集。它避免使用複雜的選取器，並保證在產生的 CSS 中不會出現特定性衝突。
2. StyleX 將型式轉換、整理、最佳化成「基本」的 CSS 類別名稱。不需要學習或管理一個獨立的工具程式類別名稱函式庫。
3. StyleX 允許跨檔案和元件邊界合併型式，使其成為允許使用者客製化的元件函式庫的理想選擇。
4. 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 使用起來更令人愉快。

在 Meta 中使用 StyleX 已經大幅改善我們的可擴充性和表達力。在facebook.com上，我們可以將 CSS 程式包從延遲載入的數十兆位元組 CSS 降為一個只有數百千位元組的單一程式包。

我們建立 StyleX 不僅僅是要滿足 React 開發人員在網路上對樣式設計的需求，還希望統一 React 在網路和原生平台上的樣式設計。

Meta 如何使用 StyleX？​

StyleX 已成為 Meta 中所有網路畫面的元件首選樣式設計方式。StyleX 用於為 Meta 旗下的所有主要外部與內部產品（例如 Facebook、WhatsApp、Instagram、Workplace 和 Threads）中的 React 元件設計樣式。它改變了我們建構元件的方式，並解決了我們的團隊之前無法封裝和擴充他們的樣式化元件的問題。

我們擴充了 StyleX 的原有功能，讓 Meta 的工程師可以使用 StyleX 編寫靜態和動態樣式。我們的團隊正在使用 StyleX 主題 API 來開發「通用」元件，這些元件的樣式主題會根據在 Meta 不同的產品中使用的不同設計系統而改變。並且我們正在逐漸擴充跨平台樣式設定的支援，拜 StyleX 與 React Native 樣式系統引入的封裝原則吻合所賜。

開放原始碼 ​

我們開放原始碼的部分就是我們在內部使用的部分。我們會優先在 Github 上進行開發，然後將其同步回 Meta。儘管 StyleX 最初是由 Meta 為 Meta 所開發，但它並非針對 Meta 而設計。

話雖如此，這仍然只是個開端。我們期待與社群合作引進進一步的最佳化和更多整合。

我們希望你會像我們一樣喜愛使用 StyleX。❤️