the best solution to a problem is usually the easiest one

assets/js/app.js

@@ -9,5 +9,11 @@
 import './ujs';
 import './when-ready';
 
-// Fallback on the dark theme for now
-import '../css/themes/dark.scss';
+// When developing CSS, include the relevant CSS you're working on here
+// in order to enable HMR (live reload) on it.
+// Would typically be either the theme file, or any additional file
+// you later intend to put in the <link> tag.
+
+// import '../css/themes/default.scss';
+// import '../css/themes/dark.scss';
+// import '../css/themes/red.scss';

config/dev.exs

@@ -24,6 +24,16 @@ config :philomena, PhilomenaWeb.Endpoint,
       "--config",
       "vite.config.ts",
       cd: Path.expand("../assets", __DIR__)
+    ],
+    node: [
+      "node_modules/vite/bin/vite.js",
+      "build",
+      "--mode",
+      "development",
+      "--watch",
+      "--config",
+      "vite.config.ts",
+      cd: Path.expand("../assets", __DIR__)
     ]
   ]
 

lib/philomena_web/plugs/content_security_policy_plug.ex

@@ -24,9 +24,9 @@ defmodule PhilomenaWeb.ContentSecurityPolicyPlug do
 
       csp_config = [
         {:default_src, ["'self'"]},
-        {:script_src, ["'self' localhost:5173" | script_src]},
-        {:connect_src, ["'self' ws://localhost:5173 localhost:5173"]},
-        {:style_src, ["'self' 'unsafe-inline'" | style_src]},
+        {:script_src, [default_script_src() | script_src]},
+        {:connect_src, [default_connect_src()]},
+        {:style_src, [default_style_src() | style_src]},
         {:object_src, ["'none'"]},
         {:frame_ancestors, ["'none'"]},
         {:frame_src, frame_src || ["'none'"]},
@@ -64,6 +64,14 @@ defmodule PhilomenaWeb.ContentSecurityPolicyPlug do
 
   defp cdn_uri, do: Application.get_env(:philomena, :cdn_host) |> to_uri()
   defp camo_uri, do: Application.get_env(:philomena, :camo_host) |> to_uri()
+  defp vite_reload?, do: Application.get_env(:philomena, :vite_reload)
+
+  defp default_script_src, do: if(vite_reload?(), do: "'self' localhost:5173", else: "'self'")
+
+  defp default_connect_src,
+    do: if(vite_reload?(), do: "'self' localhost:5173 ws://localhost:5173", else: "'self'")
+
+  defp default_style_src, do: if(vite_reload?(), do: "'self' 'unsafe-inline'", else: "'self'")
 
   defp to_uri(host) when host in [nil, ""], do: ""
   defp to_uri(host), do: URI.to_string(%URI{scheme: "https", host: host})

lib/philomena_web/templates/layout/app.html.slime

@@ -10,6 +10,9 @@ html lang="en"
         ' - Derpibooru
       - else
         ' Derpibooru
+    link rel="stylesheet" href=stylesheet_path(@conn, @current_user)
+    = if is_nil(@current_user) do
+      link rel="stylesheet" href=dark_stylesheet_path(@conn) media="(prefers-color-scheme: dark)"
     link rel="icon" href="/favicon.ico" type="image/x-icon"
     link rel="icon" href="/favicon.svg" type="image/svg+xml"
     meta name="generator" content="philomena"
@@ -21,9 +24,6 @@ html lang="en"
       script type="module" src="http://localhost:5173/@vite/client"
       script type="module" src="http://localhost:5173/js/app.js"
     - else
-      link rel="stylesheet" href=stylesheet_path(@conn, @current_user)
-      = if is_nil(@current_user) do
-        link rel="stylesheet" href=dark_stylesheet_path(@conn) media="(prefers-color-scheme: dark)"
       script type="text/javascript" src=Routes.static_path(@conn, "/js/app.js") async="async"
     = render PhilomenaWeb.LayoutView, "_opengraph.html", assigns
   body data-theme=theme_name(@current_user) data-vite-reload=to_string(vite_reload?())