From b85d05a841538b6a995808b6422b234f3e746804 Mon Sep 17 00:00:00 2001
From: Matthew Phillips <matthew@skypack.dev>
Date: Fri, 9 Sep 2022 14:51:58 -0400
Subject: [PATCH] Fix client:only CSS missing from child packages (#4699)

---
 .changeset/orange-clocks-exist.md                    |  5 +++++
 .../astro/src/core/build/vite-plugin-analyzer.ts     | 11 ++++++++++-
 packages/astro/test/astro-client-only.test.js        |  7 +++++++
 .../test/fixtures/astro-client-only/package.json     |  3 ++-
 .../test/fixtures/astro-client-only/pkg/index.svelte |  6 ++++++
 .../test/fixtures/astro-client-only/pkg/package.json |  4 ++++
 .../fixtures/astro-client-only/src/pages/pkg.astro   | 12 ++++++++++++
 pnpm-lock.yaml                                       | 10 ++++++++++
 8 files changed, 56 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/orange-clocks-exist.md
 create mode 100644 packages/astro/test/fixtures/astro-client-only/pkg/index.svelte
 create mode 100644 packages/astro/test/fixtures/astro-client-only/pkg/package.json
 create mode 100644 packages/astro/test/fixtures/astro-client-only/src/pages/pkg.astro

diff --git a/.changeset/orange-clocks-exist.md b/.changeset/orange-clocks-exist.md
new file mode 100644
index 000000000..65b428643
--- /dev/null
+++ b/.changeset/orange-clocks-exist.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix missing CSS in client:only in child packages
diff --git a/packages/astro/src/core/build/vite-plugin-analyzer.ts b/packages/astro/src/core/build/vite-plugin-analyzer.ts
index e25ee42aa..faa252bef 100644
--- a/packages/astro/src/core/build/vite-plugin-analyzer.ts
+++ b/packages/astro/src/core/build/vite-plugin-analyzer.ts
@@ -70,7 +70,7 @@ export function vitePluginAnalyzer(internals: BuildInternals): VitePlugin {
 
 	return {
 		name: '@astro/rollup-plugin-astro-analyzer',
-		generateBundle() {
+		async generateBundle() {
 			const hoistScanner = hoistedScriptScanner();
 
 			const ids = this.getModuleIds();
@@ -95,6 +95,15 @@ export function vitePluginAnalyzer(internals: BuildInternals): VitePlugin {
 						const cid = c.resolvedPath ? decodeURI(c.resolvedPath) : c.specifier;
 						internals.discoveredClientOnlyComponents.add(cid);
 						clientOnlys.push(cid);
+						// Bare module specifiers need to be resolved so that the CSS
+						// plugin can walk up the graph to find which page they belong to.
+						if(c.resolvedPath === c.specifier) {
+							const resolvedId = await this.resolve(c.specifier, id);
+							if(resolvedId) {
+								clientOnlys.push(resolvedId.id);
+							}
+						}
+						
 					}
 
 					for (const [pageInfo] of getTopLevelPages(id, this)) {
diff --git a/packages/astro/test/astro-client-only.test.js b/packages/astro/test/astro-client-only.test.js
index 90e4b083d..0600b4950 100644
--- a/packages/astro/test/astro-client-only.test.js
+++ b/packages/astro/test/astro-client-only.test.js
@@ -3,6 +3,7 @@ import { load as cheerioLoad } from 'cheerio';
 import { loadFixture } from './test-utils.js';
 
 describe('Client only components', () => {
+	/** @type {import('./test-utils').Fixture} */
 	let fixture;
 
 	before(async () => {
@@ -39,6 +40,12 @@ describe('Client only components', () => {
 		const $ = cheerioLoad(html);
 		expect($('link[rel=stylesheet]')).to.have.a.lengthOf(1);
 	});
+
+	it('Includes CSS from package components', async () => {
+		const html = await fixture.readFile('/pkg/index.html');
+		const $ = cheerioLoad(html);
+		expect($('link[rel=stylesheet]')).to.have.a.lengthOf(1);
+	});
 });
 
 describe('Client only components subpath', () => {
diff --git a/packages/astro/test/fixtures/astro-client-only/package.json b/packages/astro/test/fixtures/astro-client-only/package.json
index dd987f6c2..69bef83c6 100644
--- a/packages/astro/test/fixtures/astro-client-only/package.json
+++ b/packages/astro/test/fixtures/astro-client-only/package.json
@@ -7,6 +7,7 @@
     "@astrojs/react": "workspace:*",
     "astro": "workspace:*",
     "react": "^18.1.0",
-    "react-dom": "^18.1.0"
+    "react-dom": "^18.1.0",
+    "@test/astro-client-only-pkg": "file:./pkg"
   }
 }
diff --git a/packages/astro/test/fixtures/astro-client-only/pkg/index.svelte b/packages/astro/test/fixtures/astro-client-only/pkg/index.svelte
new file mode 100644
index 000000000..3e81de564
--- /dev/null
+++ b/packages/astro/test/fixtures/astro-client-only/pkg/index.svelte
@@ -0,0 +1,6 @@
+<h1>Testing</h1>
+<style>
+	h1 {
+		background: green;
+	}
+</style>
diff --git a/packages/astro/test/fixtures/astro-client-only/pkg/package.json b/packages/astro/test/fixtures/astro-client-only/pkg/package.json
new file mode 100644
index 000000000..03e6121e6
--- /dev/null
+++ b/packages/astro/test/fixtures/astro-client-only/pkg/package.json
@@ -0,0 +1,4 @@
+{
+  "name": "@test/astro-client-only-pkg",
+  "main": "index.svelte"
+}
diff --git a/packages/astro/test/fixtures/astro-client-only/src/pages/pkg.astro b/packages/astro/test/fixtures/astro-client-only/src/pages/pkg.astro
new file mode 100644
index 000000000..dbf693ef8
--- /dev/null
+++ b/packages/astro/test/fixtures/astro-client-only/src/pages/pkg.astro
@@ -0,0 +1,12 @@
+---
+import IndexSvelte from '@test/astro-client-only-pkg';
+---
+<html>
+	<head>
+		<title>Testing</title>
+	</head>
+	<body>
+		<h1>Testing</h1>
+		<IndexSvelte client:only="svelte" />
+	</body>
+</html>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e5c2a6f1e..1be339084 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1097,16 +1097,21 @@ importers:
     specifiers:
       '@astrojs/react': workspace:*
       '@astrojs/svelte': workspace:*
+      '@test/astro-client-only-pkg': file:./pkg
       astro: workspace:*
       react: ^18.1.0
       react-dom: ^18.1.0
     dependencies:
       '@astrojs/react': link:../../../../integrations/react
       '@astrojs/svelte': link:../../../../integrations/svelte
+      '@test/astro-client-only-pkg': file:packages/astro/test/fixtures/astro-client-only/pkg
       astro: link:../../..
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
 
+  packages/astro/test/fixtures/astro-client-only/pkg:
+    specifiers: {}
+
   packages/astro/test/fixtures/astro-component-code:
     specifiers:
       astro: workspace:*
@@ -17934,6 +17939,11 @@ packages:
     resolution: {integrity: sha512-JZxotl7SxAJH0j7dN4pxsTV6ZLXoLdGME+PsjkL/DaBrVryK9kTGq06GfKrwcSOqypP+fdXGoCHE36b99fWVoA==}
     dev: false
 
+  file:packages/astro/test/fixtures/astro-client-only/pkg:
+    resolution: {directory: packages/astro/test/fixtures/astro-client-only/pkg, type: directory}
+    name: '@test/astro-client-only-pkg'
+    dev: false
+
   file:packages/astro/test/fixtures/css-assets/packages/font-awesome:
     resolution: {directory: packages/astro/test/fixtures/css-assets/packages/font-awesome, type: directory}
     name: '@astrojs/test-font-awesome-package'