Module resolver: virtualize vendor.css

[BlueCutOfficial]

This PR replaces the assets/vendor.css file generated in the rewritten-app with an entrypoint returning a virtual CSS:

- <link integrity="" rel="stylesheet" href="/assets/vendor.css">
+ <link integrity="" rel="stylesheet" href="/@embroider/core/vendor.css">

The content that was previously written in assets/vendor.css is now generated by the virtual-vendor-styles's functions.

How to test

On the main branch, to get an /assets/vendor.css endpoint in the rewritten app, the vite-app needs to include at least one V1 addon that exposes CSS. On the present virtual-vendor-style branch, the entry point is always there, but the content will be empty if no V1 addon exposes CSS.

The POC branch BlueCutOfficial:poc-virtual-vendor-style eases testing: it installs two classic addons providing CSS styles. You can also install them this way:

pnpm add --save-dev ember-tag-input ember-simple-tree

Once the vite-app has these dependencies, you can test what happens when there is a vendor.css.

• On the poc-virtual-vendor-style branch:
  • Start the vite-app
  • Visit http://127.0.0.1:4200
    • 👀 You should see the correctly styled components coming from ember-tag-input and ember-simple-tree
    • 👀 In the network tab, vendor.css should be returned as a CSS file containing the addons styles
  • Build the vite-app
    • 👀 In dist/assets, there should be a fingerprinted main-*.css containing the addons styles
    • 👀 The stylesheet pointing to this file should be present in dist/index.html

[mansona]

With a bit of experimentation on a vanilla Vite app @BlueCutOfficial discovered that we can probably get away with properly virtualising a raw css file making use of ?direct when internally redirected.

We've been struggling to make sure that the content-type is correct in an embroider test, there are a few things to try out but we could also try a "post middleware" to edit the content type of css responses. https://vitejs.dev/guide/api-plugin.html#configureserver

if adding a post middleware to edit the content type doesn't work then we could just implement a normal middleware to handle the virtual css response correctly. Then for build mode we would just use the emit file as we wanted to but couldn't because it doesn't work in dev mode.

[BlueCutOfficial]

The compat-app-builder used to compute a boolean implicitStyles and add the stylesheet only if true. With this PR, we simplify this and add the stylesheet without condition.

[mansona]

LGTM 🎉 💪