Skip to content

{% stylesheet %} Tag is not appended to the Header when using {% capture %} with another Stylesheet Tag #2097

@ErikZoeppig

Description

@ErikZoeppig

Hey,

I have just encountered the Issue that my Editor and Preview is not resolving {% stylesheet %} tags when im capturing Content containing Snippets with additional {% stylesheet %} Tags.

In my example the stylesheet for the custom badge Snippet is getting resolved properly and applied in both Editor and Preview. The Stylesheet Tag for my Block is not resolved. When removing the capture Block of the Snippet the Stylesheet is getting resolved properly.
Note the Error is not showing up in the Terminal or in the Theme code. The Stylesheet just gets lost somewhere on the Serverside.
My assumption is that capturing a snippet containing a Stylesheet tag is handled as a base String relating into the "Duplicate entries for tag: stylesheet" Error without noticing.

CLI Version: 4.1.0

Steps to reproduce:

  1. Create a Snippet containing {% stylesheet %} Tag
  2. Capture that Snippet Content in a Block/Section/Snippet that is containing {% stylesheet %}
  3. Stylesheet for the Block/Section/snippet is not resolved

For better readability i have truncated my example Block Code to only show relevant Lines.
Example Code:
{% capture badge_content %} {% render 'custom-badge', badge_entry: badge_entry, class: "badge-info-drawer__badge" %} {% endcapture %}
{{ badge_content }}
{% stylesheet %}
.badge-info-drawer__opener{
text-align: left;
}
.badge-info-drawer__badge{
width: fit-content;
}
.badge-info-drawer__opener-info{
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.25rem;
}
.badge-info-drawer__opener-icon{
width: 30px;
height: 30px;
object-fit: contain;
}
{% endstylesheet %}

Example Custom Badge Snippet:
`{% doc %}
@param {object} badge_entry - A single badge entry Metaobject containing text, colors, and display settings.
@param {string} [class] - Additional CSS classes to apply to the badge container.
@example
{% render 'custom-badge', badge_entry: badge_entry %}
{% enddoc %}
{% if badge_entry %}
{% assign badge_font_lowercase = badge_entry.font.value | downcase %}

{%- if badge_entry.icon.value != blank -%} {{ badge_entry.icon.value | image_url: width: badge_entry.icon.value.width | image_tag: width: 20, height: 20, widths: '50, 100, 200, 500', alt: badge_entry.icon.value.alt, loading: 'lazy', class: 'product-badges__badge-icon' }} {%- endif -%} {{- badge_entry.text.value -}}
{% endif %}`

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions