diff --git a/.changeset/clever-ads-scream.md b/.changeset/clever-ads-scream.md new file mode 100644 index 0000000000..a6a5e4c437 --- /dev/null +++ b/.changeset/clever-ads-scream.md @@ -0,0 +1,5 @@ +--- +"astro": patch +--- + +Skips rendering script tags if it's inlined and empty when `experimental.directRenderScript` is enabled diff --git a/.changeset/rich-melons-worry.md b/.changeset/rich-melons-worry.md new file mode 100644 index 0000000000..224aa72b6b --- /dev/null +++ b/.changeset/rich-melons-worry.md @@ -0,0 +1,5 @@ +--- +"astro": patch +--- + +Fixes CSS handling if imported in a script tag in an Astro file when `experimental.directRenderScript` is enabled diff --git a/packages/astro/src/core/build/internal.ts b/packages/astro/src/core/build/internal.ts index 2c593fa8cf..615d366401 100644 --- a/packages/astro/src/core/build/internal.ts +++ b/packages/astro/src/core/build/internal.ts @@ -57,6 +57,11 @@ export interface BuildInternals { */ pagesByClientOnly: Map>; + /** + * A map for page-specific information by a script in an Astro file + */ + pagesByScriptId: Map>; + /** * A map of hydrated components to export names that are discovered during the SSR build. * These will be used as the top-level entrypoints for the client build. @@ -133,6 +138,7 @@ export function createBuildInternals(): BuildInternals { pageOptionsByPage: new Map(), pagesByViteID: new Map(), pagesByClientOnly: new Map(), + pagesByScriptId: new Map(), propagatedStylesMap: new Map(), propagatedScriptsMap: new Map(), @@ -181,6 +187,26 @@ export function trackClientOnlyPageDatas( } } +/** + * Tracks scripts to the pages they are associated with. (experimental.directRenderScript) + */ +export function trackScriptPageDatas( + internals: BuildInternals, + pageData: PageBuildData, + scriptIds: string[] +) { + for (const scriptId of scriptIds) { + let pageDataSet: Set; + if (internals.pagesByScriptId.has(scriptId)) { + pageDataSet = internals.pagesByScriptId.get(scriptId)!; + } else { + pageDataSet = new Set(); + internals.pagesByScriptId.set(scriptId, pageDataSet); + } + pageDataSet.add(pageData); + } +} + export function* getPageDatasByChunk( internals: BuildInternals, chunk: Rollup.RenderedChunk diff --git a/packages/astro/src/core/build/plugins/plugin-analyzer.ts b/packages/astro/src/core/build/plugins/plugin-analyzer.ts index 06ba6fe002..e91820fb93 100644 --- a/packages/astro/src/core/build/plugins/plugin-analyzer.ts +++ b/packages/astro/src/core/build/plugins/plugin-analyzer.ts @@ -11,7 +11,11 @@ import { getTopLevelPageModuleInfos, moduleIsTopLevelPage, } from '../graph.js'; -import { getPageDataByViteID, trackClientOnlyPageDatas } from '../internal.js'; +import { + getPageDataByViteID, + trackClientOnlyPageDatas, + trackScriptPageDatas, +} from '../internal.js'; import type { StaticBuildOptions } from '../types.js'; function isPropagatedAsset(id: string) { @@ -171,9 +175,21 @@ export function vitePluginAnalyzer( // each script module is its own entrypoint, so we directly assign each script modules to // `discoveredScripts` here, which will eventually be passed as inputs of the client build. if (options.settings.config.experimental.directRenderScript && astro.scripts.length) { - for (let i = 0; i < astro.scripts.length; i++) { - const hid = `${id.replace('/@fs', '')}?astro&type=script&index=${i}&lang.ts`; - internals.discoveredScripts.add(hid); + const scriptIds = astro.scripts.map( + (_, i) => `${id.replace('/@fs', '')}?astro&type=script&index=${i}&lang.ts` + ); + + // Assign as entrypoints for the client bundle + for (const scriptId of scriptIds) { + internals.discoveredScripts.add(scriptId); + } + + // The script may import CSS, so we also have to track the pages that use this script + for (const pageInfo of getTopLevelPageModuleInfos(id, this)) { + const newPageData = getPageDataByViteID(internals, pageInfo.id); + if (!newPageData) continue; + + trackScriptPageDatas(internals, newPageData, scriptIds); } } } diff --git a/packages/astro/src/core/build/plugins/plugin-css.ts b/packages/astro/src/core/build/plugins/plugin-css.ts index 718f81f879..9ac29ebe02 100644 --- a/packages/astro/src/core/build/plugins/plugin-css.ts +++ b/packages/astro/src/core/build/plugins/plugin-css.ts @@ -145,12 +145,21 @@ function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[] { if (pageData) { appendCSSToPage(pageData, meta, pagesToCss, depth, order); } - } else if ( - options.target === 'client' && - internals.hoistedScriptIdToPagesMap.has(pageInfo.id) - ) { - for (const pageData of getPageDatasByHoistedScriptId(internals, pageInfo.id)) { - appendCSSToPage(pageData, meta, pagesToCss, -1, order); + } else if (options.target === 'client') { + // For scripts or hoisted scripts, walk parents until you find a page, and add the CSS to that page. + if (buildOptions.settings.config.experimental.directRenderScript) { + const pageDatas = internals.pagesByScriptId.get(pageInfo.id)!; + if (pageDatas) { + for (const pageData of pageDatas) { + appendCSSToPage(pageData, meta, pagesToCss, -1, order); + } + } + } else { + if (internals.hoistedScriptIdToPagesMap.has(pageInfo.id)) { + for (const pageData of getPageDatasByHoistedScriptId(internals, pageInfo.id)) { + appendCSSToPage(pageData, meta, pagesToCss, -1, order); + } + } } } } diff --git a/packages/astro/src/runtime/server/render/script.ts b/packages/astro/src/runtime/server/render/script.ts index e88ecb749b..1b9c5ce1b3 100644 --- a/packages/astro/src/runtime/server/render/script.ts +++ b/packages/astro/src/runtime/server/render/script.ts @@ -10,8 +10,13 @@ export async function renderScript(result: SSRResult, id: string) { result._metadata.renderedScripts.add(id); const inlined = result.inlinedScripts.get(id); - if (inlined) { - return markHTMLString(``); + if (inlined != null) { + // The inlined script may actually be empty, so skip rendering it altogether if so + if (inlined) { + return markHTMLString(``); + } else { + return ''; + } } const resolved = await result.resolve(id); diff --git a/packages/astro/test/fixtures/hoisted-imports/src/pages/script-import-style.astro b/packages/astro/test/fixtures/hoisted-imports/src/pages/script-import-style.astro new file mode 100644 index 0000000000..623e8b4ffb --- /dev/null +++ b/packages/astro/test/fixtures/hoisted-imports/src/pages/script-import-style.astro @@ -0,0 +1,10 @@ + + + + + +

Astro

+ + diff --git a/packages/astro/test/fixtures/hoisted-imports/src/styles/script-import-style.css b/packages/astro/test/fixtures/hoisted-imports/src/styles/script-import-style.css new file mode 100644 index 0000000000..8662fff3c8 --- /dev/null +++ b/packages/astro/test/fixtures/hoisted-imports/src/styles/script-import-style.css @@ -0,0 +1,3 @@ +h1 { + background-color: tomato; +} diff --git a/packages/astro/test/hoisted-imports.test.js b/packages/astro/test/hoisted-imports.test.js index fba5d4b5e6..219b231849 100644 --- a/packages/astro/test/hoisted-imports.test.js +++ b/packages/astro/test/hoisted-imports.test.js @@ -87,5 +87,15 @@ describe('Hoisted Imports', () => { assert.ok(scripts[0].attribs.src); assert.ok(scripts[1].attribs.src); }); + + it('renders styles if imported from the script', async () => { + const html = await fixture.readFile('/script-import-style/index.html'); + const $ = cheerio.load(html); + const styles = $('style'); + assert.equal(styles.length, 1); + // There should be no script because it's empty (contains only CSS import) + const scripts = $('scripts'); + assert.equal(scripts.length, 0); + }); }); });