fix: inline server stylesheets instead of client stylesheets #13068
Conversation
🦋 Changeset detectedLatest commit: 3b44f22 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
| } | ||
|
|
||
| // ignore dynamically imported stylesheets since we can't inline those | ||
| css.filter(asset => client_stylesheets.has(asset.fileName)) |
There was a problem hiding this comment.
Just for understanding: asset.fileName is always different between client and server, i.e. there's no chance of this accidentally filtering out a server stylesheet?
There was a problem hiding this comment.
Yeah, they're always different. The client stylesheets correspond to the node index number while server stylesheets are always "_page" or "_layout".
There was a problem hiding this comment.
@eltigerchino @dummdidumm
When running npm run build in SvelteKit v2.16.1, the following error occurs:
[vite-plugin-sveltekit-compile] ENOENT: no such file or directory, open '/Users/me/.svelte-kit/output/server/undefined'
at Object.readFileSync (node:fs:442:20)
at file:///Users/me/node_modules/@sveltejs/kit/src/exports/vite/build/build_server.js:59:24
at Array.forEach (<anonymous>)
at build_server_nodes (file:///Users/me/node_modules/@sveltejs/kit/src/exports/vite/build/build_server.js:51:5)
at Object.handler (file:///Users/me/node_modules/@sveltejs/kit/src/exports/vite/index.js:919:5)
at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
at async PluginDriver.hookParallel (file:///Users/me/node_modules/rollup/dist/es/shared/node-entry.js:20734:17)
at async file:///Users/me/node_modules/rollup/dist/es/shared/node-entry.js:21783:13
at async catchUnfinishedHookActions (file:///Users/me/node_modules/rollup/dist/es/shared/node-entry.js:21158:16)
at async build (file:///Users/me/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:65607:16)
Looking at the contents of client_stylesheets and asset.fileName, there is a filename string like _app/immutable/assets/Header.k7gKBesC.css, which seems to be causing the error.
inlineStyleThreshold is set in sveltekit.config.js.
Since this issue only occurs in the SvelteKit application developed at my company, I am unable to provide a minimal reproducible code example. Do you know how to resolve this?
Using the following versions:
"@sveltejs/adapter-node": "5.2.12",
"@sveltejs/kit": "2.16.1",
"@sveltejs/vite-plugin-svelte": "3.1.2",
"vite": "5.4.14",
There was a problem hiding this comment.
It seems that someone else has encountered the same issue as me.
#13304 (comment)
There was a problem hiding this comment.
@tkhs0813, removing inlineStyleThreshold resolved the issue for me!
There was a problem hiding this comment.
@dummdidumm, great! Thanks for the update!
|
preview: https://svelte-dev-git-preview-kit-13068-svelte.vercel.app/ this is an automated message |
fixes #6720
This PR changes the inlined stylesheet from client to server so that the paths for imported assets in the CSS such as fonts are correct when the document first loads. In comparison, the client stylesheet links are relative by default, so they always link to the wrong place
e.g.,
URL("./font.woff")links toexample.com/font.woffwhen loaded from the document instead ofexample.com/_app/immutable/.... However, when loaded from an external stylesheet, the link is correct because the stylesheet is already loaded from/_app/immutable/....TODO:
Please don't delete this checklist! Before submitting the PR, please make sure you do the following:
Tests
pnpm testand lint the project withpnpm lintandpnpm checkChangesets
pnpm changesetand following the prompts. Changesets that add features should beminorand those that fix bugs should bepatch. Please prefix changeset messages withfeat:,fix:, orchore:.Edits