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:
- Create a Snippet containing {% stylesheet %} Tag
- Capture that Snippet Content in a Block/Section/Snippet that is containing {% stylesheet %}
- 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 %}`
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:
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 %}