CSS changes are not reflected in the browser without a manual refresh

[scottsweb]

The issue

When using 11ty bundle to create bundles of CSS, the live reload functionality of 11ty breaks. Editing the CSS triggers a rebuild as expected, but the changes cannot be seen in the browser until you manually refresh the page.

This is the console log from testing eleventy-base-blog:

npm run start

> [email protected] start
> npx @11ty/eleventy --serve --quiet

(node:15855) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
[11ty] Copied 5 Wrote 16 files in 0.36 seconds (v3.0.0)
[11ty] Watching…
[11ty] Server at http://localhost:8080/
[11ty] File changed: public/css/index.css
[11ty] Copied 5 Wrote 16 files in 0.18 seconds (v3.0.0)

I believe this issue extends beyond the base blog though, it is currently impacting my starter theme and this PR in which I hope to use bundles. I have also found other folks discussing similar things:

• https://github.com/11ty/eleventy-base-blog/issues/128
• https://equk.co.uk/2024/12/06/11ty-fix-inline-styles-livereload/

Things I have tried

• Switching to polling in chokidar as recommended in the documentation
• Removing inline styles during development:

{%- if eleventy.env.runMode === "serve" -%}
	<link rel="stylesheet" href="{% getBundleFileUrl 'css' %}">
{%- else -%}
	<style>{% getBundle 'css' %}</style>
{%- endif %}

This doesn't seem to help and results in many CSS bundles appearing in the output folder:

-rw-r--r--. 1 scott scott 13391 Nov 14 15:32 vxgdJLPMXh.css
-rw-r--r--. 1 scott scott  3726 Nov 14 15:32 WlTt7eHx1R.css
-rw-r--r--. 1 scott scott  3551 Jan  7 12:24 ZAQZGhTPjt.css
-rw-r--r--. 1 scott scott 11575 Nov 12 22:14 zFpR6RP7xC.css

My system

OS: Fedora Linux 41 Node: v22.11.0 Browsers: Firefox, Chrome

I'll keep poking things in the hope of a solution but let me know if there is anything I should be looking out for.

[Dexus]

@zachleat @ashur @hexagoncircle

This is really a bug, that should be fixed. It get me very frustrating, to change the code and to have the restart the whole server process...

Same here, I run with --serve --watch with <style>{% getBundle 'css', 'mypage' %}</style> to get only css this page needs exepted from the global css as important CSS. But I need always to restart the process to build the css, even it use --serve --watch

[scottsweb]

I noticed that a new 11ty alpha was pushed yesterday "@11ty/eleventy": "3.0.1-alpha.5" and log pointed to a new version of Eleventy Dev Server:

Upgrade to use Eleventy Dev Server v2.0.7

Which in turn suggests a reload issue has been addressed:

Fixes hot-reload issue with CSS changes outside of usage https://github.com/11ty/eleventy-dev-server/issues/88 https://github.com/11ty/eleventy-dev-server/issues/63 https://github.com/11ty/eleventy-dev-server/issues/99 **

I updated my local copy of eleventy-base-blog to use the alpha and also my starter elva and it seems to be fixed!

I think we might be able to close this.