fix(importGlob): warn on default import css (#11103)

Author: bluwy

packages/vite/src/node/__tests__/plugins/importGlob/fixture-c/a.css

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

packages/vite/src/node/__tests__/plugins/importGlob/fixture-c/b.css

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

packages/vite/src/node/__tests__/plugins/importGlob/fixture-c/c.module.css

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

packages/vite/src/node/__tests__/plugins/importGlob/fixture.test.ts

@@ -4,6 +4,7 @@ import { fileURLToPath } from 'node:url'
 import { describe, expect, it } from 'vitest'
 import { transformGlobImport } from '../../../plugins/importMetaGlob'
 import { transformWithEsbuild } from '../../../plugins/esbuild'
+import type { Logger } from '../../../logger'
 import { createLogger } from '../../../logger'
 
 const __dirname = resolve(fileURLToPath(import.meta.url), '..')
@@ -72,4 +73,43 @@ describe('fixture', async () => {
       )?.s.toString()
     ).toMatchSnapshot()
   })
+
+  it('warn when glob css without ?inline', async () => {
+    const logs: string[] = []
+    const logger = {
+      warn(msg: string) {
+        logs.push(msg)
+      }
+    } as Logger
+
+    await transformGlobImport(
+      "import.meta.glob('./fixture-c/*.css', { query: '?inline' })",
+      fileURLToPath(import.meta.url),
+      root,
+      resolveId,
+      logger
+    )
+    expect(logs).toHaveLength(0)
+
+    await transformGlobImport(
+      "import.meta.glob('./fixture-c/*.module.css')",
+      fileURLToPath(import.meta.url),
+      root,
+      resolveId,
+      logger
+    )
+    expect(logs).toHaveLength(0)
+
+    await transformGlobImport(
+      "import.meta.glob('./fixture-c/*.css')",
+      fileURLToPath(import.meta.url),
+      root,
+      resolveId,
+      logger
+    )
+    expect(logs).toHaveLength(1)
+    expect(logs[0]).to.include(
+      'Globbing CSS files without the ?inline query is deprecated'
+    )
+  })
 })

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

@@ -439,9 +439,9 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
         if (
           !isDynamicImport &&
           specifier &&
+          !specifier.includes('?') && // ignore custom queries
           isCSSRequest(specifier) &&
-          !isModuleCSSRequest(specifier) &&
-          !specifier.includes('?') // ignore custom queries
+          !isModuleCSSRequest(specifier)
         ) {
           const sourceExp = source.slice(expStart, start)
           if (

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

@@ -30,7 +30,7 @@ import {
   transformStableResult
 } from '../utils'
 import type { Logger } from '../logger'
-import { isCSSRequest } from './css'
+import { isCSSRequest, isModuleCSSRequest } from './css'
 
 const { isMatch, scan } = micromatch
 
@@ -380,8 +380,10 @@ export async function transformGlobImport(
           if (query && !query.startsWith('?')) query = `?${query}`
 
           if (
-            !query.match(/(?:\?|&)inline\b/) &&
-            files.some((file) => isCSSRequest(file))
+            !query && // ignore custom queries
+            files.some(
+              (file) => isCSSRequest(file) && !isModuleCSSRequest(file)
+            )
           ) {
             logger.warn(
               `\n` +