Inline CSS variables not rendering
Hello everyone!
I frequently utilize inline CSS variables while developing my themes to modify properties based on liquid variables.
Example:
<div class="test" style="--background-color: {{ bg_color }};"></div>
CSS: .test { background-color: var(--background-color); }
Lately, I've encountered an issue where these variables aren't consistently rendered in the DOM. This problem tends to occur more (but not exclusively) when I use the same block more than once on the same page. It often requires multiple reloads to properly apply the styles, if that even resolves the problem.
You can observe the issue on this page: https://onestic-sunrise.myshopify.com/pages/test.
Initially, when the page first loads, you'll notice that the variables are not declared, and they cannot be found in the HTML.
However, upon reloading the page, you'll see the intended appearance, where the variables now appear in the HTML.
Is anyone else experiencing this issue or does anyone have insights into why this problem might be occurring and can help me?
Thank you in advance
