mirror of
https://github.com/withastro/astro.git
synced 2024-12-23 21:53:55 -05:00
Fix client:only CSS missing from child packages (#4699)
This commit is contained in:
parent
d1e6959147
commit
b85d05a841
8 changed files with 56 additions and 2 deletions
5
.changeset/orange-clocks-exist.md
Normal file
5
.changeset/orange-clocks-exist.md
Normal file
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
'astro': patch
|
||||
---
|
||||
|
||||
Fix missing CSS in client:only in child packages
|
|
@ -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)) {
|
||||
|
|
|
@ -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', () => {
|
||||
|
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
6
packages/astro/test/fixtures/astro-client-only/pkg/index.svelte
vendored
Normal file
6
packages/astro/test/fixtures/astro-client-only/pkg/index.svelte
vendored
Normal 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
4
packages/astro/test/fixtures/astro-client-only/pkg/package.json
vendored
Normal 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
12
packages/astro/test/fixtures/astro-client-only/src/pages/pkg.astro
vendored
Normal 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>
|
|
@ -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'
|
||||
|
|
Loading…
Reference in a new issue