Repository: gohugoio/hugo (language: go)

Issue:
Live reload issue when both HTML and CSS changes
While testing the new `defer` feature, I found a peculiar issue in (at least) Chrome and Safari.

This is the typical "TailwindCSS workflow." I have previously recommended a workflow that watches the `hugo_stats.json` for changes, and in that setup, this isn't an issue (you get 2 builds, first the HTML, then the CSS).

But if you build both in one Go, we do a full browser reload, and the HTML change is visible, but not the CSS change (no fingerprinting of the CSS file).

This situation can be detected, and I have tested that this works:

1. First do a reload of the page.
2. Wait some ...
3. Do a refresh of (only) the changed CSS.




Discussion / hints:

Fix patch:
diff --git a/commands/hugobuilder.go b/commands/hugobuilder.go
index d77f1f178d8..84608ca374c 100644
--- a/commands/hugobuilder.go
+++ b/commands/hugobuilder.go
@@ -903,6 +903,29 @@ func (c *hugoBuilder) handleEvents(watcher *watcher.Batcher,
 					livereload.RefreshPath(pathToRefresh)
 				} else {
 					livereload.ForceRefresh()
+					// See https://github.com/gohugoio/hugo/issues/12600.
+					// If this change set also contains one or more CSS files, we need to
+					// refresh these as well.
+					var cssChanges []string
+					var otherChanges []string
+
+					for _, ev := range changed {
+						if strings.HasSuffix(ev, ".css") {
+							cssChanges = append(cssChanges, ev)
+						} else {
+							otherChanges = append(otherChanges, ev)
+						}
+					}
+
+					if len(otherChanges) > 0 {
+						livereload.ForceRefresh()
+						// Allow some time for the live reload script to get reconnected.
+						time.Sleep(100 * time.Millisecond)
+					}
+
+					for _, ev := range cssChanges {
+						livereload.RefreshPath(h.PathSpec.RelURL(paths.ToSlashTrimLeading(ev), false))
+					}
 				}
 			}
 


Test patch: