Shopify / Shopify/liquid

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

Open
#2,097 0 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,

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 %}`

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

Start by reproducing the supplied capture, render, and stylesheet-tag example with CLI version 4.1.0, comparing it with the version that removes capture. Trace how stylesheet tags are handled across captured snippet content, and consider the issue done when the block or section stylesheet is appended in both the Editor and Preview without a duplicate-entry error.

Written by the indexing model from the issue text.

Assessment

Tech stack
ruby
Domain
backend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
58/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.