refactor: replace critters with beasties

The Critters project has been transferred to the Nuxt team, who will now manage its development and has been renamed to Beasties.

See: https://github.com/danielroe/beasties
(cherry picked from commit 15677d0)

Author: alan-agius4

package.json

@@ -124,12 +124,12 @@
     "ansi-colors": "4.1.3",
     "autoprefixer": "10.4.20",
     "babel-loader": "9.2.1",
+    "beasties": "0.1.0",
     "browser-sync": "3.0.3",
     "browserslist": "^4.21.5",
     "buffer": "6.0.3",
     "chokidar": "4.0.1",
     "copy-webpack-plugin": "12.0.2",
-    "critters": "0.0.25",
     "css-loader": "7.1.2",
     "debug": "^4.1.1",
     "esbuild": "0.24.0",

packages/angular/build/BUILD.bazel

@@ -78,8 +78,8 @@ ts_library(
         "@npm//@types/semver",
         "@npm//@types/watchpack",
         "@npm//@vitejs/plugin-basic-ssl",
+        "@npm//beasties",
         "@npm//browserslist",
-        "@npm//critters",
         "@npm//esbuild",
         "@npm//esbuild-wasm",
         "@npm//fast-glob",

packages/angular/build/package.json

@@ -26,8 +26,8 @@
     "@babel/plugin-syntax-import-attributes": "7.25.9",
     "@inquirer/confirm": "5.0.0",
     "@vitejs/plugin-basic-ssl": "1.1.0",
+    "beasties": "0.1.0",
     "browserslist": "^4.23.0",
-    "critters": "0.0.25",
     "esbuild": "0.24.0",
     "fast-glob": "3.3.2",
     "https-proxy-agent": "7.0.5",

packages/angular/build/src/tools/esbuild/commonjs-checker.ts

@@ -50,9 +50,9 @@ export function checkCommonJSModules(
   allowedRequests.add('xhr2');
 
   // Packages used by @angular/ssr.
-  // While critters is ESM it has a number of direct and transtive CJS deps.
+  // While beasties is ESM it has a number of direct and transtive CJS deps.
   allowedRequests.add('express');
-  allowedRequests.add('critters');
+  allowedRequests.add('beasties');
 
   // Find all entry points that contain code (JS/TS)
   const files: string[] = [];

packages/angular/build/src/tools/esbuild/global-styles.ts

@@ -74,7 +74,7 @@ export function createGlobalStylesBundleOptions(
     );
 
     // Keep special CSS comments `/*! comment */` in place when `removeSpecialComments` is disabled.
-    // These comments are special for a number of CSS tools such as Critters and PurgeCSS.
+    // These comments are special for a number of CSS tools such as Beasties and PurgeCSS.
     buildOptions.legalComments = optimizationOptions.styles?.removeSpecialComments
       ? 'none'
       : 'inline';

packages/angular/build/src/typings.d.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-// The `bundled_critters` causes issues with module mappings in Bazel,
+// The `bundled_beasties` causes issues with module mappings in Bazel,
 // leading to unexpected behavior with esbuild. Specifically, the problem occurs
 // when esbuild resolves to a different module or version than expected, due to
 // how Bazel handles module mappings.

packages/angular/build/src/utils/index-file/inline-critical-css.ts

@@ -6,16 +6,16 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import Critters from 'critters';
+import Beasties from 'beasties';
 import { readFile } from 'node:fs/promises';
 
 /**
- * Pattern used to extract the media query set by Critters in an `onload` handler.
+ * Pattern used to extract the media query set by Beasties in an `onload` handler.
  */
 const MEDIA_SET_HANDLER_PATTERN = /^this\.media=["'](.*)["'];?$/;
 
 /**
- * Name of the attribute used to save the Critters media query so it can be re-assigned on load.
+ * Name of the attribute used to save the Beasties media query so it can be re-assigned on load.
  */
 const CSP_MEDIA_ATTR = 'ngCspMedia';
 
@@ -58,8 +58,7 @@ const LINK_LOAD_SCRIPT_CONTENT = `
   };
 
   documentElement.addEventListener('load', listener, true);
-})();
-`.trim();
+})();`;
 
 export interface InlineCriticalCssProcessOptions {
   outputPath: string;
@@ -98,14 +97,14 @@ interface PartialDocument {
 /* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */
 
 // We use Typescript declaration merging because `embedLinkedStylesheet` it's not declared in
-// the `Critters` types which means that we can't call the `super` implementation.
-interface CrittersBase {
+// the `Beasties` types which means that we can't call the `super` implementation.
+interface BeastiesBase {
   embedLinkedStylesheet(link: PartialHTMLElement, document: PartialDocument): Promise<unknown>;
 }
-class CrittersBase extends Critters {}
+class BeastiesBase extends Beasties {}
 /* eslint-enable @typescript-eslint/no-unsafe-declaration-merging */
 
-class CrittersExtended extends CrittersBase {
+class BeastiesExtended extends BeastiesBase {
   readonly warnings: string[] = [];
   readonly errors: string[] = [];
   private addedCspScriptsDocuments = new WeakSet<PartialDocument>();
@@ -143,7 +142,7 @@ class CrittersExtended extends CrittersBase {
   }
 
   /**
-   * Override of the Critters `embedLinkedStylesheet` method
+   * Override of the Beasties `embedLinkedStylesheet` method
    * that makes it work with Angular's CSP APIs.
    */
   override async embedLinkedStylesheet(
@@ -165,19 +164,19 @@ class CrittersExtended extends CrittersBase {
     const cspNonce = this.findCspNonce(document);
 
     if (cspNonce) {
-      const crittersMedia = link.getAttribute('onload')?.match(MEDIA_SET_HANDLER_PATTERN);
+      const beastiesMedia = link.getAttribute('onload')?.match(MEDIA_SET_HANDLER_PATTERN);
 
-      if (crittersMedia) {
-        // If there's a Critters-generated `onload` handler and the file has an Angular CSP nonce,
+      if (beastiesMedia) {
+        // If there's a Beasties-generated `onload` handler and the file has an Angular CSP nonce,
         // we have to remove the handler, because it's incompatible with CSP. We save the value
         // in a different attribute and we generate a script tag with the nonce that uses
         // `addEventListener` to apply the media query instead.
         link.removeAttribute('onload');
-        link.setAttribute(CSP_MEDIA_ATTR, crittersMedia[1]);
+        link.setAttribute(CSP_MEDIA_ATTR, beastiesMedia[1]);
         this.conditionallyInsertCspLoadingScript(document, cspNonce, link);
       }
 
-      // Ideally we would hook in at the time Critters inserts the `style` tags, but there isn't
+      // Ideally we would hook in at the time Beasties 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
       // inserted. We mitigate it by only iterating the direct children of the `<head>` which
       // should be pretty shallow.
@@ -200,7 +199,7 @@ class CrittersExtended extends CrittersBase {
       return this.documentNonces.get(document)!;
     }
 
-    // HTML attribute are case-insensitive, but the parser used by Critters is case-sensitive.
+    // HTML attribute are case-insensitive, but the parser used by Beasties is case-sensitive.
     const nonceElement = document.querySelector('[ngCspNonce], [ngcspnonce]');
     const cspNonce =
       nonceElement?.getAttribute('ngCspNonce') || nonceElement?.getAttribute('ngcspnonce') || null;
@@ -240,16 +239,16 @@ export class InlineCriticalCssProcessor {
     html: string,
     options: InlineCriticalCssProcessOptions,
   ): Promise<{ content: string; warnings: string[]; errors: string[] }> {
-    const critters = new CrittersExtended({ ...this.options, ...options });
-    const content = await critters.process(html);
+    const beasties = new BeastiesExtended({ ...this.options, ...options });
+    const content = await beasties.process(html);
 
     return {
       // Clean up value from value less attributes.
       // This is caused because parse5 always requires attributes to have a string value.
       // nomodule="" defer="" -> nomodule defer.
       content: content.replace(/(\s(?:defer|nomodule))=""/g, '$1'),
-      errors: critters.errors,
-      warnings: critters.warnings,
+      errors: beasties.errors,
+      warnings: beasties.warnings,
     };
   }
 }

packages/angular/ssr/BUILD.bazel

@@ -19,7 +19,7 @@ ts_library(
     module_name = "@angular/ssr",
     tsconfig = "//:tsconfig-build-ng",
     deps = [
-        "//packages/angular/ssr/third_party/critters:bundled_critters_lib",
+        "//packages/angular/ssr/third_party/beasties:bundled_beasties_lib",
         "//packages/angular/ssr/tokens",
         "@npm//@angular/common",
         "@npm//@angular/core",
@@ -34,13 +34,13 @@ ng_package(
     package_name = "@angular/ssr",
     srcs = [
         ":package.json",
-        "//packages/angular/ssr/third_party/critters:bundled_critters_lib",
+        "//packages/angular/ssr/third_party/beasties:bundled_beasties_lib",
     ],
     externals = [
         "@angular/ssr",
         "@angular/ssr/node",
         "@angular/ssr/tokens",
-        "../../third_party/critters",
+        "../../third_party/beasties",
     ],
     nested_packages = [
         "//packages/angular/ssr/schematics:npm_package",

packages/angular/ssr/node/src/common-engine/inline-css-processor.ts

@@ -13,7 +13,7 @@ export class CommonEngineInlineCriticalCssProcessor {
   private readonly resourceCache = new Map<string, string>();
 
   async process(html: string, outputPath: string | undefined): Promise<string> {
-    const critters = new InlineCriticalCssProcessor(async (path) => {
+    const beasties = new InlineCriticalCssProcessor(async (path) => {
       let resourceContent = this.resourceCache.get(path);
       if (resourceContent === undefined) {
         resourceContent = await readFile(path, 'utf-8');
@@ -23,6 +23,6 @@ export class CommonEngineInlineCriticalCssProcessor {
       return resourceContent;
     }, outputPath);
 
-    return critters.process(html);
+    return beasties.process(html);
   }
 }

packages/angular/ssr/src/utils/inline-critical-css.ts

@@ -6,15 +6,15 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import Critters from '../../third_party/critters';
+import Beasties from '../../third_party/beasties';
 
 /**
- * Pattern used to extract the media query set by Critters in an `onload` handler.
+ * Pattern used to extract the media query set by Beasties in an `onload` handler.
  */
 const MEDIA_SET_HANDLER_PATTERN = /^this\.media=["'](.*)["'];?$/;
 
 /**
- * Name of the attribute used to save the Critters media query so it can be re-assigned on load.
+ * Name of the attribute used to save the Beasties media query so it can be re-assigned on load.
  */
 const CSP_MEDIA_ATTR = 'ngCspMedia';
 
@@ -57,8 +57,7 @@ const LINK_LOAD_SCRIPT_CONTENT = `
   };
 
   documentElement.addEventListener('load', listener, true);
