docker buildx で sass 実行時に CSS の値の小数点以下が切り捨てられる可能性がある

• Rails アプリケーションを docker で動かすために、Dockerfile 内で vite build を実行するようにしていた。
• macOS (arm64) 上の docker buildx で arm64 および amd64 用のイメージを作成していた。
• amd64 用イメージ内の CSS の値が小数点以下切り捨てられていた。

# 元の CSS や arm64 イメージ内の CSS の記述
html { line-height: 1.5; }
# amd64 イメージ内の CSS の記述
html { line-height: 1; }

調査すると scss (sass) の @use で読み込む CSS のサイズが一定を超えると、この現象が起こることがわかった。(すべての値が小数点以下切り捨てられる場合と一部の値が切り捨てられる場合があった)

いろいろ試した結果、docker buildx の driver が docker-container (QEMU 使ったもの) の場合に問題が発生するようだった。driver を remote にして amd64 環境でビルドするように設定することで、この問題が起こらなくなった。

• 問題を再現するレポジトリ https://github.com/socioart/css-round-number-test
• remote driver の設定例 https://dev.to/aboozar/build-docker-multi-platform-image-using-buildx-remote-builder-node-5631