From fcd1b1ce80f11b4827c09bf0596cd499d83f3b2d Mon Sep 17 00:00:00 2001 From: jamey Date: Mon, 16 Feb 2026 23:45:13 +0000 Subject: [PATCH] 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 --- assets/css/shop.css | 5 +++-- assets/css/shop/reset.css | 6 ++++++ config/config.exs | 4 ++++ config/dev.exs | 2 ++ lib/mix/tasks/lighthouse.ex | 1 + lib/mix/tasks/screenshots.ex | 1 + .../components/layouts/shop_root.html.heex | 1 + mix.exs | 4 +++- 8 files changed, 21 insertions(+), 3 deletions(-) diff --git a/assets/css/shop.css b/assets/css/shop.css index 3ae264e..f254cb5 100644 --- a/assets/css/shop.css +++ b/assets/css/shop.css @@ -8,8 +8,9 @@ @import "./shop/reset.css"; -/* Theme primitives and tokens stay in their existing files. - They'll be wrapped in @layer during Phase 1. */ +/* Theme CSS stays in the existing files (loaded via app-shop.css). + 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"; diff --git a/assets/css/shop/reset.css b/assets/css/shop/reset.css index 4fe057d..08e2359 100644 --- a/assets/css/shop/reset.css +++ b/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; + } } diff --git a/config/config.exs b/config/config.exs index 871b9f5..ee0c66f 100644 --- a/config/config.exs +++ b/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) diff --git a/config/dev.exs b/config/dev.exs index 803b1bd..675af24 100644 --- a/config/dev.exs +++ b/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)]} ] diff --git a/lib/mix/tasks/lighthouse.ex b/lib/mix/tasks/lighthouse.ex index 3507192..7e817bd 100644 --- a/lib/mix/tasks/lighthouse.ex +++ b/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.") diff --git a/lib/mix/tasks/screenshots.ex b/lib/mix/tasks/screenshots.ex index a618c24..d5494dd 100644 --- a/lib/mix/tasks/screenshots.ex +++ b/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.") diff --git a/lib/simpleshop_theme_web/components/layouts/shop_root.html.heex b/lib/simpleshop_theme_web/components/layouts/shop_root.html.heex index 716a087..2bf5f11 100644 --- a/lib/simpleshop_theme_web/components/layouts/shop_root.html.heex +++ b/lib/simpleshop_theme_web/components/layouts/shop_root.html.heex @@ -20,6 +20,7 @@ <% end %> + diff --git a/mix.exs b/mix.exs index aba69d3..095e95a 100644 --- a/mix.exs +++ b/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"],