[Proposal] Add `strip_class_whitespace` filter for conditional classes
Nobody has claimed this yet.
- Dominant language
- Ruby
- Stars
- 11.9k
- Forks
- 1.5k
- Avg merge
- 17h 55m
- Merged PRs (30d)
- 3
Description
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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
No implementation file or test is named in the issue. Start by locating Liquid's filter entry points and filter tests, then clarify how whitespace normalization should apply to class strings without changing other output. Done means the proposed filter behavior is implemented, covered by tests, and produces single-spaced class values.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- ruby, tailwindcss, vite
- Domain
- web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100