Live-reload config css changes during dev

alineacms · Jan 25, 2024 · 07786dd · 07786dd
1 parent 916a0bd
commit 07786dd
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/apps/dev/src/PositionField.module.css b/apps/dev/src/PositionField.module.css
@@ -1,3 +1,5 @@
 .field {
-  background: #eee;
+  border: 1px solid #eaeaef;
+  border-radius: 8px;
+  padding: 20px;
 }
diff --git a/src/dashboard/dev/DevDashboard.tsx b/src/dashboard/dev/DevDashboard.tsx
@@ -52,6 +52,14 @@ export function DevDashboard({loadConfig}: DevDashboardOptions) {
     })
   }, [config])
   function getConfig() {
+    // Reload css
+    const link = document.querySelector(
+      'link[href^="/entry.css"]'
+    ) as HTMLLinkElement
+    const copy = link.cloneNode() as HTMLLinkElement
+    copy.href = '/entry.css?' + Math.random()
+    copy.onload = () => link.remove()
+    link.after(copy)
     return loadConfig().then(setConfig)
   }
   useEffect(() => {