jamey/berrypod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

extract shared theme CSS into standalone bundle

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
jamey 2026-03-01 23:24:47 +00:00
parent 40b9e80516
commit 3c9a428d09
10 changed files with 22 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
assets/css/admin.css
View File

@ -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";

7
assets/css/shop.css
View File

@ -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";

6
assets/css/theme.css Normal file
View File

@ -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";

4
config/config.exs
View File

@ -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

4
config/dev.exs
View File

@ -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

1
lib/berrypod_web/components/layouts/admin_root.html.heex
View File

@ -18,6 +18,7 @@
<style>
@layer properties, reset, primitives, tokens, theme, base, components, layout, admin, utilities, overrides;
</style>
<link phx-track-static rel="stylesheet" href={~p"/assets/css/theme.css"} />
<link phx-track-static rel="stylesheet" href={~p"/assets/css/admin.css"} />
<link phx-track-static rel="stylesheet" href={~p"/assets/css/shop.css"} />
<!-- Generated theme CSS with @font-face declarations -->

1
lib/berrypod_web/components/layouts/root.html.heex
View File

@ -18,6 +18,7 @@
<style>
@layer properties, reset, primitives, tokens, theme, base, components, layout, admin, utilities, overrides;
</style>
<link phx-track-static rel="stylesheet" href={~p"/assets/css/theme.css"} />
<link phx-track-static rel="stylesheet" href={~p"/assets/css/admin.css"} />
<!-- Generated theme CSS with @font-face declarations -->
<style id="theme-css">

1
lib/berrypod_web/components/layouts/shop_root.html.heex
View File

@ -62,6 +62,7 @@
<style>
@layer properties, reset, primitives, tokens, theme, base, components, layout, utilities, overrides;
</style>
<link phx-track-static rel="stylesheet" href={~p"/assets/css/theme.css"} />
<link phx-track-static rel="stylesheet" href={~p"/assets/css/shop.css"} />
<%= if assigns[:current_scope] && @current_scope.user do %>
<link phx-track-static rel="stylesheet" href={~p"/assets/css/admin.css"} />

4
mix.exs
View File

@ -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"],

6
test/berrypod_web/live/theme_css_consistency_test.exs
View File

@ -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"