Fix Docker build CSS import errors

Moved CSS imports from Tailwind config to JavaScript to let ESBuild handle them.
This fixes the Docker build error where Tailwind couldn't resolve node_modules paths.

- Removed CSS @import statements from app.css
- Added CSS imports to map.ts where Leaflet is used
- Configured ESBuild to handle CSS and image files
- Added missing topbar package to package.json
- Updated both dev and prod ESBuild configs

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

assets/css/app.css

@@ -3,10 +3,7 @@
 @source "../js";
 @source "../../lib/aprsme_web";
 
-/* Import vendor CSS files from node_modules */
-@import "leaflet/dist/leaflet.css";
-@import "leaflet.markercluster/dist/MarkerCluster.css";
-@import "leaflet.markercluster/dist/MarkerCluster.Default.css";
+/* Vendor CSS files are imported via JavaScript/ESBuild */
 
 /* A Tailwind plugin that makes "hero-#{ICON}" classes available.
    The heroicons installation itself is managed by your mix.exs */

assets/js/map.ts

@@ -18,6 +18,11 @@ import 'leaflet.heat';
 import 'leaflet.markercluster';
 import 'overlapping-marker-spiderfier-leaflet';
 
+// Import CSS files
+import 'leaflet/dist/leaflet.css';
+import 'leaflet.markercluster/dist/MarkerCluster.css';
+import 'leaflet.markercluster/dist/MarkerCluster.Default.css';
+
 // Make Leaflet globally available for legacy code
 window.L = L;
 

assets/package.json

@@ -5,7 +5,8 @@
     "leaflet": "^1.9.4",
     "leaflet.heat": "^0.2.0",
     "leaflet.markercluster": "^1.5.3",
-    "overlapping-marker-spiderfier-leaflet": "^0.2.7"
+    "overlapping-marker-spiderfier-leaflet": "^0.2.7",
+    "topbar": "^3.0.0"
   },
   "name": "assets",
   "version": "1.0.0",

config/config.exs

@@ -82,7 +82,7 @@ config :esbuild,
   version: "0.24.2",
   default: [
     args:
-      ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
+      ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/* --loader:.css=css --loader:.png=file --loader:.svg=file),
     cd: Path.expand("../assets", __DIR__),
     env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
   ]

config/prod.exs

@@ -17,9 +17,10 @@ config :aprsme, AprsmeWeb.Endpoint,
 # Runtime production configuration, including reading
 
 config :esbuild,
-  version: "0.17.11",
+  version: "0.24.2",
   default: [
-    args: ~w(js/app.js --bundle --target=es2020 --outdir=../priv/static/assets --loader:.ts=ts),
+    args:
+      ~w(js/app.js --bundle --target=es2020 --outdir=../priv/static/assets --loader:.ts=ts --loader:.css=css --loader:.png=file --loader:.svg=file --external:/fonts/* --external:/images/*),
     cd: Path.expand("../assets", __DIR__),
     env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
   ]