diff --git a/.changeset/orange-clocks-exist.md b/.changeset/orange-clocks-exist.md
new file mode 100644
index 0000000000..65b4286430
--- /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 e25ee42aa9..faa252befa 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 90e4b083dd..0600b4950f 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 dd987f6c25..69bef83c64 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 0000000000..3e81de5647
--- /dev/null
+++ b/packages/astro/test/fixtures/astro-client-only/pkg/index.svelte
@@ -0,0 +1,6 @@
+Testing
+
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 0000000000..03e6121e65
--- /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 0000000000..dbf693ef8c
--- /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';
+---
+
+
+ Testing
+
+
+ Testing
+
+
+
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e5c2a6f1ef..1be3390841 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'