メインコンテンツへ移動

@stylexjs/babel-plugin

設定オプション​

dev​

dev: boolean // Default: false

trueの場合、StyleXはスタイルのソースを識別するためのデバッグクラス名を挿入します。

test​

test: boolean // Default: false

trueの場合、StyleXはスタイルのソースを識別するデバッグclassNameのみを出力します。

スタイルや機能的なclassNameは生成しません。スナップショットテストに役立ちます。

runtimeInjection​

runtimeInjection: boolean // Default: the value of `dev`

StyleXが実行時にスタイルを挿入するコードを生成する必要がありますか？開発中は便利ですが、本番環境では無効にする必要があります。

classNamePrefix​

classNamePrefix: string // Default: 'x'

生成されたすべてのclassNameに適用されるプレフィックス。

useRemForFontSize​

useRemForFontSize: boolean // Default: false

fontSizeのpx値をremに変換する必要がありますか？ユーザーがフォントサイズを拡大または縮小できるようにするため、フォントサイズにはremを使用することがベストプラクティスとされています。

styleResolution​

styleResolution: // Default: 'application-order'
  | 'application-order'
  | 'property-specificity'
  // @deprecated
  | 'legacy-expand-shorthands'

スタイルのマージに使用する戦略。

  • application-order: 最後に適用されたスタイルが優先されます。Web上のインラインスタイルの動作と一貫性があります。
  • property-specificity: より具体的なスタイルが、それほど具体的でないスタイルよりも優先されます。React Nativeと一貫性があります。(margin-topはmarginよりも優先されます)
  • 非推奨 - legacy-expand-shorthands: 'application-order'に似ていますが、不完全でエラーが発生しやすいです。将来のリリースで削除されます。

importSources​

importSources: Array<string> // Default: ['@stylexjs/stylex']

stylexをインポートできるパッケージ名を上書きします。カスタムモジュールエイリアスの設定に使用します。

genConditionalClasses​

genConditionalClasses: boolean // Default: false

使用されるすべての可能なスタイルが同じファイル内で定義され、コンパイル時に既知の場合、条件付きスタイルを使用してstylex.props関数の呼び出しを事前に計算する実験的なコンパイル時最適化を有効にします。

treeshakeCompensation​

treeshakeCompensation: boolean // Default: false

StyleX変数の名前付きインポートは、コンパイル後に使用されなくなります。一部のバンダラーは、それらをデッドコードとして削除する場合があります。変数が未定義になる原因となります。指定子なしのインポートを追加することで、それを防ぎます。(例: import './my-vars.stylex.js')

aliases​

aliases: {[key: string]: string | Array<string>} // Default: undefined

aliasesオプションを使用すると、プロジェクトディレクトリを絶対パスにエイリアス設定でき、モジュールのインポートが容易になります。

例: '@/components/*': [path.join(__dirname, './src/components/*')]

unstable_moduleResolution​

unstable_moduleResolution: // Default: undefined
  | {
      // The module system to be used.
      // Use this value when using `ESModules`.
      type: 'commonJS',
      // The absolute path to the root directory of your project.
      rootDir: string,
      // Override `.stylex.js` with your own extension.
      themeFileExtension?: string,
    }
  | {
      // Use this when using the Haste module system
      // Where all files are imported by filename rather
      // than relative paths and all filenames must be unique.
      type: 'haste',
      // Override `.stylex.js` with your own extension.
      themeFileExtension?: string,
    }

stylex.defineVars()で定義された変数を解決するために使用する戦略。StyleXのテーマAPIを使用する予定がある場合は、これが必要です。

注意: テーマAPIは安定していますが、この設定オプションの形状は将来変更される可能性があります。