diff --git a/packages/vite/src/node/plugins/importAnalysis.ts b/packages/vite/src/node/plugins/importAnalysis.ts index df6c8f591cf392..40f760f062a462 100644 --- a/packages/vite/src/node/plugins/importAnalysis.ts +++ b/packages/vite/src/node/plugins/importAnalysis.ts @@ -438,35 +438,6 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin { str().remove(end + 1, expEnd) } - if ( - !isDynamicImport && - specifier && - !specifier.includes('?') && // ignore custom queries - isCSSRequest(specifier) && - !isModuleCSSRequest(specifier) - ) { - const sourceExp = source.slice(expStart, start) - if ( - sourceExp.includes('from') && // check default and named imports - !sourceExp.includes('__vite_glob_') // glob handles deprecation message itself - ) { - const newImport = - sourceExp + specifier + `?inline` + source.slice(end, expEnd) - this.warn( - `\n` + - colors.cyan(importerModule.file) + - `\n` + - colors.reset(generateCodeFrame(source, start)) + - `\n` + - colors.yellow( - `Default and named imports from CSS files are deprecated. ` + - `Use the ?inline query instead. ` + - `For example: ${newImport}`, - ), - ) - } - } - // static import or valid string in dynamic import // If resolvable, let's resolve it if (specifier) { @@ -509,6 +480,35 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin { // normalize const [url, resolvedId] = await normalizeUrl(specifier, start) + if ( + !isDynamicImport && + specifier && + !specifier.includes('?') && // ignore custom queries + isCSSRequest(resolvedId) && + !isModuleCSSRequest(resolvedId) + ) { + const sourceExp = source.slice(expStart, start) + if ( + sourceExp.includes('from') && // check default and named imports + !sourceExp.includes('__vite_glob_') // glob handles deprecation message itself + ) { + const newImport = + sourceExp + specifier + `?inline` + source.slice(end, expEnd) + this.warn( + `\n` + + colors.cyan(importerModule.file) + + `\n` + + colors.reset(generateCodeFrame(source, start)) + + `\n` + + colors.yellow( + `Default and named imports from CSS files are deprecated. ` + + `Use the ?inline query instead. ` + + `For example: ${newImport}`, + ), + ) + } + } + // record as safe modules server?.moduleGraph.safeModulesPath.add(fsPathFromUrl(url)) diff --git a/playground/css/__tests__/css.spec.ts b/playground/css/__tests__/css.spec.ts index 3f058e24768c07..70fc0741f7fbf3 100644 --- a/playground/css/__tests__/css.spec.ts +++ b/playground/css/__tests__/css.spec.ts @@ -451,6 +451,14 @@ test('PostCSS source.input.from includes query', async () => { ) }) +test('js file ending with .css.js', async () => { + const message = await page.textContent('.jsfile-css-js') + expect(message).toMatch('from jsfile.css.js') + serverLogs.forEach((log) => { + expect(log).not.toMatch(/Use the \?inline query instead.+jsfile\.css/) + }) +}) + test('aliased css has content', async () => { expect(await getColor('.aliased')).toBe('blue') // skipped: currently not supported see #8936 diff --git a/playground/css/index.html b/playground/css/index.html index 486c927832bce8..f520d6514b0df7 100644 --- a/playground/css/index.html +++ b/playground/css/index.html @@ -165,6 +165,9 @@
PostCSS source.input.from. Should include query
+Import from jsfile.css.js without the extension
+ +Aliased
import '#alias': this should be blue
diff --git a/playground/css/jsfile.css.js b/playground/css/jsfile.css.js new file mode 100644 index 00000000000000..025674a66f3b16 --- /dev/null +++ b/playground/css/jsfile.css.js @@ -0,0 +1,2 @@ +const message = 'from jsfile.css.js' +export default message diff --git a/playground/css/main.js b/playground/css/main.js index e38ff356315879..d6cdee39eebc26 100644 --- a/playground/css/main.js +++ b/playground/css/main.js @@ -100,6 +100,10 @@ text('.imported-css-globEager', JSON.stringify(globEager, null, 2)) import postcssSourceInput from './postcss-source-input.css?query=foo' text('.postcss-source-input', postcssSourceInput) +// The file is jsfile.css.js, and we should be able to import it without extension +import jsFileMessage from './jsfile.css' +text('.jsfile-css-js', jsFileMessage) + import aliasContent from '#alias' text('.aliased-content', aliasContent) import aliasModule from '#alias-module'