Use of eval adds imported CSS to JS bundle in addition to separate CSS file in library mode

[rodrigoehlers]

Describe the bug

When using eval in any of the source files in library mode, the build output contains any imported CSS in the JS bundle in addition to the separate CSS bundle.

Reproduction

I've created a repository which shows the issue with very little changes to the default template generated by npm init @vitejs/app and choosing "vanilla", then "JavaScript". It adds a vite.config.js switching to library mode and adds eval("console.log('main.js')") to the main.js file.

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

  System:
    OS: macOS 11.3
    CPU: (8) x64 Intel(R) Core(TM) i7-1068NG7 CPU @ 2.30GHz
    Memory: 75.62 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.16.1 - ~/.nvm/versions/node/v14.16.1/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v14.16.1/bin/yarn
    npm: 7.11.1 - ~/.nvm/versions/node/v14.16.1/bin/npm
  Browsers:
    Edge: 90.0.818.49
    Safari: 14.1
  npmPackages:
    vite: ^2.2.3 => 2.2.3 

Used package manager: npm.

Logs

  vite:config bundled config file loaded in 19ms +0ms
  vite:config using resolved config: {
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge18', 'firefox60', 'chrome61', 'safari11' ],
  vite:config     polyfillDynamicImport: false,
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: false,
  vite:config     sourcemap: false,
  vite:config     rollupOptions: {},
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     minify: 'terser',
  vite:config     terserOptions: {},
  vite:config     cleanCssOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     manifest: false,
  vite:config     lib: {
  vite:config       name: 'Main',
  vite:config       entry: '/Users/user/dev/vite-eval-bundles-imported-css/main.js'
  vite:config     },
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     brotliSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null
  vite:config   },
  vite:config   configFile: '/Users/user/dev/vite-eval-bundles-imported-css/vite.config.js',
  vite:config   configFileDependencies: [ 'vite.config.js' ],
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     build: {}
  vite:config   },
  vite:config   root: '/Users/user/dev/vite-eval-bundles-imported-css',
  vite:config   base: '/',
  vite:config   resolve: { dedupe: undefined, alias: [ [Object] ] },
  vite:config   publicDir: '/Users/user/dev/vite-eval-bundles-imported-css/public',
  vite:config   cacheDir: '/Users/user/dev/vite-eval-bundles-imported-css/node_modules/.vite',
  vite:config   command: 'build',
  vite:config   mode: 'production',
  vite:config   isProduction: true,
  vite:config   plugins: [
  vite:config     'alias',
  vite:config     'vite:resolve',
  vite:config     'vite:html',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:build-html',
  vite:config     'commonjs',
  vite:config     'vite:data-uri',
  vite:config     'rollup-plugin-dynamic-import-variables',
  vite:config     'vite:import-analysis',
  vite:config     'vite:esbuild-transpile',
  vite:config     'vite:terser',
  vite:config     'vite:reporter'
  vite:config   ],
  vite:config   server: {},
  vite:config   env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen]
  vite:config   },
  vite:config   createResolver: [Function: createResolver]
  vite:config } +3ms
vite v2.2.3 building for production...
transforming (1) main.jsUse of eval is strongly discouraged, as it poses security risks and may cause issues with minification
✓ 2 modules transformed.
dist/style.css                              0.16kb / brotli: 0.10kb
dist/vite-eval-bundles-imported-css.es.js   0.40kb / brotli: 0.22kb
dist/vite-eval-bundles-imported-css.umd.js   0.49kb / brotli: 0.27kb

---

Before submitting the issue, please make sure you do the following

• 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.
• Provide a description in this issue that describes the bug.
• 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.

[sodatea]

May be related to rollup/rollup#3228

[bluwy]

This seems to be fixed in Vite 2.8.6. The output generation now looks like:

var style = "";
document.querySelector("#app").innerHTML = `
  <h1>Hello Vite!</h1>
  <a href="https://vitejs.dev/guide/features.html" target="_blank">Documentation</a>
`;
eval("console.log('main.js')");

Note the style doesn't contain the css inlined as a string. This might be an indirect fix the the issue, since I think soda's comment still holds true that it's a required behaviour from Rollup as highlighted in rollup/rollup#3228 (comment)

I'll close this as the output now should be fine, and it could be an upstream issue.