擬似クラス「:where」を使ってcssの詳細度を下げる

pr: Fixed selected date text color not white in Calendar

修正したバグ

yamada-uiのカレンダーコンポーネントで、週末(data-weekend)や前月来月の部分(data-outside)にdata属性でスタイルを変えることができる。 しかし、ライトモードにおいて選択された状態にあたるdata属性(data-selected)と詳細度が一致し、プログラムの構成上後に記述されるdata-weekendが適用され、日付選択時に白字になっていない

/* 0.1.0 lose */
[data-selected] {　
  color: white;
}

/* 0.1.0 win!! */
[data-weekend] {
  color: blue;
}

選択時は白字になって欲しいが、同じ詳細度なので後から適用されるdata-weekendが勝つ （ナイトモードでは、ナイトモード用のスタイルで詳細度が上がるため問題が発生しない）

策1：詳細度を上げる（不採用）

今回、data-selectedのスタイルを適用したいので、複合セレクタなどを使って詳細度を上げることで問題を解決できる

複合セレクタ &[data-selected]&[data-selected]とすることで、二重で適用され詳細度が2倍になる

/* 0.2.0 win!! */
[data-selected][data-selected] {　
  color: white;
}

/* 0.1.0 lose */
[data-weekend] {
  color: blue;
}

しかし、data-selected属性は、yamada-uiのcoreパッケージにあたり、calendarパッケージ以外に影響する可能性があるため、今回は不採用とした

策2：data-selectedを後に適用されるようにする（不採用）

同じ詳細度なので、後から適用されるようにすればよい しかし、coreパッケージの上にcalendarパッケージが載っているので、data-selectedを後に適用するのは難しい

策3：詳細度を下げる（採用）

詳細度の問題を解決したいとき、通常であれば詳細度を上げる対応が一般的（だと思っている）が、where擬似クラスを用いることで詳細度を下げることもできる

:where()は詳細度を0に保つことができるため、上書きしやすいときに便利

/* 0.1.0 win!! */
[data-selected] {　
  color: white;
}

/* 0.0.0 lose */
:where([data-weekend]) {
  color: blue;
}