@megabudino/stack-utils 2.0.1 → 2.1.0

package/dist/proxy/vite-plugin.d.ts

@@ -1,2 +1,16 @@
-import type { Plugin } from 'vite';
+import type { Plugin, Rollup } from 'vite';
 export declare function proxyIslands(): Plugin;
+/**
+ * Collect every client stylesheet that must load for the islands bootstrap to
+ * paint correctly.
+ *
+ * Vite/Rollup code-splitting frequently hoists an island component into a
+ * shared chunk (for example when the same component is also imported by a
+ * normal SvelteKit route). In that case the component's `importedCss` is
+ * attributed to the shared chunk, not to the bootstrap entry chunk, so reading
+ * only the entry chunk's own `importedCss` misses the styles. We therefore walk
+ * the chunk graph transitively from the entry chunk, following each chunk's
+ * STATIC `imports` (dynamic imports are not required for first paint and could
+ * over-inject unrelated CSS), unioning the `importedCss` we find along the way.
+ */
+export declare function extractClientStylesheetUrls(entryChunk: Rollup.OutputChunk, bundle: Rollup.OutputBundle, base: string): string[];

package/dist/proxy/vite-plugin.js

@@ -104,7 +104,7 @@ export function proxyIslands() {
                 throw new Error('[stack-utils proxy] failed to locate the generated islands client chunk.');
             }
             const clientEntryUrl = toPublicAssetUrl(clientEntryFileName, config.base);
-            const clientStylesheetUrls = extractClientStylesheetUrls(clientChunk, config.base);
+            const clientStylesheetUrls = extractClientStylesheetUrls(clientChunk, bundle, config.base);
             await patchServerOutputFiles(config.root, clientEntryUrl, clientStylesheetUrls);
         }
     };
@@ -250,14 +250,35 @@ function findHooksServerFile(root) {
 function toDevFsUrl(filePath) {
     return `/@fs/${filePath.split(path.sep).join('/')}`;
 }
-function extractClientStylesheetUrls(chunk, base) {
+/**
+ * Collect every client stylesheet that must load for the islands bootstrap to
+ * paint correctly.
+ *
+ * Vite/Rollup code-splitting frequently hoists an island component into a
+ * shared chunk (for example when the same component is also imported by a
+ * normal SvelteKit route). In that case the component's `importedCss` is
+ * attributed to the shared chunk, not to the bootstrap entry chunk, so reading
+ * only the entry chunk's own `importedCss` misses the styles. We therefore walk
+ * the chunk graph transitively from the entry chunk, following each chunk's
+ * STATIC `imports` (dynamic imports are not required for first paint and could
+ * over-inject unrelated CSS), unioning the `importedCss` we find along the way.
+ */
+export function extractClientStylesheetUrls(entryChunk, bundle, base) {
     const urls = new Set();
-    const importedCss = Array.from(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (chunk.viteMetadata?.importedCss ?? []));
-    for (const fileName of importedCss) {
-        urls.add(toPublicAssetUrl(fileName, base));
-    }
+    const visited = new Set();
+    const visit = (chunk) => {
+        if (!chunk || chunk.type !== 'chunk' || visited.has(chunk.fileName)) {
+            return;
+        }
+        visited.add(chunk.fileName);
+        for (const fileName of chunk.viteMetadata?.importedCss ?? []) {
+            urls.add(toPublicAssetUrl(fileName, base));
+        }
+        for (const importFileName of chunk.imports ?? []) {
+            visit(bundle[importFileName]);
+        }
+    };
+    visit(entryChunk);
     return [...urls];
 }
 async function patchServerOutputFiles(root, clientEntryUrl, clientStylesheetUrls) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@megabudino/stack-utils",
-	"version": "2.0.1",
+	"version": "2.1.0",
 	"description": "Reusable utilities for a SvelteKit stack, including a reverse proxy and static image pipeline",
 	"type": "module",
 	"exports": {
@@ -42,6 +42,7 @@
 	"dependencies": {
 		"cheerio": "^1.2.0",
 		"node-addon-api": "^8.8.0",
+		"node-gyp": "^12.3.0",
 		"sharp": "^0.34.5"
 	},
 	"peerDependencies": {