Fix live reload when both CSS and HTML changes

This seems to be a browser bug (tested in both Chrome and Safari on MacOS), but it seems that doing a `window.location.reload()` (or `window.location.reload(true)`) doesn't refresh the CSS changes, even if HTTP caching is disabled.

This commit works around this by doing additional refreshes of the CSSes.

Closes #12600

1 files changed, 23 insertions, 0 deletions

diff --git a/commands/hugobuilder.go b/commands/hugobuilder.go
index d77f1f178..84608ca37 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))
+					}
 				}
 			}