New error for vite-plugin-fonts starting with SvelteKit 1.11.0

[brev]

Describe the bug

With @sveltejs/kit@1.11.0 and above, npm run dev is throwing a new Internal Server Error regarding vite-plugin-fonts:

Internal server error: 
  Failed to load url /@vite-plugin-fonts/fonts.css?inline= 
    (resolved id: /@vite-plugin-fonts/fonts.css?inline=). 
  Does the file exist?
    at loadAndTransform 
      (file:///Users/brev/src/@brev/issue-sveltekit-vite-font-error/node_modules/.pnpm/vite@4.2.0/node_modules/vite/dist/node/chunks/dep-c167897e.js:41081:21)

The error disappears when downgrading to @sveltejs/kit@1.10.0.

vite-plugin-fonts by @stafyniaksacha has been working perfectly until now, stable without changes for several months. I'm using the local/custom font mode, which uses the virtual filesystem (import 'virtual:fonts.css').

As a possible culprit, #9323 was part of 1.11.0 and mentions ?inline (which is seen in my error message).

Reproduction

https://github.com/brev/issue-sveltekit-vite-font-error

This is a create-svelte skeleton, with the following changes:

• Added module vite-plugin-fonts
• Modified vite.config.ts to call the fonts plugin.
• Added src/lib/assets/ dir.
• Added src/routes/+layout.svelte

Logs

Internal server error: Failed to load url /@vite-plugin-fonts/fonts.css?inline= (resolved id: /@vite-plugin-fonts/fonts.css?inline=). Does the file exist?
      at loadAndTransform (file:///Users/brev/src/@brev/issue-sveltekit-vite-font-error/node_modules/.pnpm/vite@4.2.0/node_modules/vite/dist/node/chunks/dep-c167897e.js:41081:21) (x2)

System Info

System:
    OS: macOS 13.2.1
    CPU: (4) x64 Intel(R) Core(TM) m3-7Y32 CPU @ 1.10GHz
    Memory: 517.92 MB / 8.00 GB
    Shell: 5.9 - /usr/local/bin/zsh
  Binaries:
    Node: 18.6.0 - ~/.nvm/versions/node/v18.6.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.6.0/bin/yarn
    npm: 9.2.0 - ~/.nvm/versions/node/v18.6.0/bin/npm
  Browsers:
    Chrome: 111.0.5563.64
    Firefox: 111.0
    Safari: 16.3
  npmPackages:
    @sveltejs/adapter-auto: ^2.0.0 => 2.0.0
    @sveltejs/kit: ^1.12.0 => 1.12.0
    svelte: ^3.54.0 => 3.57.0
    vite: ^4.0.0 => 4.2.0

Severity

blocking an upgrade

Additional Information

No response

[Rich-Harris]

Ah, interesting. This possibility came up in #9323 but we decided to apply ?inline everywhere because importing CSS directly is deprecated: https://github.com/sveltejs/kit/pull/9323/files#r1126768876

@bluwy what approach would you recommend here?

[bluwy]

SvelteKit needs to inject the ?inline to get the CSS as a string. It looks like vite-plugin-fonts is loading the font css as a virtual module, but also lending Vite's CSS transformer to be handled in Vite's pipeline. So it's in a limbo of being a Vite CSS file that doesn't support Vite features like ?inline and ?raw etc.

I'd say if it wants to participate in Vite's pipeline, it should probably support those special queries, so it's probably not a breaking change in SK (?). If we do want to find a middle ground for now, maybe we can try to re-load without the ?inline query if it fails the first time, and warn about it instead.

[stafyniaksacha]

Hello!

I'm about to update the plugin using unplugin, so it will work on different environments!

I've created a playground with sveltekit here: https://github.com/stafyniaksacha/vite-plugin-fonts/tree/unplugin/examples/sveltekit

@brev could you give a try inside the repo if your issue is still present?

[stafyniaksacha]

I just released https://www.npmjs.com/package/unplugin-fonts

You can now do import src from 'unfonts.css?raw'

Feel free to open an issue on https://github.com/cssninjaStudio/unplugin-fonts/ and close this one !

[bluwy]

Awesome @stafyniaksacha! Thanks for the update on your end. I'll close this for now then. If there's indeed an issue in SvelteKit we could re-open this again as well.

[brev]

Thanks @stafyniaksacha (and everyone else), unplugin-fonts is working great!