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

* Fixes client:only CSS in Svelte components * Add changeset
withastro · Sep 17, 2022 · 8f9463e · 8f9463e
1 parent 1c36b0e
commit 8f9463e
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 2 deletions.
diff --git a/.changeset/witty-suits-grab.md b/.changeset/witty-suits-grab.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes client:only CSS in Svelte components
diff --git a/packages/astro/src/core/build/internal.ts b/packages/astro/src/core/build/internal.ts
@@ -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) {

diff --git a/packages/astro/test/astro-client-only.test.js b/packages/astro/test/astro-client-only.test.js
@@ -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);

diff --git a/...s/astro/test/fixtures/astro-client-only/src/components/PersistentCounterStandalone.svelte b/...s/astro/test/fixtures/astro-client-only/src/components/PersistentCounterStandalone.svelte
@@ -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>
diff --git a/packages/astro/test/fixtures/astro-client-only/src/pages/persistent-counter-standalone.astro b/packages/astro/test/fixtures/astro-client-only/src/pages/persistent-counter-standalone.astro
@@ -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>