[Shopify 地味な小技] 「-」を付けるとHTMLにできてしまうホワイトスペースがなくなる

今回はShopifyの{%- , -%}についてです。
Liquidでは、始めと終わりに {% , %}を使用します。
でも、Liquidのコードを見ていると下記のように「-」が付いている書き方を目にします。

試しに「-」を削除してみてもレイアウトが壊れたりシステム的な挙動がおかしくなったりすることはありませんでしたので「-」に果たしてどんな意味があるのか分からないまま気にしないでいましたがついに分かりました。というかマニュアルに書いてありました。
「-」を付与しない場合、変数の値がなかったり、if文の結果がfalseの時、実は意図しない空白がHTMLにできているのですが、「-」を付与するとこの空白がなくなるのです。

{% , %}を使った場合、プレビューのHTMLのソースを見るとその箇所が空白行になります。
また、Liquidではオブジェクトの値などが出力されなかった場合でも空白行が出力されます。
{%- , -%}のように「-」を付けて書くとその部分が空白にならずに公開されます。

公開されたHTMLに空白があってもなくても基本的に問題にはならないので、知らなくても良い知識かもしれませんが、JSを使う時などにつまづくポイントになるかもしれませんので頭の片隅に入れておくといつかは役に立つかもしれません。