Next.js で SSG すると、いろいろなものが圧縮されて静的ファイルができあがるのですが、CSS で RGBA でカラー指定をしていると、 HSLA に変換されるようです。 それ自体はいいのですが、下記のような問題が発生しました。

問題

今回のブログの背景は、青時に白い格子柄のパターンを CSS background-image の repeating-linear-gradient で作っています。

• ビルド前

background-image: repeating-linear-gradient(
  0deg,
  rgba(255, 255, 255, 0.43) 0 1px,
  transparent 1px 20px
  ),
  repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.43) 0 1px,
    transparent 1px 20px
  );

• ビルド後

background-image: repeating-linear-gradient(
  0deg,
  hsla(0,0%,100%,.43) 1px, // 0 が抜けている👀
  transparent 1px 20px
  ),
  repeating-linear-gradient(
    90deg,
    hsla(0,0%,100%,.43) 1px,　// 0 が抜けている👀
    transparent 1px 20px
  );

0 が省かれている？ためにグラデーションが効かなくなっていました。

解決策？

deg 指定を、to <side-or-corner> に変えたところ、0 が省かれなくなり、グラデーションが表示されました。

• ビルド前

background-image: repeating-linear-gradient(
  to bottom,
    rgba(255, 255, 255, 0.43) 0 1px,
    transparent 1px 20px
  ),
  repeating-linear-gradient(
    to left,
    rgba(255, 255, 255, 0.43) 0 1px,
    transparent 1px 20px
  );

• ビルド後

background-image: 
  repeating-linear-gradient(
    180deg,
    hsla(0,0%,100%,.43) 0 1px, // 0 がついている
    transparent 1px 20px
    ),
  repeating-linear-gradient(
    270deg,
    hsla(0,0%,100%,.43) 0 1px, // 0 がついている
    transparent 1px 20px
  );

記述を変えたことで解決したのですが、結局 deg に変換されるので、なんでなのかなぁという感じでした。