feat: add CSS live reload for dev setup
Two-part solution for automatic CSS updates during development: 1. `bb watch-theme` — polls src/ui/*.css and tokens.edn every 500ms, rebuilds dist/theme.css and copies to dev targets on change. 2. `dev/css-live-reload.js` — browser-side script that polls /theme.css and hot-swaps the stylesheet without a full page reload (no FOUC). The watcher runs automatically in the hiccup tmux pane when using `bb dev-all`. It can also be run standalone with `bb watch-theme`. The live-reload script is included in all three dev targets (hiccup, replicant, squint) and copied by `bb build-theme`.
This commit is contained in:
@@ -503,6 +503,7 @@
|
||||
[:script (h/raw theme-persistence-script)]]
|
||||
[:body
|
||||
[:script {:src "/theme-adapter.js" :defer true}]
|
||||
[:script {:src "/css-live-reload.js" :defer true}]
|
||||
(sidebar/sidebar-layout {}
|
||||
(app-sidebar active-page port)
|
||||
(sidebar/sidebar-overlay {})
|
||||
@@ -534,6 +535,11 @@
|
||||
:headers {"Content-Type" "application/javascript"}
|
||||
:body (slurp "dev/theme-adapter.js")}
|
||||
|
||||
(= path "/css-live-reload.js")
|
||||
{:status 200
|
||||
:headers {"Content-Type" "application/javascript"}
|
||||
:body (slurp "dev/css-live-reload.js")}
|
||||
|
||||
(resolve-page path)
|
||||
{:status 200
|
||||
:headers {"Content-Type" "text/html; charset=utf-8"}
|
||||
|
||||
Reference in New Issue
Block a user