-})();
-`.trim();
+})();`;
 
 /** Partial representation of an `HTMLElement`. */
 interface PartialHTMLElement {
@@ -87,14 +86,14 @@ interface PartialDocument {
 /* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */
 
 // We use Typescript declaration merging because `embedLinkedStylesheet` it's not declared in
-// the `Critters` types which means that we can't call the `super` implementation.
-interface CrittersBase {
+// the `Beasties` types which means that we can't call the `super` implementation.
+interface BeastiesBase {
   embedLinkedStylesheet(link: PartialHTMLElement, document: PartialDocument): Promise<unknown>;
 }
-class CrittersBase extends Critters {}
+class BeastiesBase extends Beasties {}
 /* eslint-enable @typescript-eslint/no-unsafe-declaration-merging */
 
-export class InlineCriticalCssProcessor extends CrittersBase {
+export class InlineCriticalCssProcessor extends BeastiesBase {
   private addedCspScriptsDocuments = new WeakSet<PartialDocument>();
   private documentNonces = new WeakMap<PartialDocument, string | null>();
 
@@ -126,7 +125,7 @@ export class InlineCriticalCssProcessor extends CrittersBase {
   }
 
   /**
-   * Override of the Critters `embedLinkedStylesheet` method
+   * Override of the Beasties `embedLinkedStylesheet` method
    * that makes it work with Angular's CSP APIs.
    */
   override async embedLinkedStylesheet(
@@ -148,19 +147,19 @@ export class InlineCriticalCssProcessor extends CrittersBase {
     const cspNonce = this.findCspNonce(document);
 
     if (cspNonce) {
-      const crittersMedia = link.getAttribute('onload')?.match(MEDIA_SET_HANDLER_PATTERN);
+      const beastiesMedia = link.getAttribute('onload')?.match(MEDIA_SET_HANDLER_PATTERN);
 
-      if (crittersMedia) {
-        // If there's a Critters-generated `onload` handler and the file has an Angular CSP nonce,
+      if (beastiesMedia) {
+        // If there's a Beasties-generated `onload` handler and the file has an Angular CSP nonce,
         // we have to remove the handler, because it's incompatible with CSP. We save the value
         // in a different attribute and we generate a script tag with the nonce that uses
         // `addEventListener` to apply the media query instead.
         link.removeAttribute('onload');
-        link.setAttribute(CSP_MEDIA_ATTR, crittersMedia[1]);
+        link.setAttribute(CSP_MEDIA_ATTR, beastiesMedia[1]);
         this.conditionallyInsertCspLoadingScript(document, cspNonce, link);
       }
 
-      // Ideally we would hook in at the time Critters inserts the `style` tags, but there isn't
+      // Ideally we would hook in at the time Beasties 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
       // inserted. We mitigate it by only iterating the direct children of the `<head>` which
       // should be pretty shallow.
@@ -183,7 +182,7 @@ export class InlineCriticalCssProcessor extends CrittersBase {
       return this.documentNonces.get(document)!;
     }
 
-    // HTML attribute are case-insensitive, but the parser used by Critters is case-sensitive.
+    // HTML attribute are case-insensitive, but the parser used by Beasties is case-sensitive.
     const nonceElement = document.querySelector('[ngCspNonce], [ngcspnonce]');
     const cspNonce =
       nonceElement?.getAttribute('ngCspNonce') || nonceElement?.getAttribute('ngcspnonce') || null;