diff --git a/packages/vite/src/node/__tests__/plugins/importGlob/fixture-c/a.css b/packages/vite/src/node/__tests__/plugins/importGlob/fixture-c/a.css new file mode 100644 index 00000000000000..5451a331f9cea4 --- /dev/null +++ b/packages/vite/src/node/__tests__/plugins/importGlob/fixture-c/a.css @@ -0,0 +1,3 @@ +.a { + color: red; +} diff --git a/packages/vite/src/node/__tests__/plugins/importGlob/fixture-c/b.css b/packages/vite/src/node/__tests__/plugins/importGlob/fixture-c/b.css new file mode 100644 index 00000000000000..b28d1ab0817412 --- /dev/null +++ b/packages/vite/src/node/__tests__/plugins/importGlob/fixture-c/b.css @@ -0,0 +1,3 @@ +.b { + color: red; +} diff --git a/packages/vite/src/node/__tests__/plugins/importGlob/fixture-c/c.module.css b/packages/vite/src/node/__tests__/plugins/importGlob/fixture-c/c.module.css new file mode 100644 index 00000000000000..b28d1ab0817412 --- /dev/null +++ b/packages/vite/src/node/__tests__/plugins/importGlob/fixture-c/c.module.css @@ -0,0 +1,3 @@ +.b { + color: red; +} diff --git a/packages/vite/src/node/__tests__/plugins/importGlob/fixture.test.ts b/packages/vite/src/node/__tests__/plugins/importGlob/fixture.test.ts index 580423b8bf53e1..e567081aa1d1b8 100644 --- a/packages/vite/src/node/__tests__/plugins/importGlob/fixture.test.ts +++ b/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' + ) + }) }) diff --git a/packages/vite/src/node/plugins/importAnalysis.ts b/packages/vite/src/node/plugins/importAnalysis.ts index 1d08cceb00f3fb..e5e0f37a6b9737 100644 --- a/packages/vite/src/node/plugins/importAnalysis.ts +++ b/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 ( diff --git a/packages/vite/src/node/plugins/importMetaGlob.ts b/packages/vite/src/node/plugins/importMetaGlob.ts index ef313e39f6c85e..230e93f11d7da5 100644 --- a/packages/vite/src/node/plugins/importMetaGlob.ts +++ b/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` +