Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

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

Offen
  • Stimmt etwas nicht?
#425 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
3/5
Geschätzter Aufwand
Ein halber Tag
Anfängerfreundlichkeit
62/100
Issue-Typ
Bug
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
css, javascript, typescript
Bereich
build-system, frontend

Rechercherichtung

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.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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.

Vorherrschende Sprache
TypeScript
Sterne
522
Forks
73
Ø Merge
1 T. 4 Std.
Gemergte PRs (30 T.)
35

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus solidjs/solid-vite-plugin

Alle Issues in solidjs/solid-vite-plugin

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.