Vue build lib doubles css code

[dany28]

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.

[dany28]

I've tested with simple build configuration for application build. CSS as still in JS code even if its very big !!!

After hours of searching bug, I've found code created CSS:
plugin: vite:css-post in file vite/packages/vite/src/node/plugins/css.ts starting line 416:

      let code: string
      if (modulesCode) {
        code = modulesCode
      } else {
        let content = css
        if (config.build.minify) {
          content = await minifyCSS(content, config)
        }
        // marking as pure to make it tree-shakable by minifier
        // but the module itself is still treated as a non tree-shakable module
        // because moduleSideEffects is 'no-treeshake'
        code = `export default /* #__PURE__ */ (() => ${JSON.stringify(
          content
        )})()`
      }

after change to

      let code: string
      if (modulesCode) {
        code = modulesCode
      } else {
        if (inlined) {
          let content = css
          if (config.build.minify) {
            content = await minifyCSS(content, config)
          }
          // marking as pure to make it tree-shakable by minifier
          // but the module itself is still treated as a non tree-shakable module
          // because moduleSideEffects is 'no-treeshake'
          code = `export default /* #__PURE__ */ (() => ${JSON.stringify(
            content
          )})()`
        } else {
          code = '';
        }

      }

still creates chunks to external css without creating unnecessary variable in result js code. And, of course makes script little bit faster because skipping minify and stringily of css content

[dany28]

Ok, in 2.9.9 it works with this code:

            if (usedRE.test(id)) {
                if (modulesCode) {
                    code = modulesCode;
                }
                else {
                    let content = css;
                    if (config.build.minify) {
                        content = await minifyCSS(content, config);
                    }
                    code = `export default ${JSON.stringify(content)}`;
                }
            }
            else {
                code = `export default ''`;
            }

but export default '' creates variable, just empty string does nothing in code

[sawmurai]

const stripCssFromJsPlugin = () => {
  return {
    name: 'no-css',

    async transform(_code, id) {
      if (/\.sc?ss$/.test(id)) {
        return 'export default ""';
      }
    }
  }
};

This rollup (not vite) plugin can maybe be used as a workaround, to remove the generated modules that only contain css, until the issue is fixed. This completely ignores tree-shaking, so it might break your code. Please test carefully :)

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?

Edit:
Using build.minify = "terser" fixes the issue as well: No css ending up in the js file

[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 (evanw/esbuild#639). Terser works because it handles this case too.

I have created a PR (evanw/esbuild#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).