Live reload doesn't update inline css style tag

[foray1010]

Bug Report

Environment

Zola version: 0.7.0

Expected Behavior

Live reload should update inline css style tag

Current Behavior

It does reload, but inline css style tag doesn't update its content

Step to reproduce

put the following code in structure.html and try updating the corresponding scss in sass folder

{% set css = load_data(path="public/style.css") %}
<style>
  {{css | safe}}
</style>

[Keats]

That's because only the CSS files are reloaded on Sass changes, the templates are not re-rendered. I don't think that is going to change

[Keats]

The only way to fix that would be the re-render templates on CSS change but that's not going to happen as it would slow down things a lot and hot reloading inline CSS is pretty niche.

[xSke]

Is there a way to detect whether you're using live reload or not from a template? In that case, could use an external reference if you're live reloading, and then inline it when doing a full build?

[Keats]

If you have the network tab of the browser open, you should see some websocket activity if there is live reload enabled and a change.
As for inlining some CSS file, I'm not against it but I don't know how it could be implemented easily (eg pick which file to inline etc)

[xSke]

Oh, I just meant as a template function. That way you can use the non-inlined version when you're just messing around and need fast reloading (zola serve), and inline things for speed/size when you need things compact and finalized (zola build). eg:

{% if zola.is_live_reloading %}
<link href="{{ get_url(path="style.css") | safe }}" rel="stylesheet">
{% else %}
<style>{{ load_data(path="public/style.css") | safe }}</style>
{% end_if %}

Unsure where such a variable would live in the template context (just a global?) but doesn't seem too hard, maybe?

[rslabbert]

For future reference, I was able to solve this through the following snippet which works for the default zola serve setup:

{% macro css(path) %}
    {% if current_url is starting_with("http://127.0.0.1:1111/") %}
        <link rel="stylesheet" href="{{path}}">
    {% else %}
        <style>{{ load_data(path="public/" ~ path) | trim | safe }}</style>
    {% endif %}
{% endmacro input %}

[tilleryd]

The solution by @rslabbert is just what I needed to boost my sites Lighthouse performance score. Some CSS files, like main.css, are render-blocking resources and greatly impacted the performance score.