PostCSS で animation の keyframe 名に `:local` が入る

React (Next.js）で開発していて、CSS ファイルで animation の指定を行ったが反映されずに悩んだ。

結論としては、併用していた PostCSS のプラグインの中に悪さしているものがありそう（詳しく検証はしていない）。animation のプロパティを書く順番によって、:local が埋め込まれることがあるようだ。

keyframe 名を一番最初に持ってくることで解決する。

@keyframes spinner {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

// これは動かない
animation: 1s infinite alternate spinner;
// => animation: 1s infinite alternate :local(spinner)

// これは動く
animation: spinner 1s infinite alternate;

久々にくだらない罠にハマった。