Building with esbuild minifier produces the same css twice

[sheremet-va]

⚠️ IMPORTANT ⚠️ Please check the following list before proceeding. If you ignore this issue template, your issue will be directly closed.

• Read the docs.
• Use Vite >=2.0. (1.x is no longer supported)
• If the issue is related to 1.x -> 2.0 upgrade, read the Migration Guide first.

Describe the bug

When building with minify: 'esbuild', production code has the same CSS twice. One in a js chunk, and the second one in css chunk.

Reproduction

1. create project with vue-ts template npm init @vitejs/app esbuild-bug --template vue-ts
2. update vite.config.ts as follows:

export default defineConfig({
  plugins: [vue()],
  build: {
    minify: 'esbuild'
  }
})

3. run npm run build
4. open /dist/assets/index.[hash].js
5. you will see non-minified CSS
6. open index.[hash].css
7. you will see the same css, but minified

System Info

• vite version: 2.0.1
• Operating System: MacOS Big Sur 11.2.1
• Node version: 14.4
• Package manager (npm/yarn/pnpm) and version: 6.14.4

[edison1105]

maybe it's not a bug.
just an unused variable in production mode.

[sheremet-va]

@edison1105 I think producing giant unused variable is a bug. It even contains comments if there are some.

As far as I know, Vite uses it's own plugin for esbuild to parse .vue files, so I guess it's Vite problem?

[edison1105]

so I guess it's Vite problem?

I agree, the unused variable should remove.

[yyx990803]

Related: #2148

We may remove the default export for CSS imports unless an explicit query is used.

[Dreamacro]

This is also reproduced in the use of react

import './style.css'

export function Component() {
    return <div>foo</div>
}

and bundle contains additional unnecessary css strings

[Dreamacro]

seems it's already fixed on #3570

[Dreamacro]

it happened again after 91eb2a6 🌚

[sheremet-va]

Is it fixed? Can we close the issue?

[Dreamacro]

@sheremet-va it's still no fixed on the latest vite (v2.4.4)

I use a workaround plugin to make minify: 'esbuild' work correctly

{
    plugins: [
        // other plugin
        {
            name: 'remove-css-in-js',
            enforce: 'post',
            transform (_, id) {
                if (id.endsWith('.scss') || id.endsWith('.css')) {
                    return ''
                }
            },
        },
    ],
    build: {
        minify: 'esbuild',
    },
}

[Dreamacro]

seems it's already fixed on 2.6.0-beta.0 (3e3c203)

[patak-dev]

Thanks for the heads up @Dreamacro!