diff --git a/.changeset/pink-cheetahs-heal.md b/.changeset/pink-cheetahs-heal.md
new file mode 100644
index 000000000..719f29479
--- /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 65da4fd0f..1d329aebd 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 ef92d8005..f3329c683 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 000000000..8a8afbde4
--- /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 i am react
+}
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 000000000..6bfd2ae57
--- /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 000000000..a33d71196
--- /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';
+---
+
+Client only pages
+
+
+
+