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:
44
scripts/watch-theme.bb
Normal file
44
scripts/watch-theme.bb
Normal file
@@ -0,0 +1,44 @@
|
||||
#!/usr/bin/env bb
|
||||
;; Watch src/ui/*.css and src/theme/tokens.edn for changes.
|
||||
;; On change, rebuild dist/theme.css and copy to dev targets.
|
||||
|
||||
(require '[babashka.fs :as fs]
|
||||
'[clojure.java.io :as io]
|
||||
'[clojure.string :as str]
|
||||
'[ui.css.gen :as gen])
|
||||
|
||||
(defn source-files []
|
||||
(concat (map str (fs/glob "src/ui" "*.css"))
|
||||
["src/theme/tokens.edn"]))
|
||||
|
||||
(defn get-mtimes []
|
||||
(into {}
|
||||
(keep (fn [p]
|
||||
(when (fs/exists? p)
|
||||
[p (fs/last-modified-time p)])))
|
||||
(source-files)))
|
||||
|
||||
(defn rebuild! []
|
||||
(gen/build-theme! {:input "src/theme/tokens.edn" :output "dist/theme.css"})
|
||||
(let [css (slurp "dist/theme.css")]
|
||||
(spit "dev/replicant/public/theme.css" css)
|
||||
(io/make-parents "dev/squint/public/theme.css")
|
||||
(spit "dev/squint/public/theme.css" css)))
|
||||
|
||||
(defn changed-filenames [prev curr]
|
||||
(->> (keys curr)
|
||||
(filter (fn [p] (not= (get prev p) (get curr p))))
|
||||
(map (fn [p] (last (str/split p #"/"))))))
|
||||
|
||||
(println "[watch-theme] Watching src/ui/*.css and src/theme/tokens.edn ...")
|
||||
(loop [prev (get-mtimes)]
|
||||
(Thread/sleep 500)
|
||||
(let [curr (get-mtimes)]
|
||||
(when (not= prev curr)
|
||||
(println (str "[watch-theme] Changed: " (str/join ", " (changed-filenames prev curr))))
|
||||
(try
|
||||
(rebuild!)
|
||||
(println "[watch-theme] Rebuilt and copied.")
|
||||
(catch Exception e
|
||||
(println (str "[watch-theme] ERROR: " (.getMessage e))))))
|
||||
(recur curr)))
|
||||
Reference in New Issue
Block a user