Conversation
Restructure the asset pipeline and HTML component generation to support pluggable CSS frameworks (`--css`) and UI component libraries (`--ui`). CSS pipeline: - `assets.ex` creates a bare `app.css` shell - New `assets/css.ex` orchestrator selects CSS framework dynamically - `assets/css/tailwind.ex` creates `phx-tailwind.css` with Tailwind foundation - Each task creates its own CSS file and appends `@import` to `app.css` - Heroicons now creates `phx-heroicons.css` instead of inline string replacement HTML components: - `html.ex` refactored into orchestrator keeping shared infrastructure (ErrorHTML, web module helpers, browser pipeline) - `html/tailwind.ex` provides plain Tailwind CSS components (extracted from html.ex) - `html/daisy.ex` provides DaisyUI components matching `phx.new` output: toast-based flash, DaisyUI form inputs, navbar layout with theme toggle, dark/light theme support, vendor JS downloaded from GitHub releases - `live.ex` passes `--ui` through to `html` composition DaisyUI is the new default (`--ui daisy`), plain Tailwind available via `--ui tailwind`.
- Refactor `components.ex` into orchestrator with `--ui` flag, delegating to `components/daisy.ex` (gettext-aware) and `components/tailwind.ex` - Add `--css` and `--ui` options to main `phx.install` orchestrator and `phx_install.install` entry point - Validate incompatible options: `--ui daisy --css none` produces a clear error via `Igniter.add_issue` - Add `--ui` option to `page.ex` with DaisyUI homepage template using `badge`, `rounded-box`, `base-content`, theme toggle, and `Layouts.flash_group` - Add tests for DaisyUI html, components, page, and validation paths (174 tests total, up from 157)
- README: add UI/CSS options section, update task table descriptions - CLAUDE.md: document pluggable architecture, CSS composition, updated task dependency graph - `phx_install.install.ex`: add --css and --ui to moduledoc options list
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
--cssand--uioptions to the installer for pluggable CSS framework and UI component library selection--ui daisy), matching Phoenix 1.8'sphx.newoutput--ui tailwindfor users who don't want DaisyUI--ui daisy --css none)Architecture
Follows the same pluggable pattern used for JavaScript bundlers:
CSS pipeline — each task creates its own CSS file and appends
@importtoapp.css(Tailwind v4 flattens imports before processing directives):assets/css.exorchestrator selects CSS framework via--cssflagassets/css/tailwind.excreatesphx-tailwind.csswith Tailwind foundationhtml/daisy.excreatesphx-daisy.csswith DaisyUI plugin/theme configheroicons.excreatesphx-heroicons.cssHTML components —
html.exrefactored into orchestrator + variants:html/daisy.ex— DaisyUI components (toast flash, btn classes, fieldset inputs, theme toggle, dark/light theming, vendor JS downloaded from GitHub releases)html/tailwind.ex— plain Tailwind components (previous behaviour)Data display components —
components.exrefactored similarly:components/daisy.ex— gettext-aware table actionscomponents/tailwind.ex— plain string table actionsPage —
page.exdispatches to variant-specific homepage templatesTest plan
mix test— 174 tests pass (17 new, 0 failures)mix phx.installproduces DaisyUI output matching.resources/example/mix phx.install --ui tailwindproduces plain Tailwind outputmix phx.install --ui daisy --css nonefails with clear error