From 53ce452cdf6324de606dcd586fffe6b8d899cf7d Mon Sep 17 00:00:00 2001
From: Graham McIntire <graham@mcintire.me>
Date: Mon, 21 Jul 2025 11:59:04 -0500
Subject: [PATCH] Fix Docker build CSS import errors
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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  | 5 +----
 assets/js/map.ts    | 5 +++++
 assets/package.json | 3 ++-
 config/config.exs   | 2 +-
 config/prod.exs     | 5 +++--
 5 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/assets/css/app.css b/assets/css/app.css
index 9e7ab54..3499432 100644
--- a/assets/css/app.css
+++ b/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 */
diff --git a/assets/js/map.ts b/assets/js/map.ts
index 60bca49..1d06fee 100644
--- a/assets/js/map.ts
+++ b/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;
 
diff --git a/assets/package.json b/assets/package.json
index a892a40..2e992d6 100644
--- a/assets/package.json
+++ b/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",
diff --git a/config/config.exs b/config/config.exs
index 7888375..1bce9d3 100644
--- a/config/config.exs
+++ b/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__)}
   ]
diff --git a/config/prod.exs b/config/prod.exs
index 4701bd1..bdda23e 100644
--- a/config/prod.exs
+++ b/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__)}
   ]