Liquid comments leak lines with the `:` colon character

Online Store and Theme Development
1

Short description of issue

A CSS declaration placed inside {% comment %} can appear in the generated stylesheet.

Reproduction steps

Looks like if you have a comment tag with a colon inside of it like this:

{% comment %}
  Mobile: symmetric outer columns so the centered logo stays centered regardless of the
  desktop menu position setting. Desktop layout is applied at the md breakpoint below.
{% endcomment %}

Then the comment is included in the stylesheet:

oh-hello-sir.png
oh-hello-sir.png1100×404 73.5 KB

What type of topic is this

Bug report

Additional info

Full reproduction section here (autogenerated)

2

I can confirm that this is a limitation but it’s something that we have a theme check for already: StaticStylesheetAndJavascriptTags

Disabling this check is not recommended, as using Liquid inside {% stylesheet %} or {% javascript %} tags can lead to errors in your theme.

If you want comments in your CSS and JS inside of {% stylesheet %} or {% javascript %} tags I’d recommend using those languages native comment syntax: /* ... */.

Does that help clarify things? Were you already aware of this limitation but hoping for some kind of platform change?

3

Oh good to know, I was not aware of the limitation.

I use stylesheet tags rarely (tailwind) and have a heavily customized theme-check system so this slipped through.

I don’t need a platform change, I’ll just update my theme-check rules.