CSS assets not loaded when implementing renderDynamicImport in plugin

[ropez]

Describe the bug

In our project, we need to dynamically configure assets URLs in runtime (we're currently using __webpack_public_path__, but trying to switch to vite).

I read the discussion in #3522 , and implemented a solution by implementing renderDynamicImport in a plugin. A minimal reproduction of this is provided in the linked repo (snippet here):

  plugins: [
    vue(),

    {
      name: 'dynamic-import-plugin',
      renderDynamicImport: () => ({
        left: 'import(PREFIX + ',
        right: ')',
      }),
    },
  ],

This works fine for loading assets dynamically. The problem however, is that as soon as we implement this hook, only Javascript assets are loaded. CSS files with <style> content from asynchronous are not loaded. All code to load CSS files seem to disappear from the build output, when this hook is added. I expected both JS and CSS assets to be emitted, and rendered by my custom render hook.

Note: If I change the implementation to return null, or even the default { left: 'import(', right: ')' }, the CSS files are loaded.

Note: About the provided repo for reproduction: It contains a dynamically loaded page with some CSS that changes the background color of the content to red. This CSS is loaded in 'dev' mode, but not when running 'build' and 'preview'. The PREFIX variable is currently empty, so everything should work as if the hook didn't exist.

Reproduction

https://github.com/ropez/vite-project

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (16) x64 Intel(R) Core(TM) i9-10885H CPU @ 2.40GHz
    Memory: 11.48 GB / 31.61 GB
  Binaries:
    Node: 16.15.1 - ~\scoop\apps\nodejs-lts\current\node.EXE
    Yarn: 1.22.5 - ~\scoop\apps\yarn\current\Yarn\bin\yarn.CMD
    npm: 8.11.0 - ~\scoop\apps\nodejs-lts\current\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (102.0.1245.39)
    Internet Explorer: 11.0.22000.120
  npmPackages:
    @vitejs/plugin-vue: ^2.3.3 => 2.3.3
    vite: ^2.9.9 => 2.9.11

Used Package Manager

yarn

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sapphi-red]

renderDynamicImport conflicts with the internal CSS chunking mechanism and I think there isn't a good way to solve this conflict.

Closing as I think the reason why this issue was created is to achieve #3522 and it is already implemented and released as experimental.renderBuiltUrl.
If there's any missing pieces, feel free to create a new issue.