Island/Markdown pages lose CSS in production when it is imported through a component
メンテナーはふだん 1 日以内に返信
関連するプルリクエストがすでにマージされています。
- #481 @Brooooooklyn による — マージ済み
評価
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 初心者へのやさしさ
- 74/100
- issue の種類
- バグ
- 明瞭さ
- 明確に書かれている
- 活発さ
- 活発
- 技術スタック
- react, typescript, vite
- 領域
- build-system, frontend
調査の方向性
Start by reading void/dist/pages/islands-plugin.mjs, especially needsIslandClientBundle() and extractCssImports(), then trace how createClientAssetTags in void/dist/routing-assets-*.mjs uses the manifest. Reproduce with the linked project using pnpm build && pnpm preview; check that production output includes the CSS link for both / and /about, including when CSS is imported through a component.
索引モデルが issue の本文から書いたものです。
説明
Describe the bug
On island pages (*.island.tsx) and Markdown pages, CSS that is imported by a regular component (for example a shared Shell rendered by pages/layout.tsx) is applied in vite dev but missing from the production build. The rendered HTML has no <link rel="stylesheet">.
This is easy to miss because everything looks correct in dev.
Reproduction
https://github.com/Nkzn/void-islands-css-missing-repro
pnpm install
pnpm dev # / and /about have a red background
pnpm build && pnpm preview # / and /about have no stylesheet
src/Shell.tsximports./global.css;pages/layout.tsxrenders<Shell>.- In the production build,
dist/clientis not generated at all and the CSS only appears underdist/ssr/assets/.
Expected
Production output links the CSS that the page and its layouts depend on (as dev does), even when the page ships no JavaScript.
Possible cause
void/dist/pages/islands-plugin.mjsneedsIslandClientBundle()(L23) only checks the source text of*.island.*,layout.*and_*files for island imports or CSS imports written directly in those files. Transitive imports are not considered, so the islands client entry is not built here.extractCssImports()(L61) likewise only collects CSS imported directly in those files.
void/dist/routing-assets-*.mjs(createClientAssetTags, L115): when the islands client entry is not in the manifest, it returns empty asset tags, so no CSS link is emitted either.
Workaround
Import the CSS directly in pages/layout.tsx (import "../src/global.css"). Then virtual:void-islands-client is built and both pages get <link rel="stylesheet" href="/assets/islands-client-*.css">, still without any <script>.
Versions
[email protected],@void/[email protected],@void/[email protected][email protected], Node.js 24, pnpm 12, macOS
- 主要言語
- TypeScript
- スター
- 402
- フォーク
- 32
- 平均マージ
- 11時間 52分
- マージ済み PR（30日）
- 88
環境構築
このプロジェクトには開発コンテナ、Dockerfile、コントリビューションガイドがありません。まず README を読み、一般的な手順ははじめてのコントリビューションガイドを参照してください。
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
voidzero-dev/void のほかの issue
-
bug
難易度 1/5 1〜3時間 初心者へのやさしさ 78/100
voidzero-dev/void#428 ·
メンテナーはふだん 1 日以内に返信
-
難易度 5/5 1週間以上 初心者へのやさしさ 35/100
voidzero-dev/void#511 ·
メンテナーはふだん 1 日以内に返信
-
難易度 5/5 1週間以上 初心者へのやさしさ 35/100
voidzero-dev/void#510 ·
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 58/100
voidzero-dev/void#509 ·
メンテナーはふだん 1 日以内に返信
-
難易度 4/5 3〜5日 初心者へのやさしさ 55/100
voidzero-dev/void#507 ·
メンテナーはふだん 1 日以内に返信
voidzero-dev/void の issue をすべて見る
似ている issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
メンテナーはふだん 1 日以内に返信
-
bug
難易度 2/5 1〜3時間 初心者へのやさしさ 84/100
メンテナーはふだん 1 日以内に返信
-
bug
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 67/100
mobile-next/mobile-mcp#526 ·
メンテナーはふだん 1 日以内に返信
-
e2e-failure ready-to-code
難易度 1/5 1時間未満 初心者へのやさしさ 73/100
redhat-developer/rhdh-plugin-export-overlays#4470 · コメント 1 件 ·
メンテナーはふだん 1 日以内に返信