perf: Pico は使う部品だけ読み込む

[5ym]

@anyblades/blades 3.1.0-alpha.1(npm の canary)で部品ごとの入口ができたので、
全部入りの @anyblades/blades/pico をやめて、画面で使う部品だけを layer(pico) 付きで読み込む。
:root での --pico-* の上書きはそのまま。

大きさ

レイアウトの CSS(_app/immutable/assets/0.*.css、全ページで読む)

	bytes	gzip -9
変更前	90,139	12,747
変更後	60,296	8,918

残りで最大なのは variables(明暗の色の定義。残した Pico の半分弱)で、これは外せない。

残したもの

• layout: document / landmarks(body main)/ section(<section>)
• content: typography / link / button / table(/admin)/ embedded-content(<svg>)/ code(見本の <pre>)/ figure(見本の <figure>)/ misc(画面には無いが、[hidden] を display: none !important で隠す規則がここにある。外すと display を持つ自前の規則に付けた hidden が効かなくなるので残す)
• forms: basics(input button label)/ checkbox-radio-switch(role="switch")
• components: nav(ヘッダーの <nav>)
• utilities([disabled] のボタン、reduced-motion)

外したもの

画面に該当する要素もクラスも無いもの。src を grep して確認した。

• layout: container / grid / overflow-auto(.container .grid .overflow-auto は使っていない。幅は自前の .page)
• forms: input-color / input-datetime / input-file / input-range / input-search(該当する type の入力が無い)
• components: accordion(details)/ card(article)/ dropdown / group(role="group" role="search")/ loading(aria-busy。読み込み中は自前の .spin)/ modal(dialog)/ progress / tooltip(data-tooltip)

使い始めるときに足せるよう、app.css の先頭に一覧をコメントで残した。

3.1.0-alpha.1(先行版)について

部品ごとの入口は今のところ先行版(canary)にしか無いので、版を固定している。先行版の間は規則がどの部品にあるかが変わり得て、build は通ったまま見た目だけ変わることがあるので、renovate.json で @anyblades/blades だけ自動マージを止め、まとめの PR から外して別の PR にした(ほかの依存の自動マージは止めない)。3.1.0 が出ても版の固定のまま上がるので、^3.1.0 へは手で戻し、この規則も消す。

確認

• bun i --frozen-lockfile → bun run build(Dockerfile と同じ手順)が通る
• svelte-check 0 errors / 0 warnings
• 変更前後のビルドを立ち上げて headless Edge で撮り比べ、ピクセル単位で一致
  • トップ(認証前)1280px 明・暗、390px
  • 認証済みの画面と /admin の部品(スイッチ・無効のスイッチ・チェック・各種ボタン・無効のボタン・注意書き・札・表)を差し込んだもの 明・暗。違いは回転中の .spin の角度だけ
• biome check は src/app.css に整形の指摘が 1 件出るが、main の時点から出ているもので今回の行ではない

🤖 Generated with Claude Code

https://claude.ai/code/session_01ShKjeB5A9VtgvRpkCCgym8

[claude]

Claude finished @5ym's task in 17s —— View job

---

レビュー結果

重大な問題は見つかりませんでした。

• 不具合: src/app.css の @import は variables → layout → content → forms → components → utilities の順で並んでいて、コメントに書かれた順序とも一致しています。layer(pico) も全行に付いています。:root での --pico-* の上書きも変わりません。
• 依存関係: package.json と bun.lock は 3.1.0-alpha.1 に固定されていて、両者は整合しています。alpha を ^ なしで固定しているのは妥当です。
• セキュリティ: 該当する変更はありません。
• テスト: CSS の取り込みだけの変更です。PR 本文にある、ビルド、svelte-check、変更前後のスクリーンショットのピクセル比較で十分だと思います。

要確認

• 私の環境では node_modules が無く、@anyblades/blades@3.1.0-alpha.1 の exports に pico/layout/section や pico/components/nav などのサブパスがあるか自分では確認できていません。PR 本文では bun run build が通ったとのことなので問題は無さそうです。
• canary 版からの固定なので、正式版が出たら ^3.1.0 へ戻す作業を忘れないようにしてください。Renovate が拾うかもしれません。
• 外した部品のうち、hr、details、dialog、aria-busy などを今後使い始めると、スタイルが当たらず気付きにくいです。先頭のコメントで案内されているので、今のところはそれで足りると思います。

