Pretty Good Hot Reloading CSS with 11ty

Since my last post, I've still been messing around with 11ty. I made a basic version of the browser feature index I wrote about and I worked through learn 11ty from scratch to learn a bit more about good ways to structure projects.

One thing that bugged me about the way the book configured things, the css didn't reload automatically. It might not have been possible to easily do when the author was working on the book when the author was working on the book. Or it might have been too much of a digression from the main content.

I wanted to try some experiments out with responsive grids & I figured this would be a good time to get a basic hello world starter project to make my own starter kit so I could try out other little experiments. But I knew it had to have the ability to do live reloading that'd be good enough for demos, at least.

The basic problem is out of the box Eleventy doesn't watch or really think about css files at all. You can use addPassthroughCopy to copy assets like CSS files to the ouput, but eleventy is otherwise agnostic. So if you want to use sass (or postcss or whatever) you need to have a separate process running.

I found a few options in the docs on the --watch flag -- addWatchTarget and setWatchThrottleWaitTime -- that helped me get it so the browser preview would update when I saved a file.

Here's the essential bit of config:

  // copy all css files to the output dir
  eleventyConfig.addPassthroughCopy("./src/css/");

  // tell eleventy to trigger a rebuild when you change an scss
  eleventyConfig.addWatchTarget("./src/scss/");


  // there's a race condition, because
  // 1) sass is watching the .scss files to write the CSS files
  // 2) eleventy triggers it's own rebuild based on the sass being saved
  // and either can happen first
  // so tell eleventy to wait a bit before rebuilding the site
  eleventyConfig.setWatchThrottleWaitTime(25);

This works! I can change a SCSS rule & see the browser update close to instantenously.

1. the src/css directory is gitignored.
2. the wait time is arbitrary & would probably be too low for the number of files you'd have on a project that's bigger than a prototype.
3. the fact that there can be a race condition at all is a little 😬 / 🤔

In typing that out I realized there's another possiblity what if we tell eleventy to watch the css instead of the scss files? Would it be possible to omit the delay? I tried it out and unfortunately, nope, not the case.

A better way?

Ideally it'd be possible to use some kind of internal event & have 11ty be responsible for watching & transforming the sass the same as the markup files. There is a new feature coming ... and maybe it's already been made available - Custom File Extension Handlers that seems like it'd enable this type of setup. And I'm not the first person to have this idea, other people have opened similar tickets & one person wrote a long comment on the topic.

But I haven't tried that out yet and I like I said, I technically started this whole thing so I could try out some grid layouts, so that'll be something I'll need to come back to.