buttonの全variantがループしてcssへ出力されないようにmixinを調整

[itoh4126]

mixinベースのスタイリング（エイリアシング）でボタンを使う際に、$options で指定した値のスタイルだけをCSSに出力するように style mixinを調整しました。

背景・課題

READMEで推奨しているエイリアシングの使い方で、

.button-submit {
  @include inhouse.button-style(
    $options: (
      appearance: flat,
      color: neutral,
      shape: circle,
      size: m,
      width: auto,
    )
  );
}

と書いても、従来の実装では指定した size: m 以外の s や xl、appearance や color の他の値まで、すべてのvariantをループして .button-submit に対して出力していました（1回の @include で約1000ルールセット）。エイリアシングではオプションを固定して使うことが多くの比重を占めるはずで、modifier用のスタイル（mixinベースでのエイリアシングでスタイリングしたinhouse buttonに対して-size-lなどclassベースのオプション指定を追加すること）は実質的に不要なCSSになっていると言えます。

変更内容

• style の引数のデフォルトを $options: null に変更し、挙動を分岐
  • $options 省略時: 従来どおり、デフォルトのスタイル + すべてのmodifier（-appearance-*, -color-* など）のスタイルを出力（export = .in-button はこのパターンです）
  • $options 指定時: 指定した値（未指定の属性はデフォルト値）のスタイルだけを出力し、modifierのスタイルは出力しない（上記の例では9ルールセットになる）
• skeleton-style にも同じ扱いを適用
• 使い方をbuttonパッケージのREADMEに追記

互換性

• classベース: export（.in-button / .in-skeleton-button）の出力は変更前後で同じでした（コンパイル結果をdiffで確認した）
• mixinベース: style / style-with-variants のシグネチャは変わらなくて、引数なしの @include button.style も従来と同一の出力でした。
• 唯一出力が変わるのは .in-callout 配下です。calloutが内部で button.style($options: (size: $size, appearance: transparent)) を呼んでいて、そこに展開されていた未使用のボタン全variant（3,716ルールセット）が出力されなくなります（.in-callout ._action にmodifierを当てる使い方はドキュメント・リポジトリ内に存在しないことを確認してます）。この結果としてビルド済みCSS全体は45,191行 → 18,015行に削減されるようです。

動作確認は

• npm test（sassunit 全パッケージ）: passed / failed: 0
• npm run lint:style: エラーなし
• inhouse-components-web.scss のコンパイル結果の変更前後diffで、上記callout以外に差分がないことを確認
• design.pepabo.com から本ブランチのパッケージをローカル参照（file:）して、サイト全体の表示・アイコンフォント・GlobalHeaderなどの button.style($options...) 利用箇所に影響がないことを確認

などを行いましたが、レビュワーはローカルで別プロジェクトへこのbranchのinhouse buttonをインストールして表示の変わり映えがないか・その上でコードが削減されているかなど確認してみてください。

補足

chip や sticker など他のパッケージにも全variantを無条件にループする同様の実装がありますが、まず使用頻度とvariantの数の多さゆえ最もCSSの削減が効果的と考えられるbuttonのみ対応してます。