slidevjs/slidev

CSS injected by UnoCSS incomplete on first load

Open

#1705 opened on Jun 26, 2024

View on GitHub
 (2 comments) (0 reactions) (0 assignees)TypeScript (46,472 stars) (2,067 forks)batch import
help wantedneeds investigationupstream🔨 p3-minor-bug

Description

Describe the bug

Often (but not always, I wasn't able to reliably reproduce the issue), the CSS injected by UnoCSS is incomplete and slides appear broken. It seems that this happens when another tab that has loaded the presentation has already been open in the background in the browser when Slidev is started and the presentation is loaded in a new tab. Most commonly the nav controls are shown incorrectly. After the first load, requesting the __uno.css will return all required styles and thus, a reload fixes the issue.

Minimal reproduction

Unfortunately, I cannot provide a reliable minimal reproduction yet. But maybe the video recording below helps. This is what happens in there:

  1. I have started the Slidev presentation, but not loaded it in the browser.
  2. I fetch __uno.css in the terminal. Observe that the CSS content isn't very long.
  3. I load the presentation in the browser. The nav controls are not displayed correctly because some of the CSS styles are missing.
  4. I fetch __uno.css once more in the terminal. Observe that the CSS content is now considerably longer. Diffing the previous content with the content now also reveals major differences.
  5. I reload the slides in the browser. Now everything is displayed correctly.

https://github.com/slidevjs/slidev/assets/850157/714268bb-8c9c-47e0-870a-097c7386aa50

Environment

  • Slidev version: v0.49.12
  • Browser: Firefox 127.0.2, Chrome 126.0.6478.116
  • OS: macOS 14.5

Contributor guide

Tech stack
typescriptcssvuevite
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
3-5 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
needs investigation
Prerequisites
understanding of Vite build processknowledge of CSS injectionfamiliarity with UnoCSS
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
20
Research direction
Investigate the race condition where ` uno.css` is incomplete on initial load. Focus on the UnoCSS plugin configuration in Slidev (likely in `vite.config.ts` or `uno.config.ts`). Check if there is an async dependency that isn't awaited before injecting CSS. Compare the CSS output between initial and subsequent requests as shown in the video. Look at how Slidev handles slide rendering and whether it triggers UnoCSS generation correctly. The issue occurs when another tab has loaded the presentation in the background; consider browser caching or service worker interference.