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

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

Aperta
  • Qualcosa non va?
#425 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
Mezza giornata
Idoneità per principianti
62/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
css, javascript, typescript
Ambito
build-system, frontend

Direzione di ricerca

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.

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

Descrizione

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.

Lingua principale
TypeScript
Stelle
522
Fork
73
Merge medio
1g 4h
PR unite (30g)
35

Preparare l'ambiente

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

Tutte le issue di solidjs/solid-vite-plugin

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.