fix(css): insert styles in the same position (#11763)

Author: sapphi-red

packages/vite/src/client/client.ts

@@ -347,6 +347,9 @@ const sheetsMap = new Map<
   string,
   HTMLStyleElement | CSSStyleSheet | undefined
 >()
+// all css imports should be inserted at the same position
+// because after build it will be a single css file
+let lastInsertedStyle: HTMLStyleElement | undefined
 
 export function updateStyle(id: string, content: string): void {
   let style = sheetsMap.get(id)
@@ -374,7 +377,19 @@ export function updateStyle(id: string, content: string): void {
       style.setAttribute('type', 'text/css')
       style.setAttribute('data-vite-dev-id', id)
       style.textContent = content
-      document.head.appendChild(style)
+
+      if (!lastInsertedStyle) {
+        document.head.appendChild(style)
+
+        // reset lastInsertedStyle after async
+        // because dynamically imported css will be splitted into a different file
+        setTimeout(() => {
+          lastInsertedStyle = undefined
+        }, 0)
+      } else {
+        lastInsertedStyle.insertAdjacentElement('afterend', style)
+      }
+      lastInsertedStyle = style
     } else {
       style.textContent = content
     }

playground/css-codesplit/__tests__/css-codesplit.spec.ts

@@ -21,6 +21,12 @@ test('should load dynamic import with module', async () => {
   expect(await getColor('.mod')).toBe('yellow')
 })
 
+test('style order should be consistent when style tag is inserted by JS', async () => {
+  expect(await getColor('.order-bulk')).toBe('orange')
+  await page.click('.order-bulk-update')
+  expect(await getColor('.order-bulk')).toBe('green')
+})
+
 describe.runIf(isBuild)('build', () => {
   test('should remove empty chunk', async () => {
     expect(findAssetFile(/style.*\.js$/)).toBe('')

playground/css-codesplit/index.html

@@ -7,5 +7,10 @@ <h2>This should be blue</h2>
 <p class="mod">This should be yellow</p>
 <p class="dynamic-module"></p>
 
+<p class="order-bulk">
+  This should be orange
+  <button class="order-bulk-update">change to green</button>
+</p>
+
 <script type="module" src="/main.js"></script>
 <div id="app"></div>

playground/css-codesplit/main.js

@@ -1,5 +1,6 @@
 import './style.css'
 import './main.css'
+import './order'
 
 import('./async.css')
 

playground/css-codesplit/order/base.css

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

playground/css-codesplit/order/dynamic.css

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

playground/css-codesplit/order/index.js

@@ -0,0 +1,6 @@
+import './insert' // inserts "color: orange"
+import './base.css' // includes "color: blue"
+
+document.querySelector('.order-bulk-update').addEventListener('click', () => {
+  import('./dynamic.css') // includes "color: green"
+})

playground/css-codesplit/order/insert.js

@@ -0,0 +1,3 @@
+const style = document.createElement('style')
+style.textContent = '.order-bulk { color: orange; }'
+document.head.appendChild(style)