Dynamic component import at server doesn't include CSS

[davidmeirlevy]

Prerequisites

• I have written a descriptive issue title
• I have searched existing issues to ensure the bug has not already been reported

Fastify version

3.25.3

Plugin version

"fastify-vite-vue": "^3.0.0-alpha.12"

Node.js version

14.7

Operating system

macOS

Operating system version (i.e. 20.04, 11.3, 10)

12.1 (21C52)

Description

I use a dynamic lazy load of components as part of the layout, like that:

return import(`../components/layouts/${componentName}.vue`).then(component => {
      components[componentName] = component.default;
    })

Those components are loaded in both SSR and frontend, but its CSS doesn't include in the SSR resource.

Steps to Reproduce

1. load component dynamically using the import() function.
2. use this component.
3. see that it renders.
4. add some CSS inside the component (border / color / background).
5. disable javascript in the browser.
6. see that it only loads the CSS after hydration when JS is enabled.

Expected Behavior

CSS should be included in the SSR bundle, with hydration.