fix(css): hoist external @import for non-split css

packages/playground/lib/__tests__/lib.spec.ts

@@ -35,6 +35,13 @@ if (isBuild) {
  )
  expect(code).not.toMatch('__vitePreload')
  })
+
+ test('@import hoist', async () => {
+ serverLogs.forEach((log) => {
+ // no warning from esbuild css minifier
+ expect(log).not.toMatch('All "@import" rules must come first')
+ })
+ })
 } else {
  test('dev', async () => {
  expect(await page.textContent('.demo')).toBe('It works')

packages/playground/lib/__tests__/serve.js

@@ -9,13 +9,17 @@ const { ports } = require('../../testUtils')
 
 const port = (exports.port = ports.lib)
 
+global.serverLogs = []
+
 /**
  * @param {string} root
  * @param {boolean} isBuildTest
  */
 exports.serve = async function serve(root, isBuildTest) {
  // build first
 
+ setupConsoleWarnCollector()
+
  if (!isBuildTest) {
  const { createServer } = require('vite')
  process.env.VITE_INLINE = 'inline-serve'
@@ -55,7 +59,7 @@ exports.serve = async function serve(root, isBuildTest) {
 
  await build({
  root,
- logLevel: 'silent',
+ logLevel: 'warn', // output esbuild warns
  configFile: path.resolve(__dirname, '../vite.dyimport.config.js')
  })
 
@@ -89,3 +93,11 @@ exports.serve = async function serve(root, isBuildTest) {
  })
  }
 }
+
+function setupConsoleWarnCollector() {
+ const warn = console.warn
+ console.warn = (...args) => {
+ global.serverLogs.push(args.join(' '))
+ return warn.call(console, ...args)
+ }
+}

packages/playground/lib/src/dynamic.css

@@ -0,0 +1,4 @@
+@import 'https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css';
+.dynamic {
+ color: red;
+}

packages/playground/lib/src/index.css

@@ -0,0 +1,3 @@
+.index {
+ color: blue;
+}

packages/playground/lib/src/main2.js

@@ -1,4 +1,9 @@
+import './index.css'
+
 export default async function message(sel) {
  const message = await import('./message.js')
+
+ await import('./dynamic.css')
+
  document.querySelector(sel).textContent = message.default
 }

packages/playground/lib/vite.dyimport.config.js

@@ -6,7 +6,6 @@ const path = require('path')
  */
 module.exports = {
  build: {
- minify: false,
  lib: {
  entry: path.resolve(__dirname, 'src/main2.js'),
  formats: ['es'],

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

@@ -443,13 +443,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
  }
  })
  // only external @imports and @charset should exist at this point
- // hoist them to the top of the CSS chunk per spec (#1845 and #6333)
- if (css.includes('@import') || css.includes('@charset')) {
- css = await hoistAtRules(css)
- }
- if (minify && config.build.minify) {
- css = await minifyCSS(css, config)
- }
+ css = await finalizeCss(css, minify, config)
  return css
  }
 
@@ -559,10 +553,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
  let extractedCss = outputToExtractedCSSMap.get(opts)
  if (extractedCss && !hasEmitted) {
  hasEmitted = true
- // minify css
- if (config.build.minify) {
- extractedCss = await minifyCSS(extractedCss, config)
- }
+ extractedCss = await finalizeCss(extractedCss, true, config)
  this.emitFile({
  name: 'style.css',
  type: 'asset',
@@ -922,6 +913,21 @@ function combineSourcemapsIfExists(
  : map1
 }
 
+async function finalizeCss(
+ css: string,
+ minify: boolean,
+ config: ResolvedConfig
+) {
+ // hoist external @imports and @charset to the top of the CSS chunk per spec (#1845 and #6333)
+ if (css.includes('@import') || css.includes('@charset')) {
+ css = await hoistAtRules(css)
+ }
+ if (minify && config.build.minify) {
+ css = await minifyCSS(css, config)
+ }
+ return css
+}
+
 interface PostCSSConfigResult {
  options: PostCSS.ProcessOptions
  plugins: PostCSS.Plugin[]