[ ๐—•๐˜‚๐—ด ] Newline in whitespace controlled snippet

Online Store and Theme Development
1

Snippets return a single newline character even if they
only contain a white-space controlled liquid block.

Example

Snippet.liquid


{%- liquid

    # Liquid block with whitespace before and 
    # after but controlled with '-' on both ends.

-%}

Test.liquid


{%- liquid

    capture content
        render 'Snippet'
    endcapture

-%}

[{{ content }}]

Expected Output

[]

Actual Output

[
]

( Square Open Bracket , Newline , Square Close Bracket )


Subsequent Problems

This can easily break any snippet used for processing.

Take for example a snippet that transforms a multiline
string into a list of comma separated handles , on the
receiving side you expect the string to be clean so you
simply have to split it by itโ€™s commas.

If just one newline is added before the processing
snippets liquid block , the output is contaminated
and will most likely fail when used directory in for
example indexing operations.

Unless itโ€™s post-processed again , which makes it worse
to use or every index is stripped which is easily forgotten.

2

Iโ€™d say itโ€™s not a problem with snippet rendering, but with capturing, which is complicated inside {% liquid %} blocks.

Have you tried

{% capture content %}{% render 'Snippet' %}{% endcapture %}

[{{ content }}]
1 Like
3

  • You are correct in that it seems to be an issue with the capture tag

  • It doesnโ€™t seem to depend on whether itโ€™s inside a liquid block or not

  • The newline does seem to originate from the snippet , but is
    only rendered when the render tag is inside a capture tag

  • White space control on the render & capture & liquid
    ( snippet ) tags donโ€™t seem to affect the newline

Test Code


{%- liquid

    capture a
        render 'Snippet'
    endcapture

-%}

{% capture b %}{% render 'Snippet' %}{% endcapture %}
{% capture c %}{%- render 'Snippet' -%}{% endcapture %}
{%- capture d -%}{% render 'Snippet' %}{%- endcapture -%}
{%- capture e -%}{%- render 'Snippet' -%}{%- endcapture -%}

A : {{ a.size }}
B : {{ b.size }}
C : {{ c.size }}
D : {{ d.size }}
E : {{ e.size }}

F : [{{- render 'Snippet' -}}]
G : [{{ render 'Snippet' }}]

Test Case A


{%- liquid

    # Space before & after

-%}

Output

A : 1 B : 1 C : 1 D : 1 E : 1 F : [] G : []

Test Case B

{%- liquid

    # No space before liquid block

-%}


A : 0 B : 0 C : 0 D : 0 E : 0 F : [] G : []