Theme settings not hot-reloading in {% style %} in Theme Editor

Open bryanbergman-pxu opened this issue 3 months ago • 0 comments

⚠️ This bug was reproduced in Dawn and can occur in any theme. ⚠️

Problem

IF a global theme setting is mapped to a CSS property in {% style %} AND that same setting is used within a CSS file imported via asset_url THEN the CSS property in {% style %} will not update in the Theme Editor until changes are saved.

The problem occurs the same if the {% style %} is within a rendered snippet or section.

Color settings do not have the same problem.

Workaround

Using <style> instead of {% style %} solves the problem.

Demo

Video showing the problem: https://files.pxu.co/DOuYdJg6

theme.liquid

<!doctype html>
<html>
  <head>
    {{ content_for_header }}
    {{ 'test.css' | asset_url | stylesheet_tag }}
  </head>

  <body>
    <p id="test">Testing</p>
    
    {% style %}
        #test {
          font-size: 2px;
          font-size: {{ settings.body_scale | append: 'px' }};
        }
    {% endstyle %}

    {{ content_for_layout }}
  </body>
</html>

test.css.liquid

#other {
    margin: {{ settings.body_scale | append: 'px' }};
}

Sep 05 '25 21:09 bryanbergman-pxu