Merge branch 'main' into 13967-silence-warning

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

@@ -600,7 +600,9 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
           js = `import "${modulePreloadPolyfillId}";\n${js}`
         }
 
-        return js
+        // Force rollup to keep this module from being shared between other entry points.
+        // If the resulting chunk is empty, it will be removed in generateBundle.
+        return { code: js, moduleSideEffects: 'no-treeshake' }
       }
     },
 

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

@@ -51,7 +51,14 @@ export function getAffectedGlobModules(
 ): ModuleNode[] {
   const modules: ModuleNode[] = []
   for (const [id, allGlobs] of server._importGlobMap!) {
-    if (allGlobs.some((glob) => isMatch(file, glob)))
+    // (glob1 || glob2) && !glob3 && !glob4...
+    if (
+      allGlobs.some(
+        ({ affirmed, negated }) =>
+          (!affirmed.length || affirmed.some((glob) => isMatch(file, glob))) &&
+          (!negated.length || negated.every((glob) => isMatch(file, glob))),
+      )
+    )
       modules.push(...(server.moduleGraph.getModulesByFile(id) || []))
   }
   modules.forEach((i) => {
@@ -83,7 +90,18 @@ export function importGlobPlugin(config: ResolvedConfig): Plugin {
       if (result) {
         if (server) {
           const allGlobs = result.matches.map((i) => i.globsResolved)
-          server._importGlobMap.set(id, allGlobs)
+          server._importGlobMap.set(
+            id,
+            allGlobs.map((globs) => {
+              const affirmed: string[] = []
+              const negated: string[] = []
+
+              for (const glob of globs) {
+                ;(glob[0] === '!' ? negated : affirmed).push(glob)
+              }
+              return { affirmed, negated }
+            }),
+          )
         }
         return transformStableResult(result.s, id, config)
       }

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

@@ -139,15 +139,11 @@ export function buildReporterPlugin(config: ResolvedConfig): Plugin {
               this.warn(
                 `\n(!) ${
                   module.id
-                } is dynamically imported by ${module.dynamicImporters
-                  .map((m) => m)
-                  .join(
-                    ', ',
-                  )} but also statically imported by ${module.importers
-                  .map((m) => m)
-                  .join(
-                    ', ',
-                  )}, dynamic import will not move module into another chunk.\n`,
+                } is dynamically imported by ${module.dynamicImporters.join(
+                  ', ',
+                )} but also statically imported by ${module.importers.join(
+                  ', ',
+                )}, dynamic import will not move module into another chunk.\n`,
               )
             }
           }

packages/vite/src/node/server/index.ts

@@ -285,7 +285,7 @@ export interface ViteDevServer {
   /**
    * @internal
    */
-  _importGlobMap: Map<string, string[][]>
+  _importGlobMap: Map<string, { affirmed: string[]; negated: string[] }[]>
   /**
    * Deps that are externalized
    * @internal

playground/css-codesplit/__tests__/css-codesplit.spec.ts

@@ -43,6 +43,14 @@ describe.runIf(isBuild)('build', () => {
     expect(findAssetFile(/async.*\.js$/)).toBe('')
   })
 
+  test('should remove empty chunk, HTML without JS', async () => {
+    const sharedCSSWithJSChunk = findAssetFile('shared-css-with-js.*.js$')
+    expect(sharedCSSWithJSChunk).toMatch(`/* empty css`)
+    // there are functions and modules in the src code that should be tree-shaken
+    expect(sharedCSSWithJSChunk).not.toMatch('function')
+    expect(sharedCSSWithJSChunk).not.toMatch(/import(?!".\/modulepreload)/)
+  })
+
   test('should generate correct manifest', async () => {
     const manifest = readManifest()
     expect(manifest['index.html'].css.length).toBe(2)

playground/css-codesplit/shared-css-empty-1.js

@@ -0,0 +1,4 @@
+function shouldBeTreeshaken_1() {
+  // This function should be treeshaken, even if { moduleSideEffects: 'no-treeshake' }
+  // was used in the JS corresponding to the HTML entrypoint.
+}

playground/css-codesplit/shared-css-empty-2.js

@@ -0,0 +1,4 @@
+export default function shouldBeTreeshaken_2() {
+  // This function should be treeshaken, even if { moduleSideEffects: 'no-treeshake' }
+  // was used in the JS corresponding to the HTML entrypoint.
+}

playground/css-codesplit/shared-css-main.js

@@ -0,0 +1,10 @@
+import shouldTreeshake from './shared-css-empty-2.js'
+document.querySelector('#app').innerHTML = `
+  <div>
+    <h1>Shared CSS, with JS</h1>
+  </div>
+`
+function shouldBeTreeshaken_0() {
+  // This function should be treeshaken, even if { moduleSideEffects: 'no-treeshake' }
+  // was used in the JS corresponding to the HTML entrypoint.
+}

playground/css-codesplit/shared-css-no-js.html

@@ -0,0 +1,4 @@
+<link rel="stylesheet" type="text/css" href="./shared-css-theme.css" />
+<body>
+  <h1>Share CSS, no JS</h1>
+</body>

playground/css-codesplit/shared-css-theme.css

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

playground/css-codesplit/shared-css-with-js.html

@@ -0,0 +1,6 @@
+<link rel="stylesheet" type="text/css" href="./shared-css-theme.css" />
+<script type="module" src="./shared-css-main.js"></script>
+<script type="module" src="./shared-css-empty-1.js"></script>
+<body>
+  <h1>Replaced by shared-css-main.js</h1>
+</body>

playground/css-codesplit/vite.config.js

@@ -9,6 +9,8 @@ export default defineConfig({
         main: resolve(__dirname, './index.html'),
         other: resolve(__dirname, './other.js'),
         style2: resolve(__dirname, './style2.js'),
+        'shared-css-with-js': resolve(__dirname, 'shared-css-with-js.html'),
+        'shared-css-no-js': resolve(__dirname, 'shared-css-no-js.html'),
       },
       output: {
         manualChunks(id) {

playground/glob-import/__tests__/glob-import.spec.ts

@@ -178,6 +178,18 @@ if (!isBuild) {
       expect(JSON.parse(actualRemove)).toStrictEqual(allResult)
     })
   })
+
+  test('no hmr for adding/removing files', async () => {
+    let request = page.waitForResponse(/dir\/index\.js$/, { timeout: 200 })
+    addFile('nohmr.js', '')
+    let response = await request.catch(() => ({ status: () => -1 }))
+    expect(response.status()).toBe(-1)
+
+    request = page.waitForResponse(/dir\/index\.js$/, { timeout: 200 })
+    removeFile('nohmr.js')
+    response = await request.catch(() => ({ status: () => -1 }))
+    expect(response.status()).toBe(-1)
+  })
 }
 
 test('tree-shake eager css', async () => {

playground/glob-import/dir/index.js

@@ -1,6 +1,10 @@
 const modules = import.meta.glob('./*.(js|ts)', { eager: true })
 const globWithAlias = import.meta.glob('@dir/al*.js', { eager: true })
 
+// test negative glob
+import.meta.glob(['@dir/*.js', '!@dir/x.js'])
+import.meta.glob(['!@dir/x.js', '@dir/*.js'])
+
 // test for sourcemap
 console.log('hello')