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

Fixes client:only CSS in Svelte components (#4782)

Browse source 
* Fixes client:only CSS in Svelte components

* Add changeset
This commit is contained in:
Matthew Phillips 2022-09-17 12:32:35 -04:00 committed by GitHub
parent 1c36b0ec18
commit 8f9463e07f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 66 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/witty-suits-grab.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Fixes client:only CSS in Svelte components

12
packages/astro/src/core/build/internal.ts
View file

@ -136,13 +136,21 @@ export function* getPageDatasByClientOnlyID(
): Generator<PageBuildData, void, unknown> { ): Generator<PageBuildData, void, unknown> {
const pagesByClientOnly = internals.pagesByClientOnly; const pagesByClientOnly = internals.pagesByClientOnly;
if (pagesByClientOnly.size) { if (pagesByClientOnly.size) {
let pathname = `/@fs${prependForwardSlash(viteid)}`; // 1. Try the viteid
let pageBuildDatas = pagesByClientOnly.get(viteid); let pageBuildDatas = pagesByClientOnly.get(viteid);
// 2. Try prepending /@fs
if(!pageBuildDatas) {
let pathname = `/@fs${prependForwardSlash(viteid)}`;
pageBuildDatas = pagesByClientOnly.get(pathname);
}
// 3. Remove the file extension
// BUG! The compiler partially resolves .jsx to remove the file extension so we have to check again. // BUG! The compiler partially resolves .jsx to remove the file extension so we have to check again.
// We should probably get rid of all `@fs` usage and always fully resolve via Vite, // We should probably get rid of all `@fs` usage and always fully resolve via Vite,
// but this would be a bigger change. // but this would be a bigger change.
if (!pageBuildDatas) { if (!pageBuildDatas) {
pathname = `/@fs${prependForwardSlash(removeFileExtension(viteid))}`; let pathname = `/@fs${prependForwardSlash(removeFileExtension(viteid))}`;
pageBuildDatas = pagesByClientOnly.get(pathname); pageBuildDatas = pagesByClientOnly.get(pathname);
} }
if (pageBuildDatas) { if (pageBuildDatas) {

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

@ -35,6 +35,18 @@ describe('Client only components', () => {
expect(css).to.match(/Courier New/, 'Global styles are added'); expect(css).to.match(/Courier New/, 'Global styles are added');
}); });
it('Adds the CSS to the page - standalone svelte component', async () => {
const html = await fixture.readFile('/persistent-counter-standalone/index.html');
const $ = cheerioLoad(html);
expect($('head link[rel=stylesheet]')).to.have.a.lengthOf(1);
const href = $('link[rel=stylesheet]').attr('href');
const css = await fixture.readFile(href);
expect(css).to.match(/tomato/, 'Svelte styles are added');
});
it('Includes CSS from components that use CSS modules', async () => { it('Includes CSS from components that use CSS modules', async () => {
const html = await fixture.readFile('/css-modules/index.html'); const html = await fixture.readFile('/css-modules/index.html');
const $ = cheerioLoad(html); const $ = cheerioLoad(html);

24
packages/astro/test/fixtures/astro-client-only/src/components/PersistentCounterStandalone.svelte vendored Normal file
View file

@ -0,0 +1,24 @@
<script>
import './logResize';
let count = parseInt(localStorage.getItem('test:count')) || 0;
$: localStorage.setItem('test:count', count);
function add() {
count += 1;
}
function subtract() {
count -= 1;
}
</script>
<style>
button {
background: tomato;
}
</style>
<div class="counter">
<button on:click={subtract}>-</button>
<pre>{ count }</pre>
<button on:click={add}>+</button>
</div>

15
packages/astro/test/fixtures/astro-client-only/src/pages/persistent-counter-standalone.astro vendored Normal file
View file

@ -0,0 +1,15 @@
---
import PersistentCounter from '../components/PersistentCounterStandalone.svelte';
---
<html>
<head>
<title>Client only pages - Only PersistentCounter, nothing else</title>
</head>
<body>
<!--
Do not add another test-case to this file. This is meant to test if only a single component is used.
-->
<PersistentCounter client:only />
</body>
</html>