unexpected ?import added to plugin IDs

⚠️ IMPORTANT ⚠️ Please check the following list before proceeding. If you ignore this issue template, your issue will be directly closed.

• Read the docs.
• Use Vite >=2.0. (1.x is no longer supported)

Describe the bug

I have a regex that looks for files ending in .svelte as suggested by the documentation here: https://vitejs.dev/guide/api-plugin.html#transforming-custom-file-types

That regex fails because ?import is added to the end of files. I believe that the ?import addition is a bug, but it’s possible the documentation needs to be updated instead

Reproduction

git clone [e-mail]:benmccann/vite-svelte.git
npm install
npm run build
node server

Then visit http://localhost:3000

This will print:

load called with unexpected id /home/bmccann/src/vite-svelte/src/App.svelte?import
transform called with unexpected id /home/bmccann/src/vite-svelte/src/App.svelte?import

I put debug statements in the plugin here: https://github.com/benmccann/vite-plugin-svelte/blob/be10f3b71f7e440dea8a8b644a15a12c97f0df7d/index.js#L105

You should be able to edit the code in node_modules/vite-plugin-svelte/index.js if you want to futz around further

System Info

• vite version: 2.0.0-beta.36
• Operating System: Ubuntu
• Node version: 14.8.0
• Package manager (npm/yarn/pnpm) and version: npm 6.14.11

[benmccann]

Amazing! Thank you!

Would it make any sense for this plugin to live in https://github.com/vitejs/vite/tree/main/packages after I clean it up?

Also, you had mentioned earlier that I might need to handle CSS differently than rollup-plugin-svelte does. Is there anything in particular I should be on the lookout for there?

[yyx990803]

Cool!

Re package placement: depends on the ownership - putting it inside vite’s repo would mean we are committed to maintaining it, which isn’t the case, so I think it makes more sense to maybe put it in the Svelte org?

Re CSS: during dev, what Vue is doing is generating an import to a virtual module like this:

import '/path/to/Component.vue?vue&type=style&lang=.css'

The plugin would then check for this request in load and return the previously compiled CSS. This leverages Vite’s internal CSS handling for everything, including HMR, PostCSS configs, pre-processors (with &lang=.scss) and CSS modules (with &lang=.module.css).

I think that’s kind of what the Svelte plugin is doing but from my previous simple try HMR was not working for CSS, maybe you can figure it out!