feat: Upgrade all dependencies and migrate to singlestage UI framework #1
Conversation
- Update all Cargo dependencies to latest versions (Leptos 0.8.12, Regex 1.12.2, Serde 1.0.228, etc.) - Add singlestage v0.3.9 as new UI framework with full feature set - Remove DaisyUI and @tailwindcss/typography dependencies - Rewrite CSS using singlestage HSL variable system (708 lines → ~400 lines) - Implement complete light/dark theme support - Maintain all Typst rendering features (#line, #table, #link) - All builds verified: CSS (44ms), Rust (2m05s), site generation successful - Backup old CSS to style/input.css.old - Add comprehensive UPGRADE-REPORT.md documentation
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughSystem-wide dependency upgrade migrating UI framework from DaisyUI to Singlestage with CSS variable-based theming, updating Leptos to 0.8, upgrading Typst to 0.14, reorganizing workspace dependencies, and establishing token-based design system. Changes
Sequence DiagramsequenceDiagram
participant App as App/Build System
participant Leptos as Leptos 0.8
participant Singlestage as Singlestage UI
participant Tailwind as Tailwind + CSS Vars
participant Typst as Typst 0.14
Note over App,Typst: Old Flow (DaisyUI)
App->>Leptos: Load CSR components
Leptos->>Tailwind: Apply DaisyUI classes
Tailwind-->>App: Static theme classes
App->>Typst: Render 0.13.x
Note over App,Typst: New Flow (Singlestage + Workspace Deps)
App->>Leptos: Load CSR components (workspace dep)
Leptos->>Singlestage: Render via workspace dep
Singlestage->>Tailwind: Apply semantic tokens + CSS vars
Tailwind->>App: Dynamic theme via variables
App->>Typst: Render 0.14.x (workspace dep)
rect rgba(100, 200, 100, 0.1)
Note over Tailwind,App: CSS Variables Layer<br/>Enables light/dark theming<br/>Runtime color switching
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Pull Request Overview
This PR upgrades project dependencies and migrates the UI framework from DaisyUI to Singlestage, a Rust/WASM component library. The changes aim to modernize the tech stack and improve integration with Leptos.
Key changes:
- Rust dependencies upgraded (Leptos 0.8.6→0.8.12, Regex 1.11.1→1.12.2, Thiserror 1.0.69→2.0.17, and 140+ others)
- Added Singlestage v0.3.9 UI framework dependency
- Removed DaisyUI and @tailwindcss/typography from JavaScript dependencies
- Migrated Tailwind config to use HSL variable-based color system
- Created backup files for old CSS (708→400 lines in new implementation)
Reviewed Changes
Copilot reviewed 6 out of 9 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| typstify-ssg/Cargo.toml | Updated Rust dependencies with broader version specifications; added singlestage |
| Cargo.toml | Workspace dependency updates including major version bumps (thiserror 2.0) |
| package.json | Removed DaisyUI and typography plugin; kept Tailwind CLI 4.1 |
| tailwind.config.js | Migrated from DaisyUI theme config to HSL variable-based color system |
| style/input.css.old | Backup of DaisyUI-based CSS (707 lines) |
| style/input.css.backup | Duplicate backup file identical to input.css.old |
| bun.lock | Updated lockfile reflecting removal of DaisyUI and typography dependencies |
| Cargo.lock | Extensive dependency updates including new singlestage and its transitive dependencies |
| UPGRADE-REPORT.md | Comprehensive documentation of the upgrade process and changes |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
package.json (1)
20-20: Update keywords to reflect the new UI stackThe
keywordsarray still listsdaisyui, but that dependency was removed. Please drop or replace it (e.g., withsinglestage) so package metadata stays accurate.UPGRADE-REPORT.md (2)
40-40: Convert the reference into Markdown link syntaxlint is flagging the bare URL here. Wrap it as
[Singlestage](https://singlestage.doordesk.net/)(or similar) to silence MD034 and keep the report consistent.
55-64: Add a language hint to the mapping code blockmarkdownlint (MD040) wants a language tag. Prefix the fence with something like
```textso the report renders the mapping as intended without lint noise.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
Cargo.lockis excluded by!**/*.lockbun.lockis excluded by!**/*.lock
📒 Files selected for processing (7)
Cargo.toml(1 hunks)UPGRADE-REPORT.md(1 hunks)package.json(1 hunks)style/input.css.backup(1 hunks)style/input.css.old(1 hunks)tailwind.config.js(1 hunks)typstify-ssg/Cargo.toml(2 hunks)
🧰 Additional context used
🪛 markdownlint-cli2 (0.18.1)
UPGRADE-REPORT.md
40-40: Bare URL used
(MD034, no-bare-urls)
55-55: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
Cargo.toml (1)
54-54: Duplicate concern: thiserror 2.0 major version upgrade requires API migration verification.The thiserror 2.0 release introduces breaking API changes, particularly around derive macros and error trait implementations. This concern was previously flagged and remains critical. Before merging, verify that all error handling code throughout the codebase has been updated to the thiserror 2.0 API.
Can you confirm that:
- All custom error types have been migrated to the thiserror 2.0 API?
- Any custom
Errortrait implementations have been updated?- Error handling in
typstify-ssgand related crates is compatible with the new version?
🧹 Nitpick comments (1)
Cargo.toml (1)
12-51: Consider adopting consistent version constraint strategy across workspace dependencies.The workspace dependencies use a mix of relaxed constraints (e.g.,
clap = "4.5",leptos = "0.8") and specific pinning (e.g.,serde_yaml = "0.9.33",typst = "0.14.0"). While relaxed constraints (e.g.,"0.8") are generally appropriate for semver-compatible updates, this inconsistency could allow unintended minor or patch-level breaking changes to slip through in future dependency resolution.For reproducibility and safety, consider:
- Pinning to specific minor versions for critical dependencies (e.g.,
leptos = "0.8.12"based on the PR summary mentioning 0.8.6 → 0.8.12).- Documenting why certain crates use relaxed vs. strict pinning.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
Cargo.lockis excluded by!**/*.lock
📒 Files selected for processing (2)
Cargo.toml(1 hunks)typstify-ssg/Cargo.toml(1 hunks)
🔇 Additional comments (3)
Cargo.toml (2)
36-40: Verify singlestage 0.3.9 integration and CSR feature compatibility.The new
singlestage = "0.3"dependency has been added with CSR feature support. Ensure:
- The UI component library is fully integrated with the Leptos CSR setup.
- No conflicting dependencies or feature flags with existing
leptos,leptos_meta, andleptos_routercrates.- Component APIs align with usage in the application code (this PR migration from DaisyUI indicates substantial UI refactoring).
65-67: Verify typst 0.14.0 dependency compatibility.The upgrade from typst 0.13 (assumed from previous version) to 0.14.0 is a minor version bump. Confirm that:
- The typst API changes in 0.14.x are compatible with existing typst rendering code.
- The typst-library version 0.14.0 aligns with the core typst crate version.
typstify-ssg/Cargo.toml (1)
7-48: Workspace dependency migration is well-structured; confirm singlestage is utilized in the crate.The migration to
workspace = truefor all dependencies is clean and centralizes version management effectively. All dependency specifications inherit correctly from the root workspace.One concern: singlestage is declared as a dependency with the
csrfeature, but the package nametypstify-ssgsuggests a static site generator (SSG), not a client-side rendering (CSR) application. Verify that:
- singlestage is actually used in the SSG logic (not just a transitive dependency from another crate).
- The
csrfeature is appropriate for SSG-mode usage, or if singlestage should instead be a dependency of a separate UI/web crate.
Co-authored-by: Akagi201 <1207959+Akagi201@users.noreply.github.com>
Co-authored-by: Akagi201 <1207959+Akagi201@users.noreply.github.com>
Remove duplicate backup CSS files
Replace DaisyUI utilities with Singlestage design tokens in input.css
No actionable changes - comment thread already resolved
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (6)
.gitignore (1)
83-83: Remove duplicatebun.lockbentry.The
bun.lockbfile is listed twice in the ignore patterns (lines 83 and 124). Remove one of these duplicate entries to keep the file clean.Apply this diff to remove the duplicate:
# Bun package manager -bun.lockbAlso applies to: 124-124
style/input.css (5)
119-119: Consider the impact ofoverflow-x: hiddenon body.Setting
overflow-x: hiddenon the body prevents horizontal scrolling, which may hide content that legitimately overflows (such as wide code blocks or tables). Consider handling overflow at the component level instead, or ensure all content is responsive.
260-286: Consider consolidating duplicate alert styles.Alert box styles are defined twice: once within
.prosecontext (lines 260-286) and again as standalone component classes (lines 611-638). The styles are nearly identical.Consider consolidating these to reduce duplication and improve maintainability. You could define the base alert styles once and apply them in both contexts.
Example approach:
+ /* Base alert styles */ + .alert-base { + @apply rounded-lg p-4 border-l-4; + } + + .alert-info-colors { + background-color: hsl(var(--info) / 0.1); + border-color: hsl(var(--info)); + color: hsl(var(--info-foreground)); + } + .prose .alert-info { - background-color: hsl(var(--info) / 0.1); - border-color: hsl(var(--info)); - color: hsl(var(--info-foreground)); + @apply alert-base alert-info-colors; }Also applies to: 611-638
288-292: Consider more specific navigation selectors.The
nav aselector is very broad and will apply transitions to all links within any<nav>element throughout the application. If you have navigation patterns that shouldn't have this transition effect, consider using more specific class-based selectors instead.Example:
- nav a { + .sidebar-nav a, + .nav-list a { @apply transition-colors duration-200; }
310-310: Consider using a CSS variable for sidebar width.The sidebar width is defined as
w-72(288px) on line 310, and this same value is hard-coded asmargin-left: 288pxon line 401. If the sidebar width changes, both locations must be updated manually.Consider defining a CSS variable for maintainability:
+ :root { + --sidebar-width: 18rem; /* 288px */ + } + .sidebar { - @apply w-72 bg-muted border-r border-border flex flex-col fixed left-0 top-0 h-full z-30; + width: var(--sidebar-width); + @apply bg-muted border-r border-border flex flex-col fixed left-0 top-0 h-full z-30; } .main-content { @apply flex-1 flex flex-col; - margin-left: 288px; + margin-left: var(--sidebar-width); }Also applies to: 401-401
787-800: Consider removing or documenting empty theme adjustment blocks.The dark theme media query (lines 788-792) and Dracula theme block (lines 795-800) contain placeholder comments but no actual styles. If these are reserved for future use, consider adding TODO comments explaining the intent. Otherwise, these empty blocks could be removed until needed.
/* Dark theme specific adjustments */ @media (prefers-color-scheme: dark) { [data-theme="dark"] { - /* Custom dark theme adjustments if needed */ + /* TODO: Add custom dark theme adjustments if needed beyond the .dark class variables */ } } /* Dracula theme specific adjustments */ [data-theme="dracula"] { - /* Dracula theme specific styles */ - .highlight { - @apply bg-muted; - } + /* TODO: Implement Dracula theme if planned, or remove this block */ }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
.gitignore(2 hunks)style/input.css(1 hunks)tailwind.config.js(1 hunks)
🔇 Additional comments (8)
.gitignore (1)
84-84: LGTM! CSS file tracking aligns with the architecture migration.The changes appropriately:
- Track package-lock.json under Bun artifacts
- Unignore style/input.css as the new source file
- Ignore generated Tailwind output files
Also applies to: 116-116, 119-121
style/input.css (5)
1-36: LGTM! Theme token definitions are well-structured.The @theme block properly defines all color and radius tokens using CSS variables with HSL color space, enabling dynamic theming. The radius calculations are appropriate.
38-104: LGTM! Comprehensive theme variable definitions.The CSS variables provide complete light and dark theme coverage with consistent HSL formatting and proper foreground/background pairings for accessibility.
124-258: LGTM! Comprehensive typography system.The prose styles provide excellent coverage for markdown/documentation content with proper semantic styling, accessible color contrast, and consistent spacing.
301-753: LGTM! Comprehensive component library for documentation layouts.The component styles provide excellent coverage for:
- Book-style layouts with sidebar navigation
- Documentation cards and grids
- Typst-specific content rendering
- Responsive mobile behaviors
The organization is clear and follows consistent patterns with good use of Tailwind utilities and theme variables.
713-716: Math fonts 'Computer Modern' and 'Latin Modern Math' are not available—confirm fallback appearance is acceptable.Verification confirms these specialized fonts are not bundled, loaded from CDN, or defined via @font-face in the codebase. Users without local installation will see the default serif fallback for
.typst-math-inlinecontent.Manually verify that the serif fallback provides acceptable rendering for math content. If math rendering quality is important, consider:
- Using web fonts (e.g., Latin Modern from a CDN)
- Bundling font files with the application
- Testing the actual appearance with the fallback font
tailwind.config.js (2)
10-67: LGTM! Clean token-based color system.The migration from DaisyUI to a CSS variable-based color system is well-executed:
- All color tokens properly reference CSS variables with
hsl()wrappers- Complete coverage of semantic colors (primary, secondary, destructive, muted, accent) with foreground variants
- Additional surface tokens (popover, card) for layered UI
- Status indicators (info, warning, error, success) for alerts
- Border radius values correctly calculated from CSS variables
The token definitions align perfectly with the CSS variable definitions in
style/input.css.
69-69: LGTM! Plugin removal aligns with architecture migration.The empty plugins array correctly reflects the removal of DaisyUI and @tailwindcss/typography. Typography functionality is now implemented through custom CSS in
style/input.css(prose classes), providing better control and integration with the theme system.
🚀 Overview
This PR upgrades all project dependencies to their latest versions and migrates the UI framework from DaisyUI to singlestage.
📦 Dependency Updates
Rust Dependencies
New Dependencies
JavaScript Dependencies
🎨 UI Framework Migration
Why Singlestage?
CSS Architecture Rewrite
--background,--foreground,--primary, etc.)style/input.css.old✅ Testing & Verification
All builds verified successfully:
#line()elements#table()blocks (2-3 columns)#link()conversion📊 Benefits
📝 Documentation
See UPGRADE-REPORT.md for complete details on the upgrade process, changes, and rollback instructions.
🔄 Breaking Changes
None - all existing functionality maintained.
Summary by CodeRabbit
Release Notes
New Features
UI Updates
Performance