Wrap CSS chunk items in a @layer (vercel/turborepo#3542)

In Turbopack, as a consequence of our lazy compilation model, CSS chunks
can contain duplicate CSS chunk items. This can cause issues with
precedence. Take the following example:

Initial CSS chunk:
```css
/* ... */

/* chunk item A */
h1 {
  font-size: 2rem;
}

/* ... */

/* other chunk item */
h1 {
  font-size: 4rem;
}

/* ... */
```

Dynamic CSS chunk (loaded after the first page load completes)
```css
/* ... */

/* chunk item A */
h1 {
  font-size: 2rem;
}

/* ... */
```

In this example, when the page first loads, the following rule will be
applied:
```css
h1 {
  font-size: 4rem;
}
```

But as soon as the dynamic CSS chunk loads, the following rule will be
applied instead:
```css
h1 {
  font-size: 2rem;
}
```

However, from the order of rules in the initial load, we know that the
former should still apply.

We can remedy this particular issue by wrapping each CSS chunk item into
its own
[`@layer`](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer)
(thanks @sokra for the idea!). This ensures that when a CSS chunk item
is re-encountered at a later time, it is automatically de-duplicated
thanks to the inherent CSS layering algorithm.

This is not an issue in Next.js as we can't have duplicated CSS chunk
items.

Author: alexkirsz

crates/next-dev-tests/tests/integration/next/font-google/basic/pages/index.js

@@ -55,7 +55,6 @@ function runTests() {
 async function getRuleMatchingClassName(className) {
   const selector = `.${CSS.escape(className)}`;
 
-  let matchingRule;
   for (const stylesheet of document.querySelectorAll("link[rel=stylesheet]")) {
     if (stylesheet.sheet == null) {
       // Wait for the stylesheet to load completely if it hasn't already
@@ -64,13 +63,30 @@ async function getRuleMatchingClassName(className) {
       });
     }
 
-    for (const rule of stylesheet.sheet.cssRules) {
-      if (rule.selectorText === selector) {
-        matchingRule = rule;
-        break;
+    const sheet = stylesheet.sheet;
+
+    const res = getRuleMatchingClassNameRec(selector, sheet.cssRules);
+    if (res != null) {
+      return res;
+    }
+  }
+
+  return null;
+}
+
+function getRuleMatchingClassNameRec(selector, rules) {
+  for (const rule of rules) {
+    if (rule instanceof CSSStyleRule && rule.selectorText === selector) {
+      return rule;
+    }
+
+    if (rule instanceof CSSLayerBlockRule) {
+      const res = getRuleMatchingClassNameRec(selector, rule.cssRules);
+      if (res != null) {
+        return res;
       }
     }
   }
 
-  return matchingRule;
+  return null;
 }