perf: split CSS bundles for shop and admin pages

Create separate CSS bundles to reduce shop page load times:
- app-shop.css (45KB/7.8KB gzip): Shop pages only, no daisyUI
- app.css (139KB): Admin pages with daisyUI and theme editor

Key changes:
- Add app-shop.css with targeted @source paths for shop files only
- Move .preview-frame rules from theme-layer2-attributes.css to app.css
- Delete fonts.css (fonts now generated inline by CSSGenerator)
- Add inline all-fonts generation in theme editor for typography switching
- Configure separate Tailwind profiles and watchers for both bundles

Shop pages now load 54% less CSS by excluding:
- daisyUI components (admin only)
- .preview-frame theme switching rules (editor only)
- Admin-specific Tailwind utilities

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-25 11:36:20 +00:00
parent b1635c7313
commit 1b12dc3e7f
10 changed files with 254 additions and 455 deletions

View File

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