From c65e7778329527ec58794d7458bb220fcec0895e Mon Sep 17 00:00:00 2001 From: jamey Date: Wed, 18 Feb 2026 21:12:41 +0000 Subject: [PATCH] update progress and css migration plan status after phase 7 Co-Authored-By: Claude Opus 4.6 --- PROGRESS.md | 8 +++---- docs/plans/css-migration.md | 48 +++++++++++++++++++++++-------------- 2 files changed, 34 insertions(+), 22 deletions(-) diff --git a/PROGRESS.md b/PROGRESS.md index 1cb6e8c..5d64589 100644 --- a/PROGRESS.md +++ b/PROGRESS.md @@ -21,7 +21,7 @@ - Transactional emails (order confirmation, shipping notification) - Demo content polished and ready for production -**Tier 1 MVP complete.** CI pipeline done. Hosting & deployment done (including observability). PageSpeed CI done (99-100 mobile, 97+ desktop). Usability fixes done. Shipping costs at checkout done. Per-colour product images with gallery filtering done (both providers). Printful integration complete (sync, orders, shipping, webhooks, mockup enrichment, catalog colours). +**Tier 1 MVP complete.** CI pipeline done. Hosting & deployment done (including observability). PageSpeed CI done (99-100 mobile, 97+ desktop). Usability fixes done. Shipping costs at checkout done. Per-colour product images with gallery filtering done (both providers). Printful integration complete (sync, orders, shipping, webhooks, mockup enrichment, catalog colours). CSS migration Phases 0-7 complete — project is fully Tailwind-free (hand-written CSS, 9.8 KB gzipped shop, 17.8 KB gzipped admin). ## Task list @@ -67,11 +67,11 @@ Plans: [admin-redesign.md](docs/plans/admin-redesign.md) | [setup-wizard.md](doc | ~~35~~ | ~~Phase 3: Extract layout + cart inline styles~~ | 33 | 3h | done | | ~~36~~ | ~~Phase 4: Extract content + template inline styles~~ | 33 | 2.5h | done | | ~~37~~ | ~~Phase 5: Remove Tailwind from shop pages~~ | 34-36 | 3h | done | -| 38 | Phase 6: Replace DaisyUI (admin) | 37 | 3h | | -| 39 | Phase 7: Remove Tailwind entirely | 38 | 1.5h | | +| ~~38~~ | ~~Phase 6: Replace DaisyUI (admin)~~ | 37 | 3h | done | +| ~~39~~ | ~~Phase 7: Remove Tailwind entirely~~ | 38 | 1.5h | done | | 40 | Phase 8: Optimisation + modern enhancements | 39 | 2.5h | | -**Total remaining: ~27-28 hours across ~16 sessions** (admin Printful tweaks, Printful tests, CSS migration) +**Total remaining: ~8-9 hours across ~5 sessions** (admin Printful tweaks, Printful tests, CSS optimisation) See [css-migration.md](docs/plans/css-migration.md) for full plan with architecture, visual regression testing strategy, and acceptance criteria per phase. diff --git a/docs/plans/css-migration.md b/docs/plans/css-migration.md index 4e18162..bd4bd71 100644 --- a/docs/plans/css-migration.md +++ b/docs/plans/css-migration.md @@ -1,24 +1,36 @@ # Plan: CSS migration — Tailwind + DaisyUI to modern hand-written CSS -Status: Not started +Status: Phases 0-7 complete. Phase 8 (optimisation) not started. ## Overview Replace Tailwind CSS v4 and DaisyUI with a modern, layered CSS system using `@layer`, native nesting, container queries, `oklch()`, `@property`, and other 2024+ CSS features. Zero framework dependencies. Smaller output. Full cascade control. -## Current state +## Final state (post Phase 7) -| Bundle | Source | Compiled | Contents | -|--------|--------|----------|----------| -| `app-shop.css` | 60 lines + 1,130 theme CSS | **53 KB** | Tailwind v4 (no DaisyUI) + three-layer theme | -| `app.css` | 299 lines + 1,130 theme CSS | **212 KB** | Tailwind v4 + DaisyUI + three-layer theme | +| Bundle | Minified | Gzipped | Contents | +|--------|----------|---------|----------| +| `shop.css` | 54.1 KB | 9.8 KB | Hand-written component CSS + three-layer theme | +| `admin.css` | 90.8 KB | 17.8 KB | Utility CSS + themes + heroicon data URIs | +| `app.js` | 139.2 KB | 42.9 KB | LiveView + hooks | -**Inline styles**: 281 `style=` attributes across 10 files: -- `product.ex` (83), `layout.ex` (59), `content.ex` (57), `cart.ex` (51) -- `checkout_success.html.heex` (23), `content.html.heex` (3), `base.ex` (2) -- `pdp.html.heex` (1), `error.html.heex` (1), `cart.html.heex` (1) +Zero framework dependencies. No Tailwind, no DaisyUI, no PostCSS plugins. -**Three-layer theme system** (1,130 lines) is already well-designed and stays: +Three esbuild profiles handle all asset builds. Three root layouts isolate CSS: +- `shop_root.html.heex` loads `shop.css` +- `root.html.heex` loads `admin.css` (auth pages) +- `admin_root.html.heex` loads both `admin.css` + `shop.css` + +## Pre-migration state (for reference) + +| Bundle | Compiled | Contents | +|--------|----------|----------| +| `app-shop.css` | **53 KB** | Tailwind v4 (no DaisyUI) + three-layer theme | +| `app.css` | **212 KB** | Tailwind v4 + DaisyUI + three-layer theme | + +281 `style=` attributes across 10 files. All removed in Phases 2-4. + +**Three-layer theme system** (1,130 lines) preserved throughout: - Primitives (94 lines): `:root` tokens - Attributes (717 lines): `.themed` + `data-*` selectors - Semantic (319 lines): aliases, accessibility, component styles @@ -355,15 +367,15 @@ Efficiencies that do apply: 3. **CSSGenerator already optimised**: Only generates CSS for the active theme variant (not all 4 moods, 7 typographies, etc.) 4. **Scope-based pruning**: All shop CSS scoped under `.themed` / `.shop-container` — unmatched selectors have no performance cost -### Size projections +### Actual sizes (post migration) -| Bundle | Current | After migration | Reduction | -|--------|---------|-----------------|-----------| -| Shop CSS | 53 KB | ~12-15 KB | ~75% | -| Admin CSS | 212 KB | ~25-30 KB | ~87% | -| **Total** | **265 KB** | **~40-45 KB** | **~83%** | +| Bundle | Before | After (minified) | After (gzipped) | Reduction | +|--------|--------|-------------------|-----------------|-----------| +| Shop CSS | 53 KB | 54.1 KB | 9.8 KB | similar size but zero framework | +| Admin CSS | 212 KB | 90.8 KB | 17.8 KB | ~57% minified | +| **Total** | **265 KB** | **144.9 KB** | **27.6 KB** | **~45% minified** | -Minified + gzipped, the shop CSS should be under 4 KB. +Shop CSS grew slightly vs original Tailwind because all component styles are now explicit (Tailwind tree-shook aggressively). Admin CSS dropped substantially because DaisyUI's 212 KB base is gone. The gzipped sizes are what matters for users: 9.8 KB shop, 17.8 KB admin. ### Other gains