Virtual module names conflict (using Windi CSS)

[zakcutner]

Describe the bug
I've been trying to use WMR with Windi CSS. Windi CSS provides a Rollup plugin and from my understanding (I'm new to this project), WMR aims to provide compatibility with Rollup plugins. I tried to setup a minimal example of this using the steps below and when running wmr run build everything works great. Unfortunately, running wmr start causes an error (in the command line output, not the browser console) when opening the site in a browser.

404 /@windicss/windi.css - File not found

  at  (:-1:-1)

After a bit of digging, I think I've worked out why this is happening. The Windi CSS plugin uses the virtual import virtual:windi.css which it resolves to /@windicss/windi.css. However, the problem occurs when WMR then rewrites /@windicss/windi.css to windicss:./windi.css (here), causing the request to fail as this file does not exist.

I'm not sure whether this in fact a bug in the Windi CSS plugin (that it shouldn't be using /@windicss/...) or whether WMR's rewriting rule is too general so it is breaking this plugin? I'm happy to try to make a PR if someone can help guide me to the right solution :)

To Reproduce
Steps to reproduce the behavior:

1. Create a new WMR project with npm init wmr.
2. Install the Windi CSS plugin with npm install -D rollup-plugin-windicss.
3. Enable the Windi CSS plugin by updating wmr.config.mjs.

// wmr.config.mjs

 import { defineConfig } from "wmr";
+import WindiCSS from "rollup-plugin-windicss";

 export default defineConfig({
   alias: {
     react: "preact/compat",
     "react-dom": "preact/compat",
   },
+  plugins: [...WindiCSS.default()],
 });

4. Create a basic Windi CSS config file in windi.config.js.

// windi.config.js

import { defineConfig } from "windicss/helpers";

export default defineConfig({
  extract: {
    include: ["public/**/*.{html,js}"],
  },
});

5. Add the virtual Windi CSS style file to the imports.

// public/index.js

+import "virtual:windi.css";
 import { LocationProvider, Router, Route, lazy, ErrorBoundary, hydrate, prerender as ssr } from 'preact-iso';
 import Home from './pages/home/index.js';
 import NotFound from './pages/_404.js';

 [...]

Expected behavior

Running npm start and going to http://localhost:8080 displays the demo page as expected.

Bug occurs with:

• wmr or wmr start (development)
• wmr build (production)
• wmr serve

Desktop (please complete the following information):

• OS: MacOS 11.5.1
• Browser: Safari (although issue is in Node, not the browser)
• Node Version: 16.8.0
• WMR Version: 3.5.1 (also tested with main branch)