Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fixes client:only CSS in Svelte components #4782

Merged
merged 2 commits into from
Sep 17, 2022
Merged

Fixes client:only CSS in Svelte components #4782

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9fbf809
Fixes client:only CSS in Svelte components
matthewp Sep 16, 2022
e8f4d68
Add changeset
matthewp Sep 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Fixes client:only CSS in Svelte components
  • Loading branch information
@matthewp
matthewp committed Sep 16, 2022
commit 9fbf809916851553c154507c894edf89eb492b67
12 changes: 10 additions & 2 deletions packages/astro/src/core/build/internal.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,13 +136,21 @@ export function* getPageDatasByClientOnlyID(
): Generator<PageBuildData, void, unknown> {
const pagesByClientOnly = internals.pagesByClientOnly;
if (pagesByClientOnly.size) {
let pathname = `/@fs${prependForwardSlash(viteid)}`;
// 1. Try the 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.
// We should probably get rid of all `@fs` usage and always fully resolve via Vite,
// but this would be a bigger change.
if (!pageBuildDatas) {
pathname = `/@fs${prependForwardSlash(removeFileExtension(viteid))}`;
let pathname = `/@fs${prependForwardSlash(removeFileExtension(viteid))}`;
pageBuildDatas = pagesByClientOnly.get(pathname);
}
if (pageBuildDatas) {
Expand Down
12 changes: 12 additions & 0 deletions packages/astro/test/astro-client-only.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,18 @@ describe('Client only components', () => {
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 () => {
const html = await fixture.readFile('/css-modules/index.html');
const $ = cheerioLoad(html);
Expand Down
24 changes: 24 additions & 0 deletions ...s/astro/test/fixtures/astro-client-only/src/components/PersistentCounterStandalone.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 changes: 15 additions & 0 deletions packages/astro/test/fixtures/astro-client-only/src/pages/persistent-counter-standalone.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>