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 { 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 @@ + + +
+ + 
{ count }
+ +
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'; +--- + + + Client only pages - Only PersistentCounter, nothing else + + + + + + +