From 3c9a428d097bd028f625e99077f232ce1a081f75 Mon Sep 17 00:00:00 2001 From: jamey Date: Sun, 1 Mar 2026 23:24:47 +0000 Subject: [PATCH] extract shared theme CSS into standalone bundle Move the 3 theme layer imports (primitives, layer2-attributes, semantic) out of admin.css and shop.css into a new theme.css bundle loaded by all root layouts. Eliminates 28 KB of duplication on admin pages where both admin.css and shop.css were each embedding the same theme CSS. Co-Authored-By: Claude Opus 4.6 --- assets/css/admin.css | 5 ----- assets/css/shop.css | 7 ------- assets/css/theme.css | 6 ++++++ config/config.exs | 4 ++++ config/dev.exs | 4 +++- lib/berrypod_web/components/layouts/admin_root.html.heex | 1 + lib/berrypod_web/components/layouts/root.html.heex | 1 + lib/berrypod_web/components/layouts/shop_root.html.heex | 1 + mix.exs | 4 +++- test/berrypod_web/live/theme_css_consistency_test.exs | 6 +++--- 10 files changed, 22 insertions(+), 17 deletions(-) create mode 100644 assets/css/theme.css diff --git a/assets/css/admin.css b/assets/css/admin.css index 2452551..ecddf87 100644 --- a/assets/css/admin.css +++ b/assets/css/admin.css @@ -3,11 +3,6 @@ /* Reset */ @import "./admin/reset.css"; -/* Theme CSS layers (used by theme editor preview) */ -@import "./theme-primitives.css"; -@import "./theme-layer2-attributes.css"; -@import "./theme-semantic.css"; - /* Admin components, layout, icons, transitions */ @import "./admin/components.css"; @import "./admin/layout.css"; diff --git a/assets/css/shop.css b/assets/css/shop.css index c7e98b7..6c7db16 100644 --- a/assets/css/shop.css +++ b/assets/css/shop.css @@ -5,13 +5,6 @@ @import "./shop/reset.css"; -/* Theme CSS — unlayered so it overrides component layers (intentional). - Primitives set CSS custom properties, layer2 sets theme-aware rules, - semantic sets base styles on .themed containers. */ -@import "./theme-primitives.css"; -@import "./theme-layer2-attributes.css"; -@import "./theme-semantic.css"; - @import "./shop/components.css"; @import "./shop/layout.css"; @import "./shop/utilities.css"; diff --git a/assets/css/theme.css b/assets/css/theme.css new file mode 100644 index 0000000..49b3b99 --- /dev/null +++ b/assets/css/theme.css @@ -0,0 +1,6 @@ +/* Theme design tokens — shared by admin and shop CSS bundles. + Loaded separately so the browser caches it once for all page types. */ + +@import "./theme-primitives.css"; +@import "./theme-layer2-attributes.css"; +@import "./theme-semantic.css"; diff --git a/config/config.exs b/config/config.exs index b53a6d7..23b707b 100644 --- a/config/config.exs +++ b/config/config.exs @@ -61,6 +61,10 @@ config :esbuild, berrypod_admin_css: [ args: ~w(css/admin.css --bundle --outdir=../priv/static/assets/css), cd: Path.expand("../assets", __DIR__) + ], + berrypod_theme_css: [ + args: ~w(css/theme.css --bundle --outdir=../priv/static/assets/css), + cd: Path.expand("../assets", __DIR__) ] # Configures Elixir's Logger diff --git a/config/dev.exs b/config/dev.exs index 62a6996..c533f93 100644 --- a/config/dev.exs +++ b/config/dev.exs @@ -35,7 +35,9 @@ config :berrypod, BerrypodWeb.Endpoint, esbuild_shop_css: {Esbuild, :install_and_run, [:berrypod_shop_css, ~w(--sourcemap=inline --watch)]}, esbuild_admin_css: - {Esbuild, :install_and_run, [:berrypod_admin_css, ~w(--sourcemap=inline --watch)]} + {Esbuild, :install_and_run, [:berrypod_admin_css, ~w(--sourcemap=inline --watch)]}, + esbuild_theme_css: + {Esbuild, :install_and_run, [:berrypod_theme_css, ~w(--sourcemap=inline --watch)]} ] # ## SSL Support diff --git a/lib/berrypod_web/components/layouts/admin_root.html.heex b/lib/berrypod_web/components/layouts/admin_root.html.heex index 2678ecd..180e1e7 100644 --- a/lib/berrypod_web/components/layouts/admin_root.html.heex +++ b/lib/berrypod_web/components/layouts/admin_root.html.heex @@ -18,6 +18,7 @@ + diff --git a/lib/berrypod_web/components/layouts/root.html.heex b/lib/berrypod_web/components/layouts/root.html.heex index fe77041..aeedb70 100644 --- a/lib/berrypod_web/components/layouts/root.html.heex +++ b/lib/berrypod_web/components/layouts/root.html.heex @@ -18,6 +18,7 @@ + + <%= if assigns[:current_scope] && @current_scope.user do %> diff --git a/mix.exs b/mix.exs index 78af016..5cc7945 100644 --- a/mix.exs +++ b/mix.exs @@ -100,12 +100,14 @@ defmodule Berrypod.MixProject do "compile", "esbuild berrypod", "esbuild berrypod_shop_css", - "esbuild berrypod_admin_css" + "esbuild berrypod_admin_css", + "esbuild berrypod_theme_css" ], "assets.deploy": [ "esbuild berrypod --minify", "esbuild berrypod_shop_css --minify", "esbuild berrypod_admin_css --minify", + "esbuild berrypod_theme_css --minify", "phx.digest" ], precommit: ["compile --warning-as-errors", "deps.unlock --unused", "format", "test"], diff --git a/test/berrypod_web/live/theme_css_consistency_test.exs b/test/berrypod_web/live/theme_css_consistency_test.exs index f677b7b..b66f470 100644 --- a/test/berrypod_web/live/theme_css_consistency_test.exs +++ b/test/berrypod_web/live/theme_css_consistency_test.exs @@ -90,11 +90,11 @@ defmodule BerrypodWeb.ThemeCSSConsistencyTest do end describe "CSS file structure" do - test "admin.css imports shared theme layers" do - css_path = Path.join([File.cwd!(), "assets", "css", "admin.css"]) + test "theme.css imports shared theme layers" do + css_path = Path.join([File.cwd!(), "assets", "css", "theme.css"]) css_content = File.read!(css_path) - # Admin imports the shared theme layers so .themed resolves all tokens + # Theme bundle imports all three shared layers assert css_content =~ "theme-primitives.css" assert css_content =~ "theme-layer2-attributes.css" assert css_content =~ "theme-semantic.css"