test(css): improve test around deprecated default/named import (#11369)

playground/css/__tests__/css.spec.ts

@@ -1,11 +1,12 @@
 import { readFileSync } from 'node:fs'
-import { expect, test } from 'vitest'
+import { describe, expect, test } from 'vitest'
 import {
   editFile,
   findAssetFile,
   getBg,
   getColor,
   isBuild,
+  isServe,
   page,
   removeFile,
   serverLogs,
@@ -451,11 +452,20 @@ 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/)
+describe.runIf(isServe)('deprecate default/named imports from CSS', () => {
+  test('css file', () => {
+    const actual = serverLogs.some((log) =>
+      /Use the \?inline query instead.+imported\.css/.test(log),
+    )
+    expect(actual).toBe(true)
+  })
+
+  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/)
+    })
   })
 })
 

playground/css/main.js

@@ -1,12 +1,14 @@
 import './minify.css'
+// eslint-disable-next-line import/no-duplicates
 import './imported.css'
 import './sugarss.sss'
 import './sass.scss'
 import './less.less'
 import './stylus.styl'
 
-import css from './imported-inline.css?inline'
-text('.imported-css', css)
+// eslint-disable-next-line import/no-duplicates
+import css from './imported.css'
+text('.imported-css', css) // deprecated, but leave this as-is to make sure it works
 
 import rawCss from './raw-imported.css?raw'
 text('.raw-imported-css', rawCss)
@@ -104,7 +106,8 @@ text('.postcss-source-input', postcssSourceInput)
 import jsFileMessage from './jsfile.css'
 text('.jsfile-css-js', jsFileMessage)
 
-import aliasContent from '#alias'
+import '#alias'
+import aliasContent from '#alias?inline'
 text('.aliased-content', aliasContent)
 import aliasModule from '#alias-module'
 document

playground/css/vite.config.js

@@ -22,6 +22,7 @@ module.exports = {
       '=': __dirname,
       spacefolder: __dirname + '/folder with space',
       '#alias': __dirname + '/aliased/foo.css',
+      '#alias?inline': __dirname + '/aliased/foo.css?inline',
       '#alias-module': __dirname + '/aliased/bar.module.css',
     },
   },