Component styles are added to <head> even when it is not used #14082
Description
Vue version
3.5.24
Link to minimal reproduction
Steps to reproduce
There is a .vue file, which exports a factory function for a component. When the function is imported in another SFC file and used to define a new instance of the component, the styles from the SFC file where the factory is defined get injected into <head> too.
<!-- app.vue -->
<template>
<SomeComponent />
</template><!-- SomeComponent.vue -->
<script>
import { defineSomeComponent } from './FactoryComponent.vue';
export default defineSomeComponent();
</script>
<style>
.component-class {
background-color: red;
}
</style><!-- FactoryComponent.vue -->
<script>
import { defineComponent, h } from 'vue';
export function defineSomeComponent() {
return defineComponent(() => {
return () => h('div', { class: 'component-class' }, 'SomeComponent');
});
}
export default defineSomeComponent();
</script>
<style>
// this is not used, should not be injected into the <head>
.component-class {
background-color: blue;
}
</style>What is expected?
The styles from FactoryComponent.vue should not be injected into the <head>.
What is actually happening?
System Info
Any additional comments?
I'm not sure if this is a Vue problem or something upstream in Vite or at the bundler level.