[BUG] - ES modules import "./some-lib.css" seems not to end up in the shadow-root

[carlos22]

Describe the bug

When using a library inside as child of your CE component that uses the ES modules import "./mylib.css" (in the <script> tag!) the css does not end up in the shadow dom but in the regular dom.

Reproduction

https://stackblitz.com/edit/vitejs-vite-nqrj24 (should work now)

System Info

No response

Used Package Manager

npm

Validations

• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Make sure this is a unplugin-vue-ce 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 instead.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[stackblitz[bot]]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-nqrj24 (Open reproduction)

[baiwusanyu-c]

I need more information to reproduce the problem

[baiwusanyu-c]

Are you referring to a third-party component library (such as vuetify)?

[carlos22]

Are you referring to a third-party component library (such as vuetify)?

For example. Anything that is imported with a import "style.css" in the head. This style will not end up in the shadow dom even if the import was done in a sub component. The example I provided seems to be the original one, sorry for that I had it working but might have lost the link somehow...

The important thing is NOT @import of CSS that works, but import of ES modules with css. E.g. with libs that use this one here: https://www.npmjs.com/package/vite-plugin-lib-inject-css

[carlos22]

[carlos22]

This should explain the bug better: https://stackblitz.com/edit/vitejs-vite-nqrj24

[carlos22]

Cool, thanks for the fast fix :)