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
withastro · Nov 18, 2022 · f5ed630 · f5ed630
1 parent 4266869
commit f5ed630
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 7 deletions.
diff --git a/.changeset/pink-cheetahs-heal.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,9 @@
+---
+import ReactTSXComponent from '../components/TSXComponent';
+---
+<html>
+<head><title>Client only pages</title></head>
+<body>
+	<ReactTSXComponent client:only="react" />
+</body>
+</html>