02d9d84 fix(@angular/ssr): handle handle load event for multiple stylesheets and CSP nonces

Author: Angular Builds

package.json

@@ -1,15 +1,15 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "17.1.0+sha-35ebf1e",
+  "version": "17.1.0+sha-02d9d84",
   "description": "Angular Webpack Build Facade",
   "main": "src/index.js",
   "typings": "src/index.d.ts",
   "builders": "builders.json",
   "dependencies": {
     "@ampproject/remapping": "2.2.1",
-    "@angular-devkit/architect": "github:angular/angular-devkit-architect-builds#35ebf1e",
-    "@angular-devkit/build-webpack": "github:angular/angular-devkit-build-webpack-builds#35ebf1e",
-    "@angular-devkit/core": "github:angular/angular-devkit-core-builds#35ebf1e",
+    "@angular-devkit/architect": "github:angular/angular-devkit-architect-builds#02d9d84",
+    "@angular-devkit/build-webpack": "github:angular/angular-devkit-build-webpack-builds#02d9d84",
+    "@angular-devkit/core": "github:angular/angular-devkit-core-builds#02d9d84",
     "@babel/core": "7.23.7",
     "@babel/generator": "7.23.6",
     "@babel/helper-annotate-as-pure": "7.22.5",
@@ -20,7 +20,7 @@
     "@babel/preset-env": "7.23.7",
     "@babel/runtime": "7.23.7",
     "@discoveryjs/json-ext": "0.5.7",
-    "@ngtools/webpack": "github:angular/ngtools-webpack-builds#35ebf1e",
+    "@ngtools/webpack": "github:angular/ngtools-webpack-builds#02d9d84",
     "@vitejs/plugin-basic-ssl": "1.0.2",
     "ansi-colors": "4.1.3",
     "autoprefixer": "10.4.16",

src/utils/index-file/inline-critical-css.js

@@ -23,23 +23,31 @@ const MEDIA_SET_HANDLER_PATTERN = /^this\.media=["'](.*)["'];?$/;
 const CSP_MEDIA_ATTR = 'ngCspMedia';
 /**
  * Script text used to change the media value of the link tags.
+ *
+ * NOTE:
+ * We do not use `document.querySelectorAll('link').forEach((s) => s.addEventListener('load', ...)`
+ * because this does not always fire on Chome.
+ * See: https://github.com/angular/angular-cli/issues/26932 and https://crbug.com/1521256
  */
 const LINK_LOAD_SCRIPT_CONTENT = [
-    `(() => {`,
-    // Save the `children` in a variable since they're a live DOM node collection.
-    // We iterate over the direct descendants, instead of going through a `querySelectorAll`,
-    // because we know that the tags will be directly inside the `head`.
-    `  const children = document.head.children;`,
-    // Declare `onLoad` outside the loop to avoid leaking memory.
-    // Can't be an arrow function, because we need `this` to refer to the DOM node.
-    `  function onLoad() {this.media = this.getAttribute('${CSP_MEDIA_ATTR}');}`,
-    // Has to use a plain for loop, because some browsers don't support
-    // `forEach` on `children` which is a `HTMLCollection`.
-    `  for (let i = 0; i < children.length; i++) {`,
-    `    const child = children[i];`,
-    `    child.hasAttribute('${CSP_MEDIA_ATTR}') && child.addEventListener('load', onLoad);`,
-    `  }`,
-    `})();`,
+    '(() => {',
+    `  const CSP_MEDIA_ATTR = '${CSP_MEDIA_ATTR}';`,
+    '  const documentElement = document.documentElement;',
+    '  const listener = (e) => {',
+    '    const target = e.target;',
+    `    if (!target || target.tagName !== 'LINK' || !target.hasAttribute(CSP_MEDIA_ATTR)) {`,
+    '     return;',
+    '    }',
+    '    target.media = target.getAttribute(CSP_MEDIA_ATTR);',
+    '    target.removeAttribute(CSP_MEDIA_ATTR);',
+    // Remove onload listener when there are no longer styles that need to be loaded.
+    '    if (!document.head.querySelector(`link[${CSP_MEDIA_ATTR}]`)) {',
+    `      documentElement.removeEventListener('load', listener);`,
+    '    }',
+    '  };',
+    //  We use an event with capturing (the true parameter) because load events don't bubble.
+    `  documentElement.addEventListener('load', listener, true);`,
+    '})();',
 ].join('\n');
 class CrittersExtended extends critters_1.default {
     optionsExtended;
@@ -105,7 +113,7 @@ class CrittersExtended extends critters_1.default {
                 // `addEventListener` to apply the media query instead.
                 link.removeAttribute('onload');
                 link.setAttribute(CSP_MEDIA_ATTR, crittersMedia[1]);
-                this.conditionallyInsertCspLoadingScript(document, cspNonce);
+                this.conditionallyInsertCspLoadingScript(document, cspNonce, link);
             }
             // Ideally we would hook in at the time Critters inserts the `style` tags, but there isn't
             // a way of doing that at the moment so we fall back to doing it any time a `link` tag is
@@ -137,16 +145,16 @@ class CrittersExtended extends critters_1.default {
      * Inserts the `script` tag that swaps the critical CSS at runtime,
      * if one hasn't been inserted into the document already.
      */
-    conditionallyInsertCspLoadingScript(document, nonce) {
+    conditionallyInsertCspLoadingScript(document, nonce, link) {
         if (this.addedCspScriptsDocuments.has(document)) {
             return;
         }
         const script = document.createElement('script');
         script.setAttribute('nonce', nonce);
         script.textContent = LINK_LOAD_SCRIPT_CONTENT;
-        // Append the script to the head since it needs to
-        // run as early as possible, after the `link` tags.
-        document.head.appendChild(script);
+        // Prepend the script to the head since it needs to
+        // run as early as possible, before the `link` tags.
+        document.head.insertBefore(script, link);
         this.addedCspScriptsDocuments.add(document);
     }
 }

uniqueId

@@ -1 +1 @@
-Tue Jan 23 2024 17:39:24 GMT+0000 (Coordinated Universal Time)
+Wed Jan 24 2024 14:03:09 GMT+0000 (Coordinated Universal Time)