fix(legacy): fix conflict with the modern build on css emitting (#6584)

Fixes #3296
Supersedes #3317

The asset emitting conflict may also exist for other types of assets,
but let's fix the CSS one first.

The conflict here is due to the `hasEmitted` flag that was originally
intended to avoid duplicated CSS for multiple output formats
6bce108#diff-2cfbd4f4d8c32727cd8e1a561cffbde0b384a3ce0789340440e144f9d64c10f6R262-R263

When the legacy plugin is used, the flag was set to `true` for the
emitted CSS of the legacy bundle.
But the legacy plugin would remove all its emitted assets later to avoid
duplication.
So this logic results in no CSS to be actually emitted.

In this PR, I used a `__vite_skip_asset_emit__` flag to prevent the
CSS `generateBundle` from executing for the legacy build.
If other asset emitting plugins encounter similar issues, this flag
can be reused.

Author: haoqunjiang

packages/playground/legacy/__tests__/legacy.spec.ts

@@ -1,8 +1,10 @@
 import {
+  listAssets,
   findAssetFile,
   isBuild,
   readManifest,
-  untilUpdated
+  untilUpdated,
+  getColor
 } from '../../testUtils'
 
 test('should work', async () => {
@@ -50,6 +52,10 @@ test('generates assets', async () => {
   )
 })
 
+test('correctly emits styles', async () => {
+  expect(await getColor('#app')).toBe('red')
+})
+
 if (isBuild) {
   test('should generate correct manifest', async () => {
     const manifest = readManifest()
@@ -73,4 +79,8 @@ if (isBuild) {
     expect(findAssetFile(/index\./)).not.toMatch(terserPatt)
     expect(findAssetFile(/polyfills-legacy/)).toMatch(terserPatt)
   })
+
+  test('should emit css file', async () => {
+    expect(listAssets().some((filename) => filename.endsWith('.css')))
+  })
 }

packages/playground/legacy/main.js

@@ -1,3 +1,5 @@
+import './style.css'
+
 async function run() {
   const { fn } = await import('./async.js')
   fn()

packages/playground/legacy/style.css

@@ -0,0 +1,3 @@
+#app {
+  color: red;
+}

packages/playground/legacy/vite.config.js

@@ -10,6 +10,7 @@ module.exports = {
   ],
 
   build: {
+    cssCodeSplit: false,
     manifest: true,
     rollupOptions: {
       output: {

packages/plugin-legacy/index.js

@@ -286,6 +286,14 @@ function viteLegacyPlugin(options = {}) {
       // entirely.
       opts.__vite_force_terser__ = true
 
+      // @ts-ignore
+      // In the `generateBundle` hook,
+      // we'll delete the assets from the legacy bundle to avoid emitting duplicate assets.
+      // But that's still a waste of computing resource.
+      // So we add this flag to avoid emitting the asset in the first place whenever possible.
+      opts.__vite_skip_asset_emit__ = true
+
+      // @ts-ignore avoid emitting assets for legacy bundle
       const needPolyfills =
         options.polyfills !== false && !Array.isArray(options.polyfills)
 

packages/vite/src/node/plugins/css.ts

@@ -468,6 +468,11 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
     },
 
     async generateBundle(opts, bundle) {
+      // @ts-ignore asset emits are skipped in legacy bundle
+      if (opts.__vite_skip_asset_emit__) {
+        return
+      }
+
       // remove empty css chunks and their imports
       if (pureCssChunks.size) {
         const emptyChunkFiles = [...pureCssChunks]