wire shop.css alongside Tailwind for CSS migration (Phase 1)

- esbuild profile for shop.css bundling (dev watcher + build aliases)
- shop.css loaded as second stylesheet in shop_root layout
- LiveView display:contents rule in reset layer
- updated Lighthouse + Screenshots tasks for new esbuild target

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

assets/css/shop.css

@@ -8,8 +8,9 @@
 
 @import "./shop/reset.css";
 
-/* Theme primitives and tokens stay in their existing files.
+/* Theme CSS stays in the existing files (loaded via app-shop.css).
-   They'll be wrapped in @layer during Phase 1. */
+   Primitives and tokens will be wrapped in @layer when
+   app-shop.css is removed in Phase 5. */
 
 @import "./shop/components.css";
 @import "./shop/layout.css";

assets/css/shop/reset.css

@@ -77,4 +77,10 @@
     padding: 0;
     cursor: pointer;
   }
+
+  /* LiveView wrapper divs are layout-invisible */
+  [data-phx-session],
+  [data-phx-teleported-src] {
+    display: contents;
+  }
 }

config/config.exs

@@ -53,6 +53,10 @@ config :esbuild,
       ~w(js/app.js --bundle --target=es2022 --outdir=../priv/static/assets/js --external:/fonts/* --external:/images/* --alias:@=.),
     cd: Path.expand("../assets", __DIR__),
     env: %{"NODE_PATH" => [Path.expand("../deps", __DIR__), Mix.Project.build_path()]}
+  ],
+  simpleshop_theme_shop_css: [
+    args: ~w(css/shop.css --bundle --outdir=../priv/static/assets/css),
+    cd: Path.expand("../assets", __DIR__)
   ]
 
 # Configure tailwind (the version is required)

config/dev.exs

@@ -25,6 +25,8 @@ config :simpleshop_theme, SimpleshopThemeWeb.Endpoint,
   secret_key_base: "Jk04sYT/pzfZ0cywS+i0vCURPoQYgqAGa72uS8bv2gydLyusWFc08kJyEnQP4zgT",
   watchers: [
     esbuild: {Esbuild, :install_and_run, [:simpleshop_theme, ~w(--sourcemap=inline --watch)]},
+    esbuild_shop_css:
+      {Esbuild, :install_and_run, [:simpleshop_theme_shop_css, ~w(--sourcemap=inline --watch)]},
     tailwind: {Tailwind, :install_and_run, [:simpleshop_theme, ~w(--watch)]},
     tailwind_shop: {Tailwind, :install_and_run, [:simpleshop_theme_shop, ~w(--watch)]}
   ]

lib/mix/tasks/lighthouse.ex

@@ -136,6 +136,7 @@ defmodule Mix.Tasks.Lighthouse do
     Mix.Task.run("tailwind", ["simpleshop_theme", "--minify"])
     Mix.Task.run("tailwind", ["simpleshop_theme_shop", "--minify"])
     Mix.Task.run("esbuild", ["simpleshop_theme", "--minify"])
+    Mix.Task.run("esbuild", ["simpleshop_theme_shop_css", "--minify"])
     Mix.Task.run("phx.digest")
 
     Mix.shell().info("  Assets built and digested.")

lib/mix/tasks/screenshots.ex

@@ -161,6 +161,7 @@ defmodule Mix.Tasks.Screenshots do
     Mix.Task.run("tailwind", ["simpleshop_theme", "--minify"])
     Mix.Task.run("tailwind", ["simpleshop_theme_shop", "--minify"])
     Mix.Task.run("esbuild", ["simpleshop_theme", "--minify"])
+    Mix.Task.run("esbuild", ["simpleshop_theme_shop_css", "--minify"])
     Mix.Task.run("phx.digest")
 
     Mix.shell().info("  Assets built and digested.")

lib/simpleshop_theme_web/components/layouts/shop_root.html.heex

@@ -20,6 +20,7 @@
       <link rel="preload" href={preload.href} as="font" type="font/woff2" crossorigin />
     <% end %>
     <link phx-track-static rel="stylesheet" href={~p"/assets/css/app-shop.css"} />
+    <link phx-track-static rel="stylesheet" href={~p"/assets/css/shop.css"} />
     <script defer phx-track-static src={~p"/assets/js/app.js"}>
     </script>
     <!-- Generated theme CSS with @font-face declarations -->

mix.exs

@@ -100,12 +100,14 @@ defmodule SimpleshopTheme.MixProject do
         "compile",
         "tailwind simpleshop_theme",
         "tailwind simpleshop_theme_shop",
-        "esbuild simpleshop_theme"
+        "esbuild simpleshop_theme",
+        "esbuild simpleshop_theme_shop_css"
       ],
       "assets.deploy": [
         "tailwind simpleshop_theme --minify",
         "tailwind simpleshop_theme_shop --minify",
         "esbuild simpleshop_theme --minify",
+        "esbuild simpleshop_theme_shop_css --minify",
         "phx.digest"
       ],
       precommit: ["compile --warning-as-errors", "deps.unlock --unused", "format", "test"],