Vue build lib doubles css code

Describe the bug

I’m creating component library for using in non-vue application, simple component:

<template>
<h1>{{ message }}</h1>
</template>

<script lang="ts">
import {defineComponent, ref} from 'vue';

export default defineComponent({
    setup() {
        let message = ref('ok')
        return {
            message
        }
    }
})

</script>

<style>
h1 {
    color: red;
}
</style>

and vite.config.ts:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path');

export default defineConfig({
    build: {
        lib: {
            name: "Test",
            entry: path.resolve(__dirname, `src/views/Test/Test.vue`),
            formats: ['iife'],
            fileName: (format) => "[name].js",
        },
        rollupOptions: {
            external: ['vue'],
            output: { globals: { 'vue': 'Vue', } }
        }
    },
    plugins: [
        vue()
    ]
})

produces two files: Test.js and style.css, but in Test.js I have a copy of style.css content in variable which is never used:

var Test=function(e){"use strict";var p=(()=>`h1{color:red}`)(), .....

how can I prevent it ? I’ve tested every setting, every format (but I prefer iife), it is always inside JS. Maybe I can use it in component without load external css but how ?

Reproduction

https://github.com/dany28/vue3-library-test

System Info

System:
    OS: macOS 12.4
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
    Memory: 68.78 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.13.2 - /usr/local/bin/node
    npm: 8.5.2 - /usr/local/bin/npm
  Browsers:
    Chrome: 102.0.5005.115
    Safari: 15.5
  npmPackages:
    @vitejs/plugin-vue: ^2.3.3 => 2.3.3 
    vite: ^2.9.12 => 2.9.12

Used Package Manager

npm

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 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]

Thanks for digging it down.

Ok, in 2.9.9 it works with this code:

Yes this is affected by #8471 which included from v2.9.10.

About the actual bug: is it possible that the /* #__PURE__ */ comment is somehow ignored by esbuild? or that its stripped away before the minifier runs?

Yes. For esm builds, esbuild works well. But for iife and umd builds, it turns out to be ignored (https://github.com/evanw/esbuild/issues/639). Terser works because it handles this case too.

I have created a PR (https://github.com/evanw/esbuild/pull/2360) to esbuild to fix this, but I might revert #8471 for v2.

[sapphi-red]

Closing as it is fixed by #8874 (v2) and #8896 (v3).