[Proposal] Add `strip_class_whitespace` filter for conditional classes
Hey there Shopify Team!
The Problem
I'm developing my first theme using Vite and Tailwind and I've noticed it's incredibly difficult to write clean, readable conditional classes in Liquid without creating whitespace issues in the rendered HTML.
Here's an example with conditional Tailwind classes based on my header schema settings:
<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>This renders classes with extra whitespace from the newlines:
class="hidden grid-cols-[1fr_max-content_1fr] [grid-template-areas:'left_center_right'] gap-12 h-full lg:grid
px-6
min-h-10.5
uppercase
"While this doesn't break functionality (browsers normalize whitespace in class attributes), it makes the rendered HTML messy and harder to debug.
I can use Liquid's whitespace control {%- and -%} to fix this, but it requires careful placement of dashes that's easy to get wrong, resulting in either extra spaces or missing spaces between class names. Here is the correct version:
<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>Proposal
Add a | strip_class_whitespace filter (or something similar) that normalizes whitespace in class attributes.
Here is an example:
class="{{ 'hidden 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 %}
' | strip_class_whitespace }}"This would collapse all whitespace to single spaces, making it much easier to write readable conditional classes. This especially important as Tailwind adoption grows in Shopify theme development.
Source: Shopify/liquid