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:
@@ -5,9 +5,9 @@ defmodule SimpleshopThemeWeb.ThemeCSSConsistencyTest do
|
||||
|
||||
Architecture:
|
||||
- Both shop pages and preview use .themed class for shared styles
|
||||
- Theme editor uses .preview-frame[data-*] selectors for live switching
|
||||
- Shop pages get theme values via inline CSS from CSSGenerator
|
||||
- Component styles use .themed for shared styling
|
||||
- Theme editor uses .preview-frame[data-*] selectors for live switching (in app.css)
|
||||
- Shop pages get theme values via inline CSS from CSSGenerator (app-shop.css)
|
||||
- Component styles use .themed for shared styling (theme-layer2-attributes.css)
|
||||
"""
|
||||
|
||||
use SimpleshopThemeWeb.ConnCase, async: false
|
||||
@@ -88,12 +88,13 @@ defmodule SimpleshopThemeWeb.ThemeCSSConsistencyTest do
|
||||
end
|
||||
|
||||
describe "CSS file structure" do
|
||||
test "theme-layer2-attributes.css has .preview-frame variant selectors for editor" do
|
||||
css_path = Path.join([File.cwd!(), "assets", "css", "theme-layer2-attributes.css"])
|
||||
test "app.css has .preview-frame variant selectors for theme editor" do
|
||||
css_path = Path.join([File.cwd!(), "assets", "css", "app.css"])
|
||||
css_content = File.read!(css_path)
|
||||
|
||||
# Variant selectors are editor-only (.preview-frame) using CSS nesting
|
||||
# The file uses &[data-*] syntax inside .preview-frame { }
|
||||
# These rules are in app.css (admin only), not app-shop.css
|
||||
assert css_content =~ ".preview-frame"
|
||||
assert css_content =~ "&[data-mood=\"dark\"]"
|
||||
assert css_content =~ "&[data-mood=\"warm\"]"
|
||||
|
||||
Reference in New Issue
Block a user