Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở
  • Có gì không ổn?
#425 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
3/5
Thời gian dự kiến
Nửa ngày
Mức phù hợp với người mới
62/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
css, javascript, typescript
Lĩnh vực
build-system, frontend

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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.

Ngôn ngữ chính
TypeScript
Star
522
Fork
73
Merge trung bình
1 ngày 4 giờ
Pull request đã merge (30 ngày)
35

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của solidjs/solid-vite-plugin

Tất cả issue của solidjs/solid-vite-plugin

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.