fix: css insert order

packages/vite/src/client/client.ts

@@ -324,8 +324,34 @@ const sheetsMap = new Map<
   HTMLStyleElement | CSSStyleSheet | undefined
 >()
 
-export function updateStyle(id: string, content: string): void {
+interface CSSAnchor {
+  start: HTMLStyleElement
+  end: HTMLStyleElement
+  weight: number
+}
+
+const anchorMap = new Map<string, CSSAnchor>()
+
+function binarySearchCSSInjectPosition(weight: number): HTMLElement | null {
+  const list = Array.from(anchorMap.values()).sort(
+    (a, b) => a.weight - b.weight
+  )
+  for (const anchor of list) {
+    if (weight < anchor.weight) {
+      return anchor.end
+    }
+  }
+  return null
+}
+
+export function updateStyle(
+  id: string,
+  content: string,
+  moduleEntry: string,
+  entryWeight: number
+): void {
   let style = sheetsMap.get(id)
+  // TODO inject the truth oreder for stylesheet
   if (supportsConstructedSheet && !content.includes('@import')) {
     if (style && !(style instanceof CSSStyleSheet)) {
       removeStyle(id)
@@ -352,7 +378,29 @@ export function updateStyle(id: string, content: string): void {
       style = document.createElement('style')
       style.setAttribute('type', 'text/css')
       style.innerHTML = content
-      document.head.appendChild(style)
+      // for debugging
+      style.setAttribute('w', entryWeight.toString())
+      if (moduleEntry === 'main') {
+        document.head.appendChild(style)
+      } else {
+        const anchor = anchorMap.get(moduleEntry)
+        if (anchor) {
+          document.head.insertBefore(style, anchor.end.nextSibling)
+          anchor.end = style
+        } else {
+          const node = binarySearchCSSInjectPosition(entryWeight)
+          anchorMap.set(moduleEntry, {
+            start: style,
+            end: style,
+            weight: entryWeight
+          })
+          if (node) {
+            document.head.insertBefore(style, node)
+          } else {
+            document.head.appendChild(style)
+          }
+        }
+      }
     } else {
       style.innerHTML = content
     }

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

@@ -266,6 +266,7 @@ export function cssPlugin(config: ResolvedConfig): Plugin {
             moduleGraph.updateModuleInfo(
               thisModule,
               depModules,
+              depModules,
               null,
               // The root CSS proxy module is self-accepting and should not
               // have an explicit accept list
@@ -298,6 +299,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
   // styles initialization in buildStart causes a styling loss in watch
   const styles: Map<string, string> = new Map<string, string>()
   let pureCssChunks: Set<string>
+  let serve: ViteDevServer
 
   // when there are multiple rollup outputs and extracting CSS, only emit once,
   // since output formats have no effect on the generated CSS.
@@ -336,6 +338,10 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
       hasEmitted = false
     },
 
+    configureServer(_server) {
+      serve = _server
+    },
+
     async transform(css, id, options) {
       if (
         !isCSSRequest(id) ||
@@ -379,13 +385,24 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
 
         const cssContent = await getContentWithSourcemap(css)
         const devBase = config.base
+        const moduleNode = serve.moduleGraph.getModuleById(id)!
+        const entryPoint =
+          typeof moduleNode.entryPoint === 'string'
+            ? moduleNode.entryPoint
+            : moduleNode.entryPoint!.id
+        const entryPointWeight =
+          typeof moduleNode.entryPoint === 'string'
+            ? 0
+            : moduleNode.entryPoint!.weight
         return [
           `import { updateStyle as __vite__updateStyle, removeStyle as __vite__removeStyle } from ${JSON.stringify(
             path.posix.join(devBase, CLIENT_PUBLIC_PATH)
           )}`,
           `const __vite__id = ${JSON.stringify(id)}`,
           `const __vite__css = ${JSON.stringify(cssContent)}`,
-          `__vite__updateStyle(__vite__id, __vite__css)`,
+          `const __vite__entry = ${JSON.stringify(entryPoint)}`,
+          `const __vite__entry_weight = ${JSON.stringify(entryPointWeight)}`,
+          `__vite__updateStyle(__vite__id, __vite__css, __vite__entry, __vite__entry_weight)`,
           // css modules exports change on edit so it can't self accept
           `${
             modulesCode ||

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

@@ -683,6 +683,7 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
         const prunedImports = await moduleGraph.updateModuleInfo(
           importerModule,
           importedUrls,
+          new Set(Array.from(staticImportedUrls).map((item) => item.url)),
           importedBindings,
           normalizedAcceptedUrls,
           isPartiallySelfAccepting ? acceptedExports : null,

packages/vite/src/node/server/moduleGraph.ts

@@ -10,6 +10,8 @@ import {
 import { FS_PREFIX } from '../constants'
 import type { TransformResult } from './transformRequest'
 
+let weight = 0
+
 export class ModuleNode {
   /**
    * Public served url path, starts with /
@@ -35,6 +37,18 @@ export class ModuleNode {
   ssrError: Error | null = null
   lastHMRTimestamp = 0
   lastInvalidationTimestamp = 0
+  /**
+   * entryPoint of the module
+   *   - null - no init
+   *   - self - it's entry pointer (the ModuleNode what import by dynamic import)
+   *   - main - it's import by main entry point
+   *   - ModuleNode - it's import by dynamic import and the entry point is this field
+   */
+  entryPoint: ModuleNode | 'self' | 'main' | null = null
+  /**
+   * lower weight is better
+   */
+  weight: number = 0
 
   /**
    * @param setIsSelfAccepting - set `false` to set `isSelfAccepting` later. e.g. #7870
@@ -135,6 +149,7 @@ export class ModuleGraph {
   async updateModuleInfo(
     mod: ModuleNode,
     importedModules: Set<string | ModuleNode>,
+    staticImportUrls: Set<string | ModuleNode>,
     importedBindings: Map<string, Set<string>> | null,
     acceptedModules: Set<string | ModuleNode>,
     acceptedExports: Set<string> | null,
@@ -153,6 +168,10 @@ export class ModuleGraph {
           : imported
       dep.importers.add(mod)
       nextImports.add(dep)
+      if (!staticImportUrls.has(imported)) {
+        dep.entryPoint = 'self'
+        dep.weight = ++weight
+      }
     }
     // remove the importer from deps that were imported but no longer are.
     prevImports.forEach((dep) => {
@@ -164,6 +183,30 @@ export class ModuleGraph {
         }
       }
     })
+    // ensure the module entry point
+    mod.importers.forEach((importerMod) => {
+      if (importerMod.entryPoint === 'self') {
+        if (mod.entryPoint) {
+          mod.entryPoint =
+            importerMod.weight < mod.weight ? importerMod : mod.entryPoint
+        } else {
+          mod.entryPoint = importerMod
+        }
+      } else if (importerMod.entryPoint instanceof ModuleNode) {
+        if (mod.entryPoint) {
+          mod.entryPoint =
+            importerMod.entryPoint.weight < mod.weight
+              ? importerMod.entryPoint
+              : mod.entryPoint
+        } else {
+          mod.entryPoint = importerMod.entryPoint
+        }
+      }
+    })
+    if (mod.entryPoint === null) {
+      mod.entryPoint = 'main'
+      mod.weight = 0
+    }
     // update accepted hmr deps
     const deps = (mod.acceptedHmrDeps = new Set())
     for (const accepted of acceptedModules) {

playground/css/__tests__/css.spec.ts

@@ -443,6 +443,35 @@ test('aliased css has content', async () => {
   expect(await getColor('.aliased-module')).toBe('blue')
 })
 
+test('async css modules', async () => {
+  const green = await page.$('.async-modules-green')
+  const blue2 = await page.$('.async-modules-blue2')
+  const red = await page.$('.async-modules-red')
+  const blue = await page.$('.async-modules-blue')
+
+  const _black = await page.$('.async-modules-and-css-black')
+  const _blue = await page.$('.async-modules-and-css-blue')
+
+  expect(await getColor(green)).toBe('green')
+  expect(await getColor(blue2)).toBe('blue')
+
+  expect(await getColor(_black)).toBe('black')
+  expect(await getColor(_blue)).toBe('blue')
+
+  // because that loaded blue > red first
+  // and can't change the style order
+  expect(await getColor(blue)).toBe('black')
+  expect(await getColor(red)).toBe('black')
+})
+
+test('async css modules with normal css', async () => {
+  const black = await page.$('.async-modules-and-css-black')
+  const blue = await page.$('.async-modules-and-css-blue')
+
+  expect(await getColor(black)).toBe('black')
+  expect(await getColor(blue)).toBe('blue')
+})
+
 test.runIf(isBuild)('warning can be suppressed by esbuild.logOverride', () => {
   serverLogs.forEach((log) => {
     // no warning from esbuild css minifier

playground/css/async-modules-and-css/black.js

@@ -0,0 +1,9 @@
+import styles from './black.module.css'
+import './hotpink.css'
+
+const div = document.createElement('div')
+div.className = `base ${styles.black} async-modules-and-css-black`
+document.body.appendChild(div)
+div.textContent = `async css modules and normal css (black) ${
+  getComputedStyle(div).color
+}`

playground/css/async-modules-and-css/black.module.css

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

playground/css/async-modules-and-css/blue.js

@@ -0,0 +1,9 @@
+import './hotpink.css'
+import styles from './blue.module.css'
+
+const div = document.createElement('div')
+div.className = `base ${styles.blue} async-modules-and-css-blue`
+document.body.appendChild(div)
+div.textContent = `async css modules and normal css (blue) ${
+  getComputedStyle(div).color
+}`

playground/css/async-modules-and-css/blue.module.css

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

playground/css/async-modules-and-css/hotpink.css

@@ -0,0 +1,4 @@
+.hotpink {
+  font-size: 1rem;
+  color: hotpink;
+}

playground/css/async-modules/base.js

@@ -0,0 +1,10 @@
+import styles from './black.module.css'
+
+export function baseAsync(className, color) {
+  const div = document.createElement('div')
+  div.className = `${styles.black} ${className} async-modules-${color}`
+  document.body.appendChild(div)
+  div.textContent = `async css modules (${color}) ${
+    getComputedStyle(div).color
+  }`
+}

playground/css/async-modules/base2.js

@@ -0,0 +1,10 @@
+import styles from './red.module.css'
+
+export function baseAsync(className, color) {
+  const div = document.createElement('div')
+  div.className = `${styles.red} ${className} async-modules-${color}`
+  document.body.appendChild(div)
+  div.textContent = `async css modules2 (${color}) ${
+    getComputedStyle(div).color
+  }`
+}

playground/css/async-modules/black.module.css

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

playground/css/async-modules/blue.js

@@ -0,0 +1,4 @@
+import styles from './blue.module.css'
+import { baseAsync } from './base'
+
+baseAsync(styles.blue, 'blue')

playground/css/async-modules/blue.module.css

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

playground/css/async-modules/green.js

@@ -0,0 +1,6 @@
+import { baseAsync } from './base2'
+import green from './green.module.css'
+import blue from './blue.module.css'
+
+baseAsync(green.green, 'green')
+baseAsync(blue.blue, 'blue2')

playground/css/async-modules/green.module.css

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

playground/css/async-modules/red.js

@@ -0,0 +1,4 @@
+import { baseAsync } from './base'
+import styles from './red.module.css'
+
+baseAsync(styles.red, 'red')

playground/css/async-modules/red.module.css

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

playground/css/main.js

@@ -106,3 +106,12 @@ document
   .classList.add(aliasModule.aliasedModule)
 
 import './unsupported.css'
+
+// async css modules
+import('./async-modules/blue')
+import('./async-modules/red')
+import('./async-modules/green')
+
+// async css module with normal css
+import('./async-modules-and-css/black')
+import('./async-modules-and-css/blue')