Fix CSS handling for experimental.directRenderScript (#11026)

.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

.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

packages/astro/src/core/build/internal.ts

@@ -57,6 +57,11 @@ export interface BuildInternals {
 	 */
 	pagesByClientOnly: Map<string, Set<PageBuildData>>;
 
+	/**
+	 * A map for page-specific information by a script in an Astro file
+	 */
+	pagesByScriptId: Map<string, Set<PageBuildData>>;
+
 	/**
 	 * 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<PageBuildData>;
+		if (internals.pagesByScriptId.has(scriptId)) {
+			pageDataSet = internals.pagesByScriptId.get(scriptId)!;
+		} else {
+			pageDataSet = new Set<PageBuildData>();
+			internals.pagesByScriptId.set(scriptId, pageDataSet);
+		}
+		pageDataSet.add(pageData);
+	}
+}
+
 export function* getPageDatasByChunk(
 	internals: BuildInternals,
 	chunk: Rollup.RenderedChunk

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);
 					}
 				}
 			}

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);
+									}
+								}
 							}
 						}
 					}

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(`<script type="module">${inlined}</script>`);
+	if (inlined != null) {
+		// The inlined script may actually be empty, so skip rendering it altogether if so
+		if (inlined) {
+			return markHTMLString(`<script type="module">${inlined}</script>`);
+		} else {
+			return '';
+		}
 	}
 
 	const resolved = await result.resolve(id);

packages/astro/test/fixtures/hoisted-imports/src/pages/script-import-style.astro

@@ -0,0 +1,10 @@
+<html lang="en">
+	<head>
+		<script>
+			import "../styles/script-import-style.css";
+		</script>
+	</head>
+	<body>
+		<h1>Astro</h1>
+	</body>
+</html>

packages/astro/test/fixtures/hoisted-imports/src/styles/script-import-style.css

@@ -0,0 +1,3 @@
+h1 {
+  background-color: tomato;
+}

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);
+		});
 	});
 });