Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

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

Ouverte
  • Quelque chose ne va pas ?
#425 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

@lxsmnsyc y travaille déjà.

Depuis le 19/10/2026.

  • #431 par @lxsmnsyc — ouverte

Évaluation

Difficulté
3/5
Temps estimé
Une demi-journée
Accessibilité débutants
62/100
Type d'issue
Bug
Clarté
Clairement spécifiée
Activité
Active
Stack technique
css, javascript, typescript
Domaine
build-system, frontend

Piste de recherche

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.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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.

Langage dominant
TypeScript
Étoiles
522
Forks
73
Merge moyen
1 j 4 h
PR mergées (30 j)
35

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de solidjs/solid-vite-plugin

Toutes les issues de solidjs/solid-vite-plugin

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.