kit
kit copied to clipboard
sveltejs
inlineStyleThreshold causes relative link to fonts/resources to be broken
Describe the bug
it works fine in dev mode, but with inlineStyleThreshold: 32 * 1024 and vite.build.assetsInlineLimit: 2 * 1024, the relative links to font files (e.g. .woff2) gets broken, as the css is now resides in html, and the font file in .svelte-kit/output/.. and i can't change the url to absolute url either, as I faced the issue with @fontsource/* fonts.
Reproduction
use any relative url in css, and make sure inlineStyleThreshold causes the css to be inlined
Logs
Error: Not found: /playfair-display-latin-variable-wghtOnly-normal-22b6cdc4.woff2
System Info
System:
OS: macOS 11.6.5
CPU: (4) x64 Intel(R) Core(TM) i5-4690 CPU @ 3.50GHz
Memory: 89.70 MB / 24.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 16.17.0 - ~/.asdf/installs/nodejs/16.17.0/bin/node
Yarn: 1.22.11 - /usr/local/bin/yarn
npm: 8.15.0 - ~/.asdf/plugins/nodejs/shims/npm
Browsers:
Chrome: 105.0.5195.102
Chrome Canary: 107.0.5292.0
Firefox Nightly: 106.0a1
Safari: 15.4
Severity
serious, but I can work around it
Additional Information
i had to disable inlineStyleThreshold, and call it a workaround
hi, just want to add that i'm still experiencing this in my own website.
if it helps at all, i've created a minimal reproduction here https://github.com/EmeraldSnorlax/inline-style-minimal-reproduction
this is not exclusive to fontsource packages. i'm using a private font package, and the url()s in css do not get properly transformed if the css is inlined. it otherwise works perfectly in dev mode, or if the @font-face rule doesn't get inlined in production.
a copy paste of the thread i opened in the discord, if you want additional context or another example
(from https://discord.com/channels/457912077277855764/1208579327575457802/1208579327575457802)
hi, i'm trying to inline some styles, and i'm wondering if i'm making a mistake, or i should open a bug on github
i've set inlineStyleThreshold here: https://github.com/EmeraldSnorlax/website/blob/71c2f0dc1539ee8afdbacd5930bf011bcc788238/svelte.config.js#L19
i'm importing the font + stylesheet from an external package by doing this: https://github.com/EmeraldSnorlax/website/blob/71c2f0dc1539ee8afdbacd5930bf011bcc788238/src/routes/p/mdsvex/MdsvexLayout.svelte#L2
the font gets loaded correctly when inlining is not done. however, when sveltekit tries to inline styles, it looks like the build output does not properly transform the paths for the inlined @font-face rules.
this is output in .svelte-kit/output/server/_app/immutable/assets/MdsvexLayout.BGZiVAWv.css, where the italic is not inlined because it isn't deemed critical, and the path is correct. the browser happily finds the font
@font-face{font-family:Editorial New;src:url(/_app/immutable/assets/PPEditorialNew-Italic.Cp3W8-2Y.woff2) format("woff2"); /*snip...*/
this gets output in .svelte-kit/output/server/stylesheets/2.js, where the regular tries to be inlined, but the path is wrong, and so when the page loads in browsers in production (no problem in dev mode, because no inlining is happening), the font is not found
downloadable font: download failed (font-family: "Editorial New" style:normal weight:400 stretch:100 src index:0): status=2147746065 source: http://localhost:4173/p/PPEditorialNew-Regular.Dr0yIrkc.woff2
@font-face{font-family:Editorial New;src:url(./PPEditorialNew-Regular.Dr0yIrkc.woff2) format(\"woff2\");
disabling inlining once again allows the browser to correctly request the font, but there's a noticeable fcp hit
Another workaround is to set kit.config.paths.relative to false.
https://kit.svelte.dev/docs/configuration
The issue is that the style inlining process is using the client bundle stylesheets (which have relative paths) instead of the server ones (non-relative paths). We can either use the server bundle stylesheets to inline or try to repair the relative URLs when inlining the client bundle ones (I think the former is safer?). https://github.com/sveltejs/kit/blob/4ae1cd152a60a22044ab3b8aa5572a2b79864583/packages/kit/src/exports/vite/index.js#L854
