michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix client:only CSS missing from child packages (#4699)

Browse source
This commit is contained in:
Matthew Phillips 2022-09-09 14:51:58 -04:00 committed by GitHub
parent d1e6959147
commit b85d05a841
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 56 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/orange-clocks-exist.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Fix missing CSS in client:only in child packages

11
packages/astro/src/core/build/vite-plugin-analyzer.ts
View file

@ -70,7 +70,7 @@ export function vitePluginAnalyzer(internals: BuildInternals): VitePlugin {
return { return {
name: '@astro/rollup-plugin-astro-analyzer', name: '@astro/rollup-plugin-astro-analyzer',
generateBundle() { async generateBundle() {
const hoistScanner = hoistedScriptScanner(); const hoistScanner = hoistedScriptScanner();
const ids = this.getModuleIds(); const ids = this.getModuleIds();
@ -95,6 +95,15 @@ export function vitePluginAnalyzer(internals: BuildInternals): VitePlugin {
const cid = c.resolvedPath ? decodeURI(c.resolvedPath) : c.specifier; const cid = c.resolvedPath ? decodeURI(c.resolvedPath) : c.specifier;
internals.discoveredClientOnlyComponents.add(cid); internals.discoveredClientOnlyComponents.add(cid);
clientOnlys.push(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)) { for (const [pageInfo] of getTopLevelPages(id, this)) {

7
packages/astro/test/astro-client-only.test.js
View file

@ -3,6 +3,7 @@ import { load as cheerioLoad } from 'cheerio';
import { loadFixture } from './test-utils.js'; import { loadFixture } from './test-utils.js';
describe('Client only components', () => { describe('Client only components', () => {
/** @type {import('./test-utils').Fixture} */
let fixture; let fixture;
before(async () => { before(async () => {
@ -39,6 +40,12 @@ describe('Client only components', () => {
const $ = cheerioLoad(html); const $ = cheerioLoad(html);
expect($('link[rel=stylesheet]')).to.have.a.lengthOf(1); 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', () => { describe('Client only components subpath', () => {

3
packages/astro/test/fixtures/astro-client-only/package.json vendored
View file

@ -7,6 +7,7 @@
"@astrojs/react": "workspace:*", "@astrojs/react": "workspace:*",
"astro": "workspace:*", "astro": "workspace:*",
"react": "^18.1.0", "react": "^18.1.0",
"react-dom": "^18.1.0" "react-dom": "^18.1.0",
"@test/astro-client-only-pkg": "file:./pkg"
} }
} }

6
packages/astro/test/fixtures/astro-client-only/pkg/index.svelte vendored Normal file
View file

@ -0,0 +1,6 @@
<h1>Testing</h1>
<style>
h1 {
background: green;
}
</style>

4
packages/astro/test/fixtures/astro-client-only/pkg/package.json vendored Normal file
View file

@ -0,0 +1,4 @@
{
"name": "@test/astro-client-only-pkg",
"main": "index.svelte"
}

12
packages/astro/test/fixtures/astro-client-only/src/pages/pkg.astro vendored Normal file
View file

@ -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>

10
pnpm-lock.yaml
View file

@ -1097,16 +1097,21 @@ importers:
specifiers: specifiers:
'@astrojs/react': workspace:* '@astrojs/react': workspace:*
'@astrojs/svelte': workspace:* '@astrojs/svelte': workspace:*
'@test/astro-client-only-pkg': file:./pkg
astro: workspace:* astro: workspace:*
react: ^18.1.0 react: ^18.1.0
react-dom: ^18.1.0 react-dom: ^18.1.0
dependencies: dependencies:
'@astrojs/react': link:../../../../integrations/react '@astrojs/react': link:../../../../integrations/react
'@astrojs/svelte': link:../../../../integrations/svelte '@astrojs/svelte': link:../../../../integrations/svelte
'@test/astro-client-only-pkg': file:packages/astro/test/fixtures/astro-client-only/pkg
astro: link:../../.. astro: link:../../..
react: 18.2.0 react: 18.2.0
react-dom: 18.2.0_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: packages/astro/test/fixtures/astro-component-code:
specifiers: specifiers:
astro: workspace:* astro: workspace:*
@ -17934,6 +17939,11 @@ packages:
resolution: {integrity: sha512-JZxotl7SxAJH0j7dN4pxsTV6ZLXoLdGME+PsjkL/DaBrVryK9kTGq06GfKrwcSOqypP+fdXGoCHE36b99fWVoA==} resolution: {integrity: sha512-JZxotl7SxAJH0j7dN4pxsTV6ZLXoLdGME+PsjkL/DaBrVryK9kTGq06GfKrwcSOqypP+fdXGoCHE36b99fWVoA==}
dev: false 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: file:packages/astro/test/fixtures/css-assets/packages/font-awesome:
resolution: {directory: packages/astro/test/fixtures/css-assets/packages/font-awesome, type: directory} resolution: {directory: packages/astro/test/fixtures/css-assets/packages/font-awesome, type: directory}
name: '@astrojs/test-font-awesome-package' name: '@astrojs/test-font-awesome-package'