lefthookでbun installの実行チェックをpre-commitに入れる

bun.lock が更新されたのに bun install を実行していないままコミットしようとすると、CIや他の開発者の環境で依存関係がズレる。lefthook の pre-commit に依存関係チェックを入れることで、このミスをコミット前に防ぐ。

Before: bun install を忘れてコミットしても気づけない。 After: node_modules/.bin のタイムスタンプと bun.lock を比較し、古ければコミットをブロックする。

# lefthook.yml
assert_lefthook_installed: true

pre-commit:
  commands:
    deps-check:
      run: |
        if [ ! -d node_modules/.bin ] || [ bun.lock -nt node_modules/.bin ]; then
          echo "node_modules が古いです。bun install を実行してください。"
          exit 1
        fi

設計のポイント:

1. assert_lefthook_installed: true — lefthook バイナリが見つからない場合に hook 実行自体を exit 1 で失敗させる公式オプション。新規参加者がインストールを忘れても気づけるようになる
2. node_modules/.bin をタイムスタンプ比較の対象にする — bun install はパッケージに変更がない場合でも .bin のタイムスタンプを更新する（公式ドキュメントに明記はないが実装の観察値）。一方 node_modules ディレクトリ直下は変更がなければタイムスタンプが変わらないことがあり、「install 済みなのに古いと判定される」フォールスポジティブが起きた。.bin を対象にすることでこの問題を回避できる
3. -nt（newer than）演算子 — bash の [[ A -nt B ]] で A が B より新しいか判定できる。bun.lock -nt node_modules/.bin は「lockfileの方が新しい＝install未実行」を意味する

lefthook の setup フックは staged ファイルがない状態では skip されることがあるため、commands の先頭に deps-check を入れる方が確実にブロックできた。

Tailwind Typography の prose-code: は pre 内の code にも適用される

Tailwind Typography で prose-code:text-[var(--color-text)] のようなカスタム色を設定すると、インラインコード（`code`）だけでなく、コードブロック（```...```）内の <code> にも同じ色が適用される。

コードブロックの背景は Tailwind Typography のデフォルトで暗い色（slate-800 相当）になっているため、そこに濃い文字色を上書きすると「暗い背景に暗い文字」になってコードが読めなくなる。

<!-- この class は pre > code にも効いてしまう -->
<div class="prose prose-code:text-[var(--color-text)]">
  <!-- インラインコード -->
  <p>Use <code>useState</code> here.</p>

  <!-- コードブロック（背景が暗いのに文字も暗くなる）-->
  <pre><code>const x = 1;</code></pre>
</div>

修正は pre 内の code だけを明示的に上書きする:

<!-- [&_pre_code]: でスコープを絞る -->
<div class="prose prose-code:text-[var(--color-text)] [&_pre_code]:text-slate-100">

または、インラインコードだけに色を当てたい場合は :not(pre) で絞る:

<div class="prose [&_:not(pre)_code]:text-[var(--color-text)]">

prose-code: はすべての code 要素を対象にするセレクタで、Tailwind Typography が内部で生成する --tw-prose-code 変数を上書きする。この変数は pre > code にも引き継がれるため、意図せずコードブロックにも効いてしまう。インラインコードとコードブロックの色を分けたい場合は、最初から :not(pre) のアービトラリーセレクタで限定する方が安全。