diff options
| author |  Matthew Phillips <matthew@skypack.dev>
| 2022-09-17 12:32:35 -0400 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2022-09-17 12:32:35 -0400 |
| commit | 8f9463e07f23f0b617ca420852acf7af5f3d04ef (patch) | |
| tree | 4b690141a535cff2cddc30a06e9c498c6246a269 | |
| parent | 1c36b0ec18e4d9b957fc17ba6d4d126e50349d55 (diff) | |
| download | astro-8f9463e07f23f0b617ca420852acf7af5f3d04ef.tar.gz astro-8f9463e07f23f0b617ca420852acf7af5f3d04ef.tar.zst astro-8f9463e07f23f0b617ca420852acf7af5f3d04ef.zip | |
Fixes client:only CSS in Svelte components (#4782)
* Fixes client:only CSS in Svelte components
* Add changeset
5 files changed, 66 insertions, 2 deletions
diff --git a/.changeset/witty-suits-grab.md b/.changeset/witty-suits-grab.md new file mode 100644 index 000000000..d5397059f --- /dev/null +++ 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 index 6d3cc9f36..4209fda46 100644 --- 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 index 0600b4950..ef92d8005 100644 --- 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/packages/astro/test/fixtures/astro-client-only/src/components/PersistentCounterStandalone.svelte b/packages/astro/test/fixtures/astro-client-only/src/components/PersistentCounterStandalone.svelte new file mode 100644 index 000000000..c851a42f8 --- /dev/null +++ b/packages/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 new file mode 100644 index 000000000..00fbd92fd --- /dev/null +++ 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> |