[claude]

Claude finished @5ym's task in 11s —— View job

---

レビュー結果

重大な問題は見つかりませんでした。

• 不具合: src/app.css の @import は variables → layout → content → forms → components → utilities の順で、コメントの記載と一致しています。全行に layer(pico) が付いています。:root での --pico-* 上書きも変わりません。2 つ目のコミットで misc を戻した理由(hidden 属性を隠す規則)もコメントに書かれていて妥当です。
• セキュリティ: 該当する変更はありません。
• 設計: 依存を 3.1.0-alpha.1 に固定し、package.json と bun.lock も揃っています。alpha を ^ なしで固定するのは妥当です。
• テスト: CSS の取り込みだけの変更です。PR 本文にあるビルド、svelte-check、変更前後のピクセル比較で足りると思います。

要確認

• この環境では node_modules が無く、@anyblades/blades@3.1.0-alpha.1 の exports に pico/layout/section や pico/components/nav などのサブパスがあるか自分では確認できていません。PR 本文では bun run build が通ったとのことなので問題は無さそうです。
• 正式版 3.1.0 が出たら ^3.1.0 に戻す作業が必要です。Renovate が拾うかもしれません。
• 外した部品(hr、details、dialog、aria-busy など)を後で使い始めると、スタイルが当たらず気付きにくいです。先頭のコメントで案内されているので、今のところはそれで足りると思います。

[claude]

Claude finished @5ym's task in 10s —— View job

---

レビュー結果

重大な問題は見つかりませんでした。

• 不具合: src/app.css の @import は variables → layout → content → forms → components → utilities の順で、先頭コメントとも一致しています。全行に layer(pico) が付いていて、:root での --pico-* 上書きも変わりません。misc を残した理由(hidden 属性の display: none !important)もコメントに書かれていて妥当です。
• セキュリティ: 該当する変更はありません。
• 設計: 依存を 3.1.0-alpha.1 に固定し、package.json と bun.lock も揃っています。alpha を ^ なしで固定するのは妥当です。
• テスト: CSS の取り込みだけの変更です。PR 本文のビルド、svelte-check、変更前後のピクセル比較で足りると思います。

要確認

• この環境には node_modules が無く、@anyblades/blades@3.1.0-alpha.1 の exports に pico/layout/section や pico/components/nav などのサブパスがあるかを自分では確認できていません。PR 本文では bun run build が通っているので問題は無さそうです。
• 正式版 3.1.0 が出たら ^3.1.0 に戻す作業が必要です。
• 外した部品(details、dialog、aria-busy など)を後で使い始めると、スタイルが当たらず気付きにくいです。先頭のコメントで案内されているので、今のところはそれで足りると思います。

[claude]

Claude finished @5ym's task in 11s —— View job

---

レビュー結果

重大な問題は見つかりませんでした。

• 不具合: src/app.css の @import は variables → layout → content → forms → components → utilities の順で、先頭コメントと一致しています。全行に layer(pico) が付いていて、:root での --pico-* 上書きも変わりません。misc を残す理由(hidden 属性の display: none !important)も妥当です。
• セキュリティ: 該当する変更はありません。
• 設計: 依存を 3.1.0-alpha.1 に固定し、renovate.json で @anyblades/blades を別 PR・自動マージ無効にしています。意図とコメントが揃っていて妥当です。
• テスト: CSS の取り込みだけの変更です。PR 本文のビルド、svelte-check、変更前後のピクセル比較で足りると思います。

要確認

• この環境では node_modules が無く、@anyblades/blades@3.1.0-alpha.1 の exports に各サブパス(pico/layout/section、pico/components/nav など)があるかを自分では確認できていません。PR 本文では bun run build が通っているので問題は無さそうです。
• 正式版 3.1.0 が出たら、package.json を ^3.1.0 に戻し、renovate.json の規則も消す作業が必要です。
• 外した部品(details、dialog、aria-busy など)を後で使い始めると、スタイルが当たらず気付きにくいです。先頭のコメントで案内されているので、今のところはそれで足りると思います。