fix: ?inline warning for .css.js file (#11347)

Author: patak-dev

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))
 

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

playground/css/index.html

@@ -165,6 +165,9 @@ <h1>CSS</h1>
   <p>PostCSS source.input.from. Should include query</p>
   <pre class="postcss-source-input"></pre>
 
+  <p>Import from jsfile.css.js without the extension</p>
+  <pre class="jsfile-css-js"></pre>
+
   <p>Aliased</p>
   <p class="aliased">import '#alias': this should be blue</p>
   <pre class="aliased-content"></pre>

playground/css/jsfile.css.js

@@ -0,0 +1,2 @@
+const message = 'from jsfile.css.js'
+export default message

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'