diff options
8 files changed, 56 insertions, 2 deletions
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' |