In Liquid sections, section.id may contain equals symbols breaking CSS selectors (in editor section preview)

Online Store and Theme Development
,
1

Short description of issue

In Liquid sections, section.id may contain equals symbols breaking CSS selectors. This occurs when displayed in the editor section preview.

Reproduction steps

Take any section in any theme that includes a CSS selector built using section.id. Here is an example from Dawn:

Add simple CSS that would have a clear effect.

For example, in Dawn’s sections/image-banner.liquid, adding these at line 30 should hide the image and turn the background red:

#Banner-{{ section.id }} { background: red }
#Banner-{{ section.id }} .banner__media { display: none }

This CSS is not applied in the section preview, but it is when you add the section to the page.

The section preview is inserting equals symbols (=) into the section.id, making the CSS selector invalid. This character would need escaping in CSS.

Additional info

This has been the cause of sections in our themes not appearing in the section preview, and has been going on for many months.

On the surface it seems like a simple fix this, which will increase the stability of the theme customiser.

If section.id can be relied on in CSS selectors, and Dawn’s CSS implies it should, then it should never contain invalid characters like this.

The screenshot shows how the padding CSS in Dawn’s sections is never applied to the section, as observed in dev tools.

What type of topic is this

Bug report

Upload screenshot(s) of issue

equals-in-dawn-ids.png
equals-in-dawn-ids.png3744×1530 420 KB

2

Hi Will!

Thanks for providing a detailed report on your concerns with theme editor previews.

I was able to replicate the issue you shared with those replication steps, and agree it seems that the cause of the issue is the equals symbols that’s included.

Let me see what we can do about this :slight_smile:

4

Hi Will,

I wanted to give you a quick update on this issue. We’re planning to address it in an upcoming update, though I don’t have a specific timeline to share at the moment.

5

We’re facing the same issue @Paige-Shopify . This should be pretty easy to solve at Shopify level. Could this be escalated?

6

@Liam-Shopify Sorry for pinging you on that but could this be escalated with high priority? We’re using extensively this pattern of using ID to target section, so due to that all preview in the theme editor are incorrect. This should really be a simple fix (just removing the disallowed characters)

7

Hi @bakura10

Connecting with the internal team for this now - will update here asap.

8

@Liam-Shopify Sorry for pinging you on that but could this be escalated with high priority? We’re using extensively this pattern of using ID to target section, so due to that all preview in the theme editor are incorrect.

9

Hey @bakura10, this should be resolved now!

10

Hello!

I confirm it is working now, thanks a lot! Now if the declarative shadow dom support could be fixed, that would solve all our current problems ;). If this issue could be pushed as well we would appreciate it, it is a very simple change as well.