6 篇以「發佈」標記的文章

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'），而且此類檔案不會有任何其他匯出。

其他程式碼檢查 (Lint) 修復​

我們已更新 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 中的所有必要檔案。

我們很高興釋出 0.7.0 版 StyleX，其中含有方便各位入門 StyleX 的新 CLI，針對變數進行了改善，並修正了各式各樣的問題。

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 自订属性（又称“变量”）的重大改进以及大量 bug 修复。

针对变量的改进​

我们在 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 為定義 <syntax> CSS 變數類型引進了一組全新 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 的 debug className 生成錯誤。
• 不再從 0 值中移除單位。
• 修正了編譯錯誤。

我們的 生態系統 頁面持續新增社區專案。包含用於排序 StyleX 樣式的 Prettier 外掛程式。

我們很高興釋出 Stylex v0.5.0，帶來一些大幅改善和修正！

新的 stylex.attrs 函式​

stylex.props 函式會傳回包含 className 字串和 style 物件的物件。部分框架可能需要 class 取代 className，並使用字串值作為 style。

我們引進了一個新的 stylex.attrs 函式，讓 StyleX 可以發揮更強大的作用。stylex.attrs 傳回的物件會包含 class 字串和 style 字串。

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

已新增 @stylexjs/sort-keys 外掛程式，它會依字母順序和優先順序來排序樣式。這將讓媒體查詢順序更可預測。

感謝 @nedjulius!

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

可以使用 aliases 新欄位來設定 StyleX 解析自訂別名，可能是設定於 tsconfig 檔案中。注意：StyleX 目前需要設定您別名的絕對路徑。

感謝 @rayan1810!

新的 Esbuild 外掛程式​

已新增 @stylexjs/esbuild-plugin 作為 Esbuild 的官方外掛程式。

感謝 @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 中使用變數的支援。
• 從執行階段移除樣式注入的程式碼，將執行階段縮小超過 50%。
• Rollup 外掛程式新增了 Flow 和 TypeScript 類型。
• 所有套件外掛程式新增了使用 CSS 層的選項。
• TypeScript 現在會自動完成樣式屬性名稱。
• 套件外掛程式現在會略過不包含 StyleX 的檔案，如此一來建置時間會更快速。

錯誤修正​

• 已修正 ESLint 外掛有時無法解析用於媒體查詢和偽類別的區域常數的錯誤。
• 已解決開發模式中樣式的執行時期注入有時會失敗的錯誤。
• 已解決在開發期間執行時期注入的樣式有時會發生特殊性衝突的錯誤。
• Theme 的 TypeScript 型別現在會在套用錯誤的 VarGroup 的佈景主題時正確擲出錯誤。

除這些事項外，我們已對型別和文件進行其他改進。我要向所有貢獻者表達對其提交要求的感謝。♥️

新年快樂！