Wrap base styles in a @layer on supported browsers

Author: devknoll

src/engine.ts

@@ -646,7 +646,11 @@ class StyleElementController extends NodeController<HTMLStyleElement> {
 
 class GlobalStyleElementController extends NodeController<HTMLStyleElement> {
   connected(): void {
-    this.node.innerHTML = `* { ${CUSTOM_PROPERTY_TYPE}: cq-normal; ${CUSTOM_PROPERTY_NAME}: cq-none; }`;
+    const style = `* { ${CUSTOM_PROPERTY_TYPE}: cq-normal; ${CUSTOM_PROPERTY_NAME}: cq-none; }`;
+    this.node.innerHTML =
+      typeof (window as any).CSSLayerBlockRule === 'undefined'
+        ? style
+        : `@layer cq-polyfill-${PER_RUN_UID} { ${style} }`;
   }
 }
 

tests/@layer.html

@@ -7,16 +7,16 @@
   }
 
   @layer test-layer {
+    #a {
+      container-type: inline-size;
+    }
+
     @container (width > 0) {
       h1 {
         font-size: 20px;
       }
     }
   }
-
-  #a {
-    container-type: inline-size;
-  }
 </style>
 <div id="a">
   <h1>Ohai</h1>