StyleX v0.8.0 がリリースされました。多数の修正と新しい ESLint ルールが含まれています。
リンティングの強化
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') 拡張子を持つファイル内の名前付きエクスポートであり、そのようなファイルには他のエクスポートがないことを強制します。
その他のリンティングの修正
ESLint ルールを更新して、欠落しているプロパティと値を追加しました。特に、valid-styles ルールは、以下を理解するようになりました。
- 有効なプロパティとしての
fieldSizing - 有効な at-rule としての
@starting-style。
ポストプロセッシングに lightningcss を使用する
StyleX のコンパイルプロセスは、概念的には3つのステップのプロセスです。
- JavaScript ソースファイルを変換して、
stylex.createなどの使用箇所を結果の classNames に置き換え、生成された CSS を収集します。 - 収集されたすべての CSS を重複排除し、ソートします。
- CSS をファイルに書き込みます。
ただし、多くの場合、CSS をファイルに書き込む前にポストプロセスすることが役立ちます。このポストプロセスには、ミニファイ、プレフィックス付け、その他の変換が含まれる場合があります。多くの議論の結果、このポストプロセスには lightningcss を標準化することにしました。
最初のステップとして、Rollup Plugin にデフォルトで lightningcss を追加します。次に、他のバンドラープラグインのサポートを展開します。
この作業を行った Prakshal Jain に感謝します!
テーマの改善
StyleX のテーマ設定に関して、2つの小さくても重要な改善を行いました。
CSS 変数のフォールバック値を定義するために stylex.firstThatWorks を使用する。
StyleX には、CSS プロパティのフォールバック値を定義するために使用できる stylex.firstThatWorks 関数があります。これは、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',
),
},
});
テーマはデフォルトの変数値よりも特異度が高い
stylex.createTheme で作成された CSS ルールは、stylex.defineVars で作成されたルールよりも特異度が高くなりました。
常に正しい順序でルールをソートしていたため、ほとんどの場合、これは問題にはならなかったはずです。ただし、同じページに複数の StyleX CSS ファイルをロードしている可能性がある極端なエッジケースでは、この修正により一貫性が確保されます。
その他の修正
StyleX のさまざまな部分で他の修正も行いました。
- 修正:
textAlignの論理値は、leftおよびrightに変換されなくなりました。 - 修正: [CLI]ファイルの削除中にエラーが発生した場合に適切に処理する (#695)
- 機能: CLI の構成オプションを拡張 (#638)
- 修正: 変数に使用される数値に 'px' 単位を追加しない (#694)
- 修正: 生の数値を値として受け入れる追加のプロパティに 'px' 単位を追加しない (#705)
ドキュメントの改善
さまざまなバンドラープラグインのオプションに関するドキュメントを追加し、エコシステムページに追加のプロジェクトを追加しました。
また、ウェブサイトでの検索をより包括的かつ正確になるように更新しました (Algolia を利用)。