CSS HMR fixes (vercel/turborepo#5948)

### Description

handle multiple hmr events at the same time
fix a race condition when updating CSS too fast


Closes WEB-1556

crates/turbopack-ecmascript-runtime/js/src/dev/client/hmr-client.ts

@@ -28,7 +28,16 @@ export function connect({
         handleSocketConnected(sendMessage);
         break;
       default:
-        handleSocketMessage(msg.data as ServerMessage);
+        if (Array.isArray(msg.data)) {
+          for (let i = 0; i < msg.data.length; i++) {
+            handleSocketMessage(
+              msg.data[i] as ServerMessage,
+              i !== msg.data.length - 1
+            );
+          }
+        } else {
+          handleSocketMessage(msg.data as ServerMessage);
+        }
         break;
     }
   });
@@ -499,13 +508,15 @@ export function setHooks(newHooks: typeof hooks) {
   Object.assign(hooks, newHooks);
 }
 
-function handleSocketMessage(msg: ServerMessage) {
+function handleSocketMessage(msg: ServerMessage, aggregate: boolean = false) {
   sortIssues(msg.issues);
 
   const hasCriticalIssues = handleIssues(msg);
 
   // TODO(WEB-582) Disable update aggregation for now.
-  const aggregate = /* hasCriticalIssues */ false;
+  // if(hasCriticalIssues) {
+  //   aggregate = true;
+  // }
   const aggregatedMsg = aggregateUpdates(msg, aggregate);
 
   if (aggregate) return;

crates/turbopack-ecmascript-runtime/js/src/dev/runtime/dom/runtime-backend-dom.ts

@@ -126,11 +126,11 @@ async function loadWebAssemblyModule(
 
         const chunkUrl = `/${getChunkRelativeUrl(encodedChunkPath)}`;
 
-        const previousLink = document.querySelector(
+        const previousLinks = document.querySelectorAll(
           `link[rel=stylesheet][href^="${chunkUrl}"]`
         );
 
-        if (previousLink == null) {
+        if (previousLinks.length == 0) {
           reject(new Error(`No link element found for chunk ${chunkPath}`));
           return;
         }
@@ -142,10 +142,11 @@ async function loadWebAssemblyModule(
           reject();
         };
         link.onload = () => {
-          // First load the new CSS, then remove the old one. This prevents visible
+          // First load the new CSS, then remove the old ones. This prevents visible
           // flickering that would happen in-between removing the previous CSS and
           // loading the new one.
-          previousLink.remove();
+          for (const previousLink of Array.from(previousLinks))
+            previousLink.remove();
 
           // CSS chunks do not register themselves, and as such must be marked as
           // loaded instantly.
@@ -154,9 +155,9 @@ async function loadWebAssemblyModule(
 
         // Make sure to insert the new CSS right after the previous one, so that
         // its precedence is higher.
-        previousLink.parentElement!.insertBefore(
+        previousLinks[0].parentElement!.insertBefore(
           link,
-          previousLink.nextSibling
+          previousLinks[0].nextSibling
         );
       });
     },