v8 2024 開発メモ

[qrac]

Releases

テーマ: リマスター（最新のCSSを使った過去作の再現）

• 全面改訂: CSSを新しい書き方で一新
• 表示互換: v7系のデザインをほぼすべて保てる
• 命名互換: v7系のクラスをそのまま使える

Features

• CSS Variablesを標準化
• ダークテーマを標準化（data-theme="dark"）
• 新カラーリング: 色をTailwind CSSベースで微調整
• 新ディテール: 余白や角丸などを微調整（button, badge, alert, form）
• 旧カラーリング・旧ディテールを再現するMigrate CSSを追加
• セカンダリーカラーを追加（text, button, badge, alert）
• flexboxの上寄せクラスを追加（grid, flex）
• iconにdisabled効果を追加
• badgeにmeltクラスを追加
• alertのtailを基本構成に追加
• formのlabelにgapを使えるクラスを追加
• formのradioとcheckboxに簡単な構成を追加
• iframeのaspectクラスを必須から任意付与に変更
• ユーティリティに短縮クラス名を追加（margin, margin-minus, padding）
• ユーティリティにflexboxとgapを簡単に使えるクラスを追加
• ユーティリティにborder-radiusを簡単に使えるクラスを追加
• 基本容量の現状維持（85KB → 84.3KB）

Breaking Changes

• Sassを削除
• 文字のアンチエイリアスを削除
• 不要なベンダープレフィックスを削除
• ホバー効果を有効なデバイスのみに制限
• フォーカススタイルをブラウザデフォルトに変更
• テキストリンクの下線をunderlineに統一
• ユーティリティflexの命名を調整（互換あり）
• ユーティリティmargin-minusの命名を調整（互換あり）
• メディアクエリクラスの命名を調整（互換あり）
• CDNからminifyなし版を削除

Plans

• 開発ブランチ: v8-2024

Packages

• [x] musubii

Tasks

• [x] 開発環境をモノレポに移行
• [x] PlaygroundをViteでリプレイス
• [x] すべてのCSSを書き換え
• [x] CSSをPlaygroundでテスト
• [ ] 新しいドキュメントサイトの開発
• [ ] ドキュメントサイトデータをリポジトリに戻す
• [ ] ドキュメントサイトをGitHub Pagesに戻す

[qrac]

.grid.is-gap-{x} からネガティブマージンを無くそうとしたが、12分割グリッドでは横方向のネガティブマージンを取り除くことは不可能だった。

• display: flex の flex-basis は gap の数値を含められないので100%を超えてしまう
• display: grid は gap を含んだ割合を算出できるが残りを埋めるようなアバウトな幅を子要素で指定できない

[qrac]

Subgridは display: grid でしか使えない。前述の通り、グリッドCSSに display: flex を引き続き使う必要があるので is-stretch の仕様も従来のものを継続する。

[qrac]

react-musubii となるコンポーネント集も作っているが、実務で使わなそう（クラス名をタイピングするだけの方が楽）なのでplaygroundに内包するだけにしておくだし仕様変更の修正が面倒だったので削除。

[qrac]

以下の文字プロパティは2024年3月末現在Chrome 120あたりにしか実装されていないので見送る。

• word-break: auto-phrase;
• text-autospace
• text-spacing-trim

CSSで句読点括弧のカーニングができるようになるぞ！ 日本語が読みやすくなる最近サポートされた・近日サポートされるCSSの機能のまとめ | コリス

[qrac]

::placeholder は全ブラウザに対応しているのでプレフィックス系はすべて削除する。

::placeholder - CSS: カスケーディングスタイルシート | MDN

[qrac]

キーカラーのちょっと暗い色・透明色の算出には全ブラウザに対応した color-mix() を使う。filterやopacityを使う必要もなく各場所の色を変えられる。オーバーライドしやすい設計になるので良い。

color-mix() - CSS: カスケーディングスタイルシート | MDN

[qrac]

select の矢印をIEで消す ::-ms-expand 指定は必要なくなったので削除。

[qrac]

text-decoration の表現力が向上したため、リンクの下線はborderではなくunderlineをデフォルトにする。

• text-decoration - CSS: カスケーディングスタイルシート | MDN
• text-underline-offset - CSS: カスケーディングスタイルシート | MDN

[qrac]

文字の折り返しに overflow-wrap: anywhere; を採用してみる。

• 文章の折り返し指定のCSS最新版 - ICS MEDIA

[qrac]

オプティマイザーCLIの案。移行後の最適なクラス名に一括置換できると楽。

• is-padding-md → is-p-md など
• is-padding-top-md is-padding-bottom-md → is-py-md など統合系を処理できると尚良い
• is-mobile-0 is-tablet-4 → is-flex-0 tablet\:is-flex-4 などメディアクエリクラスの最適化もできると尚良い
• globでファイルを探した後、正規表現で検索
• 置換結果を先に提示して承諾させた方が良い
• JSでクラスを分割処理していたりすると置換できない

コマンドの案

$ npx musubii-optimizer@latest ./src/**/*{.html,.php} --fix padding paddingX flex flexMedia

[qrac]

足りないCSSをTailwind CSSで補う運用方法の案。

/** @type {import('tailwindcss').Config} */
module.exports = {
  prefix: 'is-',
}

<div class="box is-pt-8">Add Tailwind CSS</div>