Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Island/Markdown pages lose CSS in production when it is imported through a component

Chiusa
  • Qualcosa non va?
#452 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Una pull request collegata è già stata integrata.

  • #481 di @Brooooooklyn — integrata

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
74/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
react, typescript, vite
Ambito
build-system, frontend

Direzione di ricerca

Start by reading void/dist/pages/islands-plugin.mjs, especially needsIslandClientBundle() and extractCssImports(), then trace how createClientAssetTags in void/dist/routing-assets-*.mjs uses the manifest. Reproduce with the linked project using pnpm build && pnpm preview; check that production output includes the CSS link for both / and /about, including when CSS is imported through a component.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Describe the bug

On island pages (*.island.tsx) and Markdown pages, CSS that is imported by a regular component (for example a shared Shell rendered by pages/layout.tsx) is applied in vite dev but missing from the production build. The rendered HTML has no <link rel="stylesheet">.

This is easy to miss because everything looks correct in dev.

Reproduction

https://github.com/Nkzn/void-islands-css-missing-repro

pnpm install
pnpm dev                    # / and /about have a red background
pnpm build && pnpm preview  # / and /about have no stylesheet
  • src/Shell.tsx imports ./global.css; pages/layout.tsx renders <Shell>.
  • In the production build, dist/client is not generated at all and the CSS only appears under dist/ssr/assets/.
Expected

Production output links the CSS that the page and its layouts depend on (as dev does), even when the page ships no JavaScript.

Possible cause
  • void/dist/pages/islands-plugin.mjs
    • needsIslandClientBundle() (L23) only checks the source text of *.island.*, layout.* and _* files for island imports or CSS imports written directly in those files. Transitive imports are not considered, so the islands client entry is not built here.
    • extractCssImports() (L61) likewise only collects CSS imported directly in those files.
  • void/dist/routing-assets-*.mjs (createClientAssetTags, L115): when the islands client entry is not in the manifest, it returns empty asset tags, so no CSS link is emitted either.
Workaround

Import the CSS directly in pages/layout.tsx (import "../src/global.css"). Then virtual:void-islands-client is built and both pages get <link rel="stylesheet" href="/assets/islands-client-*.css">, still without any <script>.

Versions
Lingua principale
TypeScript
Stelle
402
Fork
32
Merge medio
12h 1m
PR unite (30g)
80

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di voidzero-dev/void

Tutte le issue di voidzero-dev/void

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.