Shopify / Shopify/liquid

[Proposal] Add `strip_class_whitespace` filter for conditional classes

Open
#2,040 7 comments 0 reactions 0 assignees View on GitHub

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.