fix(scaffold): Google Fonts URL内の & が & に変換される問題を修正

[teppei-d]

問題

本番環境でWebフォント（Google Fonts）が適用されない現象が発生していた。

原因

2段階の問題が絡んでいた。

① JSDOM による & 変換

pageCompiler のビルドプロセスでは、PugテンプレートのコンパイルにJSDOMを使用している。JSDOMがHTMLをシリアライズする際、属性値内の & を仕様に従い & にエスケープする。

その結果、Google Fonts の <link> タグが以下のように変換される。

変換前（Pugソース）

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">

変換後（ビルド出力）

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&amp;display=swap" rel="stylesheet">

② Cloudflare Fonts の挙動

Cloudflare Fonts が有効なプロジェクトでは、Google Fonts の <link> 要素が自動的に <style>（@font-face）にインライン展開される。この変換処理が & を正しく解釈できず、URLが破損してフォントが読み込めなくなっていた。& であれば正常に処理される。

手動で & を & に書き換えたところ、フォントが正常に反映されることを確認している。

対応

pageCompiler の replace オプション（JSDOMシリアライズ・Prettier・minifier 処理が完了した後に実行される最終テキスト変換フック）を使用し、fonts.googleapis.com および fonts.gstatic.com の href 属性内に限定して & を & に戻す処理を追加した。

replace: (content) => {
  // JSDOMが & に変換した Google Fonts URL の & を元に戻す
  return content.replaceAll(
    /href="(https:\/\/fonts\.(?:googleapis|gstatic)\.com[^"]*)"/g,
    (_, url) => `href="${url.replaceAll('&', '&')}"`,
  );
},

正規表現を fonts.googleapis.com / fonts.gstatic.com の href 属性内に限定することで、他の要素の & には影響しない。replaceAll により、URL内に & が複数ある場合も全て処理される。

テストについて

このスキャフォールドにテストコードは追加していない。replace 関数は純粋な文字列変換だが、このリポジトリから生成される案件リポジトリにテストコードが含まれることになりノイズになるため、意図的に追加しない方針としている。

動作確認は案件リポジトリのビルド出力（htdocs/ のHTMLファイル）で、Google Fonts の <link> 要素の href 属性内が & ではなく & で出力されることを確認済み。