11ty logo

While working on the site I noticed livereload seemed to be quirky on css changes.

When changing CSS the page would not reload despite the client working.

Problem #

When looking in the console output I found livereload was doing a partial reload on CSS modifications.

[11ty][09:48:44.049 UTC] Connected
[11ty][09:48:44.049 UTC] CSS updated without page reload.

On looking into the code I found the CSS updated without page reload message referenced link rel=stylesheet which would work if that was what was being used for CSS.

  async onreload({ subtype, files, build }) {
    if (subtype === "css") {
      for (let link of document.querySelectorAll(`link[rel="stylesheet"]`)) {
        let url = new URL(link.href);
        url.searchParams.set("_11ty", Date.now());
        link.href = url.toString();
      }
      Util.log(`CSS updated without page reload.`);
    }

As I am using inline style this does nothing with regard to page reload.

Fixing The Problem #

A simple fix is to remove this code.

176,184c176,177
<   async onreload({ subtype, files, build }) {
<     if (subtype === "css") {
<       for (let link of document.querySelectorAll(`link[rel="stylesheet"]`)) {
<         let url = new URL(link.href);
<         url.searchParams.set("_11ty", Date.now());
<         link.href = url.toString();
<       }
<       Util.log(`CSS updated without page reload.`);
<     } else {
---
>   async onreload({ files, build }) {
>
241d233
<       }

Using Patched reload-client #

To use this I saved the patched reload-client.js to public/ & disabled liveReload in serverOptions.

  // Disable livereload injection (use patched instead)
  // This fixes inlined CSS (default changes style link elements)
  eleventyConfig.setServerOptions({
    liveReload: false,
  })

I then added reload-client to the footer of the page to test that it worked.
It now did a full page reload on css changes.

Using reload-client On Dev Mode #

I only wanted to reference reload-client on development mode so ended up creating a variable in src/_data named isdev to check if eleventy is running in dev mode.

module.exports = function () {
  return /serve|watch/.test(process.argv.join())
}

It should now be possible to access this using nunjucks.

{% if isdev %}
<script type="module" src="/reload-client.js"></script>
{% endif %}

Now the script is only inserted on dev mode & not on build mode.

Source Code #

The source for my 11ty blog is available on github.

11ty-equk