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 を有効なプロパティとして
• @starting-style を有効なat-ruleとして

後処理に lightningcss を使用​

StyleXのコンパイルプロセスは、概念的には3つのステップからなります。

1. JavaScriptソースファイルを変換し、stylex.create などの使用を結果のクラス名に置き換え、生成されたCSSを収集します。
2. 収集されたすべてのCSSの重複を削除し、ソートします。
3. CSSをファイルに書き込みます。

ただし、CSSをファイルに書き込む前に後処理を行うと便利なことがよくあります。この後処理には、縮小、プレフィックスの追加、その他の変換が含まれる場合があります。多くの議論の末、この後処理には lightningcss を標準化することにしました。

最初のステップとして、Rollupプラグインにデフォルトで lightningcss を追加します。他のバンドラープラグインのサポートは、今後展開していく予定です。

この作業にご尽力いただいた Prakshal Jain に感謝します！

テーマの改善​

StyleXのテーマに関して、2つの小さなながらも重要な改善を行いました。

stylex.firstThatWorks を使用してCSS変数のフォールバック値を定義する​

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

désormais、la même API fonctionnera également pour les variables 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搭載）

StyleX v0.7.3 がリリースされました。Rollup プラグインの修正が含まれており、以前は NPM への公開に必要なファイルがすべて含まれていませんでした。

StyleX v0.7.0 をリリースしました。StyleX を使い始めるための新しい CLI、変数の改善、およびさまざまなバグ修正が含まれています。

CLI​

StyleX は、JavaScript コードを*変換*し、静的 CSS ファイルを生成するコンパイラに依存しています。ただし、このコンパイラをバンドラーと統合するのは難しい場合があります。そのため、バンドラー統合の品質向上に取り組んでいますが、代替手段として新しい CLI を導入しています。

CLI はフォルダ全体を変換します。StyleX がすでにコンパイル済みで、静的 CSS ファイルが生成されている出力フォルダを生成します。さらに、CLI は、StyleX を使用する各ファイルに、生成された CSS ファイルの import 文を挿入します。

バンドラーベースのセットアップに代わるこの方法を提供できることを嬉しく思います。CLI は実験的な状態でリリースされています。どのように機能するか、どのような改善を希望するかについて、フィードバックをお寄せください。

CLI の開発にご尽力いただいた Joel Austin に感謝します。

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

変数が型付きで定義されると、他の CSS プロパティと同様に stylex.keyframes でアニメーション化できます。

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 ルール​

StyleX ESlint プラグインに新しい sort-keys ルールを追加しました。このルールは、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 がより多くの場所で適切に動作するように、新しい stylex.attrs 関数を導入しています。 stylex.attrs は、class 文字列と style 文字列を含むオブジェクトを返します。

ESLint プラグインの新しい sort-keys ルール​

スタイルをアルファベット順および優先順位でソートする新しい @stylexjs/sort-keys プラグインが導入されました。これにより、メディアクエリの順序がより予測可能になります。

@nedjulius さん、ありがとうございます！

StyleX Babel プラグインの新しい aliases オプション​

新しい aliases フィールドを使用して、tsconfig ファイルに設定されているカスタムエイリアスを解決するように StyleX を設定できます。**注**: StyleX は現在、エイリアスに絶対パスを設定する必要があります。

@rayan1810 さん、ありがとうございます！

新しい Esbuild プラグイン​

Esbuild 用の新しい公式プラグインが @stylexjs/esbuild-plugin として導入されました。

@nedjulius さん、ありがとうございます！

その他の機能強化​

• StyleX Babel プラグインに渡される設定オプションが検証されるようになりました。
• @stylexjs/stylex に、CommonJS エクスポートに加えて ESM エクスポートが追加されました。
• ESLint の valid-styles ルールは、空の文字列を文字列値として使用するとエラーを検出するようになりました。

バグ修正​

• 以前は型エラーや lint エラーを引き起こしていた一部の CSS プロパティが、 désormais 受け入れられるようになりました。
• opacity に変数を使用しても、型エラーが発生しなくなりました。
• stylex.defineVars 内で stylex.keyframes を使用できるようになりました。
• runtimeInjection が正しく処理されるようになりました。
• defineVars からの変数の値を動的スタイルとして設定できるようになりました。
• CSS 関数内で 0px を使用しても、特定のケースで機能しないため、単位のない 0 に簡略化されなくなりました。
• CSS 演算子の周りのスペースが維持されるようになりました。

これらに加えて、StyleX 関連のさまざまなコミュニティプロジェクトを紹介するために、Web サイトに「エコシステム」ページを追加しました。

3週間前、StyleXをオープンソース化しました。それ以来、バグ修正と改善に精力的に取り組んできました。主な変更点は以下のとおりです。

機能強化​

• コンパイル後に生成される JavaScript の量がさらに削減されました。
• ESLint プラグインに、これまで不足していた CSS プロパティのサポートを追加しました。
• stylex.keyframes で変数を使用するためのサポートを追加しました。
• 本番環境のランタイムからスタイルインジェクションのコードを削除し、ランタイムのサイズを 50% 以上削減しました。
• Rollup プラグインの Flow と TypeScript の型を追加しました。
• すべてのバンドラープラグインで CSS レイヤーを使用するオプションを追加しました。
• TypeScript がスタイルプロパティ名を自動補完するようになりました。
• バンドラープラグインが 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 はサイズが最適化されているため、最大規模の Web サイトのスタイルでもブラウザで高速に解析できます。

スケーラブル​

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社におけるスケーラビリティと表現力の両面で大きな改善をもたらしました。facebook.comでは、数十メガバイトの遅延ロードCSSから、数百キロバイトの単一バンドルにCSSバンドルを削減することができました。

私たちは、Web上のReact開発者のスタイリングニーズを満たすだけでなく、Webとネイティブの両方でReactのスタイリングを統一するために、StyleXを作成しました。

MetaはStyleXをどのように使用していますか？​

StyleXは、Meta内のすべてのWebサーフェスでコンポーネントをスタイルする preferred な方法となっています。StyleXは、Facebook、WhatsApp、Instagram、Workplace、Threadsなど、Metaの主要な外部および内部製品のすべてでReactコンポーネントのスタイルを設定するために使用されています。これは、コンポーネントの作成方法を変え、チームが以前抱えていた、スタイル付きコンポーネントをカプセル化してスケーリングできないという問題を解決しました。

Metaのエンジニアが静的および動的な両方のスタイルを作成するためにStyleXを使用できるように、StyleXの元の機能を拡張しました。私たちのチームは、異なるMeta製品内で使用される異なるデザインシステムの外観を取り入れるようにテーマ設定された「ユニバーサル」コンポーネントを開発するために、StyleXテーマAPIを使用しています。そして、StyleXがReact Nativeのスタイリングシステムによって導入されたカプセル化の原則と一致しているため、クロスプラットフォームスタイリングのサポートを徐々に拡大しています。

オープンソース​

私たちがオープンソース化しているのは、社内で使用しているものです。私たちはまずGithubで開発し、それをMetaに同期させています。StyleXはもともとMeta社内でMetaのために作成されましたが、Meta専用ではありません。

とはいえ、これはまだ始まりに過ぎません。コミュニティと協力して、さらなる最適化と統合を進めていくことを楽しみにしています。

私たちと同じくらいStyleXを気に入っていただければ幸いです。❤️