diff --git a/packages/core/src/compiler/htmlBundler.ts b/packages/core/src/compiler/htmlBundler.ts index 3bae137bf..c21e1e5a2 100644 --- a/packages/core/src/compiler/htmlBundler.ts +++ b/packages/core/src/compiler/htmlBundler.ts @@ -685,6 +685,7 @@ export async function bundleToSingleHtml( const compStyleChunks: string[] = [...subCompResult.styles]; const compScriptChunks: string[] = [...subCompResult.scripts]; const compExternalScriptSrcs: string[] = [...subCompResult.externalScriptSrcs]; + const compExternalLinkHrefs: string[] = [...subCompResult.externalLinkHrefs]; const compVariablesByComp: Record> = { ...subCompResult.variablesByComp, }; @@ -811,6 +812,18 @@ export async function bundleToSingleHtml( } } + for (const href of compExternalLinkHrefs) { + if (!document.querySelector(`link[href="${href}"]`)) { + const linkEl = document.createElement("link"); + linkEl.setAttribute( + "rel", + href.includes(".css") || href.includes("css2?") ? "stylesheet" : "preconnect", + ); + linkEl.setAttribute("href", href); + document.head.appendChild(linkEl); + } + } + if (compStyleChunks.length) { const style = document.createElement("style"); style.textContent = compStyleChunks.join("\n\n"); diff --git a/packages/core/src/compiler/inlineSubCompositions.ts b/packages/core/src/compiler/inlineSubCompositions.ts index 3ff1a437a..2740f0f41 100644 --- a/packages/core/src/compiler/inlineSubCompositions.ts +++ b/packages/core/src/compiler/inlineSubCompositions.ts @@ -97,6 +97,7 @@ export interface InlineSubCompositionsResult { styles: string[]; scripts: string[]; externalScriptSrcs: string[]; + externalLinkHrefs: string[]; variablesByComp: Record>; } @@ -149,6 +150,7 @@ export function inlineSubCompositions( const styles: string[] = []; const scripts: string[] = []; const externalScriptSrcs: string[] = []; + const externalLinkHrefs: string[] = []; const variablesByComp: Record> = {}; for (const hostEl of hosts) { @@ -221,6 +223,14 @@ export function inlineSubCompositions( externalScriptSrcs.push(externalSrc); } } + for (const link of [ + ...compDoc.head.querySelectorAll('link[rel="stylesheet"], link[rel="preconnect"]'), + ]) { + const href = (link.getAttribute("href") || "").trim(); + if (href && !externalLinkHrefs.includes(href)) { + externalLinkHrefs.push(href); + } + } } // Extract styles from content @@ -325,5 +335,5 @@ export function inlineSubCompositions( hostEl.removeAttribute("data-composition-src"); } - return { styles, scripts, externalScriptSrcs, variablesByComp }; + return { styles, scripts, externalScriptSrcs, externalLinkHrefs, variablesByComp }; } diff --git a/packages/core/src/runtime/compositionLoader.ts b/packages/core/src/runtime/compositionLoader.ts index abc0e3b33..bb335694a 100644 --- a/packages/core/src/runtime/compositionLoader.ts +++ b/packages/core/src/runtime/compositionLoader.ts @@ -262,6 +262,8 @@ async function mountCompositionContent(params: { headStyles?: HTMLStyleElement[]; /** Extra