Importing a node module with a CSS entry point no longer works

[intrnl]

Describe the bug

Importing a package like modern-normalize now no longer works without suffixing ?import manually

Suffixing ?import treats the module as external in production builds.

System Info

• vite version: 0.14.3
• Operating System: Arch Linux
• Node version: 14.2.0

[fluxin]

Using a relative import pointing to node_modules does work correctly.

[intrnl]

it seems counterintuitive having to do that though 🙂

[fluxin]

Agreed, same thing for importing css through @import in the style section, just started looking through the code for the resolver to see what changed.

[yyx990803]

Originally we treated direct imports to .css as a request to js code that inserts the css, and .css?raw returns the actual css. However this requires us to be able to differentiate between .css requests that are from JS vs. ones made by <link rel="...">. Previously we checked the request's referer header to do that, which works in Chrome and FF, but breaks in Safari because Safari uses the page url instead of the script url as the referer for native ES module imports...

So the new approach rewrites js imports to css to .css?import, but it now misses resolved bare modules and @import inside css.

There are definitely ways to fix it, just explaining the change here.

[intrnl]

understandable, though a little disappointed that safari is doing something different than the two major browsers 😃

[intrnl]

Looks like this is broken again, running 0.19.3, tested it as far back as 0.18.0

[lovetingyuan]

import normalize.css is also broken(https://github.com/necolas/normalize.css/), error msg: The server responded with a non-JavaScript MIME type of "text/css".
Both import normalize.css?raw and import normalize.css?import work well.

[yyx990803]

Fixed in 6e06fcf - added a test for it to avoid regressions...