Style tag added even when component is not rendered

[0biWanKenobi]

Describe the bug

Vite adds a style tag with css from a component that is not being rendered. What I mean is that there is a v-if directive evaluated to false for that component, and even so its style is added to the page.

Reproduction

Resulting source code:

you can see two style tags, one for each child component

Parent component:

<script setup lang="ts">
import { defineAsyncComponent, onMounted } from 'vue';

const LightTheme = defineAsyncComponent(() => import('./LightTheme.vue'));
const DarkTheme = defineAsyncComponent(() => import('./DarkTheme.vue'));

const isLight = ref(true);
const isDark = ref(false);

</script>

<template>
  <light-theme v-if="isLight">
    <router-view></router-view>
  </light-theme>
  <dark-theme v-else-if="isDark">
    <router-view></router-view>
  </dark-theme>
</template>

LightTheme:

<script setup lang="ts"></script>

<template>
  <slot></slot>
</template>

<style>
:root {
  --el-background-color-base: #c2c5ca;
}
</style>

DarkTheme:

<script setup lang="ts"></script>

<template>
  dark
  <slot></slot>
</template>

<style>
:root {
  --el-background-color-base: #22272e;
}
</style>

System Info

System:
    OS: Windows 10 10.0.19043
    CPU: (4) x64 AMD Ryzen 3 3200G with Radeon Vega Graphics
    Memory: 8.46 GB / 15.95 GB
  Binaries:
    Node: 16.13.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 7.20.5 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 96.0.4664.45
    Edge: Spartan (44.19041.1266.0), Chromium (96.0.1054.34)
    Internet Explorer: 11.0.19041.1202
  npmPackages:
    @vitejs/plugin-vue: ^1.9.3 => 1.9.4
    vite: ^2.6.4 => 2.6.14

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/vue-next 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.

[bluwy]

I think this is related to #4389, but perhaps it's something plugin-vue can fix within itself too.

[sapphi-red]

Closing as I wasn't able to reproduce.
https://stackblitz.com/edit/vitejs-vite-xuiqhf?file=src%2FApp.vue&terminal=dev

Note that styles won't be unloaded even if the component got unmounted.