Theme settings not hot-reloading in {% style %} in Theme Editor #1985
Description
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' }};
}