WMR resolves CSS import paths from external modules differently in dev & prod

[rschristian]

Describe the bug WMR handles CSS imports from node_modules differently based on the current environment. Take the following for example

node_modules/
--foo/
----package.json
----dist/
------index.css

The package.json file has an exports key that (partially) looks like the following:

"exports": {
  ...
  "./index.css": "./dist/index.css"

This should mean that the CSS file can be imported like import "foo/index.css";, and indeed this works when using wmr build. However, in dev, the exports field is not taken into account, so one must use import "foo/dist/index.css";.

Edit: Pushed a clone-able repository here: https://github.com/rschristian/wmr-css-import-paths . Comes with an example module that will display the bug. wmr start = not good, wmr build && wmr serve = works as expected.

Additional context Adding this to the list of CSS shenanigans I need to explore some time, writing this down so I remember to come back to it.

[marvinhagemeister]

I feel like converting the npm middleware into a standard plugin would make a lot of issues like this easier. In doing so it would automatically be included during the resolution phase.

[marvinhagemeister]

When #684 is merged this becomes possible to tackle. That PR get's rid of the transformation abstraction and all css files participate with the same resolution logic as other files. It's now interceptable and the next step is to rewrite the npm plugin to make use of that.