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

Dev: a stylesheet shared by the entry and a lazy component moves after the lazy component's styles

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

Los mantenedores suelen responder en 1 día

@lxsmnsyc ya está trabajando en esto.

Desde el 19/10/2026.

  • #431 de @lxsmnsyc — abierto

Evaluación

Dificultad
3/5
Tiempo estimado
Medio día
Aptitud para principiantes
62/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
css, javascript, typescript
Área
build-system, frontend

Línea de trabajo

The dedupe logic is in devStylePatch in src/dev-manifest.ts, on the line that picks ssr from o and el by data-asset. Reproduce with the issue's App/Button/Page files and check the link tags in the hydrated head. Done means .corner resolves to absolute in dev, the stylesheet order matches vite build, and editing button.css still hot-updates while the page is open.

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

Descripción

In start-mode dev, a stylesheet that both the entry graph and a lazy component import ends up after the lazy component's own stylesheets. Production keeps it before them. Rules of equal specificity then resolve the other way in dev: a lazy page's override of a shared component's style loses.

Versions: @solidjs/[email protected], [email protected], @solidjs/[email protected], [email protected].

Reproduction
// vite.config.ts
import { defineConfig } from 'vite';
import solid from '@solidjs/vite-plugin';

export default defineConfig({
  plugins: [solid({ start: { app: 'src/App.tsx' }, ssr: true })],
});

// src/App.tsx
import { lazy, Loading } from 'solid-js';
import { Button } from './Button';

const Page = lazy(() => import('./Page'));

export default function App() {
  return (
    <main>
      <Button>Header button</Button>
      <Loading>
        <Page />
      </Loading>
    </main>
  );
}

// src/Button.tsx
import type { JSX } from 'solid-js';
import './button.css';

export function Button(props: { class?: string; children: JSX.Element }) {
  return <button class={`button ${props.class ?? ''}`}>{props.children}</button>;
}

// src/Page.tsx
import { Button } from './Button';
import './page.css';

export default function Page() {
  return (
    <div class="panel">
      <Button class="corner">Copy</Button>
    </div>
  );
}

/* src/button.css */
.button {
  position: relative;
}

/* src/page.css */
.panel {
  position: relative;
  height: 200px;
  border: 1px solid;
}

/* Same specificity as .button, so it wins only when page.css comes after button.css. */
.corner {
  position: absolute;
  top: 8px;
  right: 8px;
}

Run vite, open the page, and wait for hydration. "Copy" stays in the normal flow instead of the panel's top right corner. vite build + vite preview renders it in the corner.

style tags in the server HTML style tags after hydration .corner
dev button.css, page.css, button.css page.css, button.css position: relative
build Button-*.css, Page-*.css Button-*.css, Page-*.css position: absolute
Cause

The dev shell carries button.css twice, both marked data-asset. The SSR runtime renders the lazy component's styles (button.css, page.css), and the handler then injects the entry graph's styles (button.css again) before </head>.

devStylePatch (src/dev-manifest.ts) dedupes the two by data-vite-dev-id. It removes o, the tag found by querySelectorAll, whenever o is data-asset:

var ssr=o.hasAttribute("data-asset")?o:el.hasAttribute("data-asset")?el:null;

When both twins are SSR'd, the observer handles the later tag as el, so o is the earlier one and it is removed. The copy that survives sits after page.css.

Suggested fix

When both twins are SSR'd, drop the later one, so the stylesheet keeps the first position the shell gave it:

var ssr=o.hasAttribute("data-asset")&&el.hasAttribute("data-asset")?(o.compareDocumentPosition(el)&4?el:o):o.hasAttribute("data-asset")?o:el.hasAttribute("data-asset")?el:null;

With that line patched into the repro's copy of the plugin, the hydrated order is button.css, page.css and .corner is absolute, as in the build. Editing button.css with the page open still hot-updates it.

Not emitting entry styles that the shell already carries would fix it as well. Moving the entry styles ahead of the lazy ones does not: in the larger app where I first saw this, the shared stylesheets still ended up after the lazy ones.

Lenguaje dominante
TypeScript
Estrellas
522
Forks
73
Merge medio
1 d 8 h
PR fusionados (30 d)
31

Preparar el entorno

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 solidjs/solid-vite-plugin

Todos los issues de solidjs/solid-vite-plugin

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.