Theme Editor doesn't respect conditions inside the style tag

[adamchipperfield]

When I place if or unless conditions inside the style tag, the theme editor ignores them and outputs the styles regardless.

This seems to relate to the theme editor feature which auto updates these values when settings are changed.

For example, see the code below.

If both the background and text colour settings are blank (or transparent), neither of the properties are normally rendered.

However, when inside of the theme editor both of these properties are rendered with empty CSS variables.

The theme editor should respect these if or unless conditions as it does outside of the editor.

[adamchipperfield]

I’ve found a workaround for now: multiple style tags, each inside the conditions themselves.

[Liam-Shopify]

Thanks for sharing this workaround @adamchipperfield !

[teamdijon]

It’s also possible to have the style markup inside a {% capture %} tag and then output it inside a {% style %} tag

{% capture dynamic_style %}
  {% assign base_selector = 'shopify-section-' | append: section.id %}

  {% if section.settings.background_color != blank %}
     --background-color: {{ section.settings.background_color }}; 
  {% endif %}
{% endcapture %}

{% style %}
  #{{ base_selector }} {
    {{ dynamic_style }}
  }
{% endstyle %}