Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Cerrado
  • ¿Algo no está bien?
#452 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Ya se ha fusionado un pull request relacionado.

  • #481 de @Brooooooklyn — fusionado

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
74/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
react, typescript, vite
Área
build-system, frontend

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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
Lenguaje dominante
TypeScript
Estrellas
402
Forks
32
Merge medio
11 h 52 min
PR fusionados (30 d)
88

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de voidzero-dev/void

Todos los issues de voidzero-dev/void

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.