AstroでCSSのurl()が動作しないことがある

バージョンは、`1.0.0-beta.20`で確認中。

🐛 BUG: css `url()` replaced by __VITE_ASSET__* · Issue #2146 · withastro/astro · GitHub

ワークアラウンドもあるけど、さっさと修正されてほしいやつ。

→ 修正された！

動作しないことがあるコード

<div class="hero">
  <div class="bg"></div>
  <div class="body">
    <!-- ... -->
  </div>
</div>

<style>
  .bg {
    background-image:
      url(./parts2.svg),
      url(./parts1.svg),
      url(./pattern.svg);
  }

みたいな、何の変哲もないCSSが、意図したとおりに動かない。

devモード時は問題ないけど、buildすると問題になる。

動作しないことがある、と書いてるのは、読み込む先のファイルが小さい場合、base64で埋め込まれるようになってるから。

なので、埋め込まれないような比較的ファイルサイズの大きいものを`url()`で参照した場合に動作しない、というのが正しい。

動作しないケースだと、ビルド後のCSSがこんな感じになってる。

  .bg {
    background-image:
      url(__VITE_ASSET__ee293a71__),
      url(__VITE_ASSET__1e449ff1__),
      url(__VITE_ASSET__de26a0c6__);

本来は`/assets/asset.de26a0c6.svg`みたいなファイルパスになるところが、未変換なままになる。

ワークアラウンド

参照先のファイルもアセットとして出力はされるので、パスの置換だけ自力でやればよい。

冒頭のissueでも先人がGistを残してたけど、外部ライブラリの依存なしに必要なことだけやりたかったので自分でも書いてみた。

これを、`postbuild`なりのタイミングで実行するようにすればよい。

AstroはViteに乗っかる形で実装されてはいるものの、全部がそのままというわけではないらしい。（普通にViteだけ使った場合は、さっきのコードも問題なく動く）
なのでたま〜にこういうのにハマってるようで、中の人が大変そう。