Stop treating CSS imported by injected-script chunks as orphaned

.changeset/full-dingos-stand.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes CSS imported from an `injectScript('page')` script being dropped during build

packages/astro/src/core/build/plugins/plugin-css.ts

@@ -493,10 +493,14 @@ function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[] {
 				}
 
 				const wasInlined = toBeInlined && sheetAddedToPage;
-				// stylesheets already referenced as an asset by a chunk will not be inlined by
-				// this plugin, but should not be considered orphaned
+				// Stylesheets referenced by a chunk (via importedAssets for ?url imports,
+				// or importedCss for normal CSS imports) are delivered by Vite's preload
+				// helper at runtime and must not be treated as orphaned.
 				const wasAddedToChunk = Object.values(bundle).some(
-					(chunk) => chunk.type === 'chunk' && chunk.viteMetadata?.importedAssets?.has(id),
+					(chunk) =>
+						chunk.type === 'chunk' &&
+						(chunk.viteMetadata?.importedAssets?.has(id) ||
+							chunk.viteMetadata?.importedCss?.has(id)),
 				);
 				const isOrphaned = !sheetAddedToPage && !wasAddedToChunk;
 

packages/astro/test/fixtures/injected-script-css/astro.config.mjs

@@ -0,0 +1,14 @@
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+	integrations: [
+		{
+			name: 'injected-css-test',
+			hooks: {
+				'astro:config:setup': ({ injectScript }) => {
+					injectScript('page', `import '/integration/script.js';`);
+				},
+			},
+		},
+	],
+});

packages/astro/test/fixtures/injected-script-css/integration/script.js

@@ -0,0 +1,4 @@
+document.querySelector('#injected').addEventListener('click', async () => {
+	const { mount } = await import('./widget.js');
+	mount('injected');
+});

packages/astro/test/fixtures/injected-script-css/integration/widget.css

@@ -0,0 +1,3 @@
+.injected-widget {
+	color: red;
+}

packages/astro/test/fixtures/injected-script-css/integration/widget.js

@@ -0,0 +1,8 @@
+import './widget.css';
+
+export function mount(label) {
+	const el = document.createElement('p');
+	el.className = 'injected-widget';
+	el.textContent = `${label}: styled`;
+	document.body.append(el);
+}

packages/astro/test/fixtures/injected-script-css/package.json

@@ -0,0 +1,8 @@
+{
+	"name": "@test/injected-script-css",
+	"version": "0.0.0",
+	"private": true,
+	"dependencies": {
+		"astro": "workspace:*"
+	}
+}

packages/astro/test/fixtures/injected-script-css/src/pages/index.astro

@@ -0,0 +1,9 @@
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<title>injected script CSS test</title>
+	</head>
+	<body>
+		<button id="injected">Load widget</button>
+	</body>
+</html>

packages/astro/test/injected-script-css.test.ts

@@ -0,0 +1,31 @@
+import * as assert from 'node:assert/strict';
+import { before, describe, it } from 'node:test';
+import { type Fixture, loadFixture } from './test-utils.ts';
+
+describe('CSS imported from injectScript page scripts', () => {
+	let fixture: Fixture;
+
+	before(async () => {
+		fixture = await loadFixture({
+			root: './fixtures/injected-script-css/',
+		});
+		await fixture.build();
+	});
+
+	it('emits the CSS file to the build output', async () => {
+		const assets = await fixture.readdir('/_astro');
+		const cssFiles = assets.filter((f) => f.endsWith('.css'));
+		assert.ok(cssFiles.length > 0, 'Expected at least one CSS file in /_astro');
+
+		// Verify the CSS content includes the injected widget styles
+		let foundInjectedCss = false;
+		for (const cssFile of cssFiles) {
+			const content = await fixture.readFile(`/_astro/${cssFile}`);
+			if (content.includes('.injected-widget')) {
+				foundInjectedCss = true;
+				break;
+			}
+		}
+		assert.ok(foundInjectedCss, 'Expected .injected-widget styles in a CSS file');
+	});
+});