From f5ed630bca05ebbfcc6ac994ced3911e41daedcc Mon Sep 17 00:00:00 2001
From: Matthew Phillips <matthew@skypack.dev>
Date: Fri, 18 Nov 2022 10:44:55 -0500
Subject: [PATCH] Use Vite's resolve to resolve paths for client:only (#5434)

* Use Vite's resolve to resolve paths for client:only

* Adding a changeset

* Add it to the markdown legacy plugin too

* Remove fully resolving

* Fully resolve in the analyzer

* don't do this twice

* remove dead code
---
 .changeset/pink-cheetahs-heal.md                      |  5 +++++
 packages/astro/src/core/build/vite-plugin-analyzer.ts | 11 ++++-------
 packages/astro/test/astro-client-only.test.js         | 10 ++++++++++
 .../astro-client-only/src/components/TSXComponent.tsx |  6 ++++++
 .../astro-client-only/src/components/global2.css      |  3 +++
 .../src/pages/tsx-no-extension.astro                  |  9 +++++++++
 6 files changed, 37 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/pink-cheetahs-heal.md
 create mode 100644 packages/astro/test/fixtures/astro-client-only/src/components/TSXComponent.tsx
 create mode 100644 packages/astro/test/fixtures/astro-client-only/src/components/global2.css
 create mode 100644 packages/astro/test/fixtures/astro-client-only/src/pages/tsx-no-extension.astro

diff --git a/.changeset/pink-cheetahs-heal.md b/.changeset/pink-cheetahs-heal.md
new file mode 100644
index 0000000000..719f29479a
--- /dev/null
+++ b/.changeset/pink-cheetahs-heal.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Use Vite's resolve to resolve paths for client:only
diff --git a/packages/astro/src/core/build/vite-plugin-analyzer.ts b/packages/astro/src/core/build/vite-plugin-analyzer.ts
index 65da4fd0f8..1d329aebd9 100644
--- a/packages/astro/src/core/build/vite-plugin-analyzer.ts
+++ b/packages/astro/src/core/build/vite-plugin-analyzer.ts
@@ -95,13 +95,10 @@ 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);
-							}
+						
+						const resolvedId = await this.resolve(c.specifier, id);
+						if (resolvedId) {
+							clientOnlys.push(resolvedId.id);
 						}
 					}
 
diff --git a/packages/astro/test/astro-client-only.test.js b/packages/astro/test/astro-client-only.test.js
index ef92d80054..f3329c683b 100644
--- a/packages/astro/test/astro-client-only.test.js
+++ b/packages/astro/test/astro-client-only.test.js
@@ -93,4 +93,14 @@ describe('Client only components subpath', () => {
 		expect(css).to.match(/yellowgreen/, 'Svelte styles are added');
 		expect(css).to.match(/Courier New/, 'Global styles are added');
 	});
+
+	it('Adds the CSS to the page for TSX components', async () => {
+		const html = await fixture.readFile('/tsx-no-extension/index.html');
+		const $ = cheerioLoad(html);
+
+		const href = $('link[rel=stylesheet]').attr('href');
+		const css = await fixture.readFile(href.replace(/\/blog/, ''));
+
+		expect(css).to.match(/purple/, 'Global styles from tsx component are added');
+	});
 });
diff --git a/packages/astro/test/fixtures/astro-client-only/src/components/TSXComponent.tsx b/packages/astro/test/fixtures/astro-client-only/src/components/TSXComponent.tsx
new file mode 100644
index 0000000000..8a8afbde47
--- /dev/null
+++ b/packages/astro/test/fixtures/astro-client-only/src/components/TSXComponent.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import './global2.css';
+
+export default function() {
+	return <div>i am react</div>
+}
diff --git a/packages/astro/test/fixtures/astro-client-only/src/components/global2.css b/packages/astro/test/fixtures/astro-client-only/src/components/global2.css
new file mode 100644
index 0000000000..6bfd2ae576
--- /dev/null
+++ b/packages/astro/test/fixtures/astro-client-only/src/components/global2.css
@@ -0,0 +1,3 @@
+body {
+	color: purple;
+}
diff --git a/packages/astro/test/fixtures/astro-client-only/src/pages/tsx-no-extension.astro b/packages/astro/test/fixtures/astro-client-only/src/pages/tsx-no-extension.astro
new file mode 100644
index 0000000000..a33d711966
--- /dev/null
+++ b/packages/astro/test/fixtures/astro-client-only/src/pages/tsx-no-extension.astro
@@ -0,0 +1,9 @@
+---
+import ReactTSXComponent from '../components/TSXComponent';
+---
+<html>
+<head><title>Client only pages</title></head>
+<body>
+	<ReactTSXComponent client:only="react" />
+</body>
+</html>