Add squish filter

[bakura10]

Hello,

This PR provides a clean solution to #2040

This PR answers a common use case we're facing with Shopify themes. As themes now become more complex, it is often needed to compose classes or inline styles, for instance using capture tags:

{% capture styles %}
   --foo: {% if section.settings.foo %}10%{% else %}20%{% endif %};
   --bar: 10px;
{% endcapture %}

This, however, messes with whitespace. While this technically works, this makes it harder to debug. Horizon (Shopify free theme), especially, has this problem:

There are workarounds but they are fragile:

• You can use whitespace controls {%- -%} but they won't work in some cases (for instance in this capture example) and it is also easy to forget a -%}.
• You can use this solution but this is verbose and probably quite inefficient on long strings: {% foo | strip_newlines | split: ' ' | join: ' ' %}

This PR adds a new filter. The name follows the one from Ruby on Rails (https://api.rubyonrails.org/classes/String.html#method-i-squish) and offers a simple, elegant solution:

<div style="{{ style_attribute | squish }}">
</div>

I've signed the CLA. The associated documentation PR is #2051

[rylanharper]

Does this also work for inline conditional styles using class? Something like this (from the referenced issue):

<nav
  aria-label="Main navigation"
  class="hidden grid-cols-[1fr_max-content_1fr] [grid-template-areas:'left_center_right'] gap-12 h-full lg:grid
  {% if header_width == 'page' %} container mx-auto {% else %} px-6 {% endif %}
  {% if header_spacing == 'compact' %} min-h-8.5 {% else %} min-h-10.5 {% endif %}
  {% if header_text_style == 'uppercase' %} uppercase {% endif %}
  "
>
  // ... nav code
</nav>

[bakura10]

Nope. For this you will probably need to capture first the class and then output it:

{% capture class %}
hidden grid-cols-[1fr_max-content_1fr] [grid-template-areas:'left_center_right'] gap-12 h-full lg:grid
  {% if header_width == 'page' %} container mx-auto {% else %} px-6 {% endif %}
  {% if header_spacing == 'compact' %} min-h-8.5 {% else %} min-h-10.5 {% endif %}
  {% if header_text_style == 'uppercase' %} uppercase {% endif %}
{% endcapture %}

<nav aria-label="Main navigation"  class="{{ class | squish }}">
  // ... nav code
</nav>

[stefanroberts]

Completely agree this is needed (the Horizon whitespace issue is a real headache sometimes) and this is a nice easy elegant solution.

[graygilmore]

This makes sense to me, thanks for the contribution.