refactor: use native browserslist 'baseline' query

With the release of browserslist v4.26.0, the 'baseline' query is now natively supported. This removes the need for a custom tool to generate the browserslist configuration.

See: browserslist/browserslist#903

Author: alan-agius4

.bazelignore

@@ -17,4 +17,3 @@ packages/ngtools/webpack/node_modules
 packages/schematics/angular/node_modules
 modules/testing/builder/node_modules
 tests/node_modules
-tools/baseline_browserslist/node_modules

MODULE.bazel

@@ -153,7 +153,6 @@ npm.npm_translate_lock(
         "//packages/ngtools/webpack:package.json",
         "//packages/schematics/angular:package.json",
         "//tests:package.json",
-        "//tools/baseline_browserslist:package.json",
     ],
     lifecycle_hooks_envs = {
         # TODO: Standardize browser management for `rules_js`

docs/process/release.md

@@ -123,12 +123,15 @@ will block the next weekly release.
     pnpm ng-dev release build
     ```
 1.  Log in to NPM as `angular`.
+
     ```shell
     npm login
     ```
+
     - See these two Valentine entries for authentication details:
       - https://valentine.corp.google.com/#/show/1460636514618735
       - https://valentine.corp.google.com/#/show/1531867371192103
+
 1.  Publish the release.
     ```shell
     (cd dist/releases/my-scope/my-pkg/ && npm publish --access public)
@@ -161,17 +164,10 @@ A few weeks before a major (around feature freeze):
     - Picking a date at the end of a month makes it easier to cross-reference
       Angular's support with other tools (like MDN) which state Baseline support
       using month specificity.
-    - You can view the generated `browserlist` configuration with:
-      ```shell
-      bazel build //packages/angular/build:angular_browserslist
-      cat dist/bin/packages/angular/build/.browserslistrc
-      ```
     - Commit and merge the change, no other alterations or automation is
       necessary in the CLI repo.
-2.  Update
-    [`/.browserslistrc`](https://github.com/ng-packagr/ng-packagr/tree/main/.browserslistrc)
-    in the `ng-packagr` repo.
-    - Use the generated configuration from above.
+2.  Update the date in the `ng-packagr` repo.
+    [`/.stylesheet-processor.ts`](https://github.com/ng-packagr/ng-packagr/blob/main/src/lib/styles/stylesheet-processor.ts#L25).
 3.  Update
     [`angular.dev` documentation](https://github.com/angular/angular/tree/main/adev/src/content/reference/versions.md#browser-support)
     to specify the date used and link to [browsersl.ist](https://browsersl.ist)

packages/angular/build/BUILD.bazel

@@ -1,9 +1,7 @@
 load("@devinfra//bazel/api-golden:index.bzl", "api_golden_test_npm_package")
 load("@npm//:defs.bzl", "npm_link_all_packages")
-load("//:constants.bzl", "BASELINE_DATE")
 load("//tools:defaults.bzl", "copy_to_bin", "jasmine_test", "npm_package", "ts_project")
 load("//tools:ts_json_schema.bzl", "ts_json_schema")
-load("//tools/baseline_browserslist:baseline_browserslist.bzl", "baseline_browserslist")
 
 licenses(["notice"])
 
@@ -46,12 +44,6 @@ copy_to_bin(
     srcs = glob(["**/schema.json"]),
 )
 
-baseline_browserslist(
-    name = "angular_browserslist",
-    out = ".browserslistrc",
-    baseline = BASELINE_DATE,
-)
-
 RUNTIME_ASSETS = glob(
     include = [
         "src/**/schema.json",
@@ -62,7 +54,6 @@ RUNTIME_ASSETS = glob(
 ) + [
     "builders.json",
     "package.json",
-    ":angular_browserslist",
 ]
 
 ts_project(
@@ -343,6 +334,7 @@ npm_package(
         "src/utils/version.js",
         "src/tools/esbuild/utils.js",
         "src/utils/normalize-cache.js",
+        "src/utils/supported-browsers.js",
     ],
     tags = ["release-package"],
     deps = RUNTIME_ASSETS + [

packages/angular/build/package.json

@@ -26,7 +26,7 @@
     "@inquirer/confirm": "5.1.18",
     "@vitejs/plugin-basic-ssl": "2.1.0",
     "beasties": "0.3.5",
-    "browserslist": "^4.23.0",
+    "browserslist": "^4.26.0",
     "esbuild": "0.25.9",
     "https-proxy-agent": "7.0.6",
     "istanbul-lib-instrument": "6.0.3",

packages/angular/build/src/utils/supported-browsers.ts

@@ -8,14 +8,15 @@
 
 import browserslist from 'browserslist';
 
+// The below is replaced by bazel `npm_package`.
+const BASELINE_DATE = 'BASELINE-DATE-PLACEHOLDER';
+
 export function getSupportedBrowsers(
   projectRoot: string,
   logger: { warn(message: string): void },
 ): string[] {
   // Read the browserslist configuration containing Angular's browser support policy.
-  const angularBrowserslist = browserslist(undefined, {
-    path: require.resolve('../../.browserslistrc'),
-  });
+  const angularBrowserslist = browserslist(`baseline widely available on ${getBaselineDate()}`);
 
   // Use Angular's configuration as the default.
   browserslist.defaults = angularBrowserslist;
@@ -60,3 +61,8 @@ export function getSupportedBrowsers(
 
   return Array.from(browsersFromConfigOrDefault);
 }
+
+function getBaselineDate(): string {
+  // Unlike `npm_package`, `ts_project` which is used to run unit tests does not support substitutions.
+  return BASELINE_DATE[0] === 'B' ? '2025-01-01' : BASELINE_DATE;
+}

packages/angular_devkit/build_angular/package.json

@@ -25,7 +25,7 @@
     "ansi-colors": "4.1.3",
     "autoprefixer": "10.4.21",
     "babel-loader": "10.0.0",
-    "browserslist": "^4.21.5",
+    "browserslist": "^4.26.0",
     "copy-webpack-plugin": "13.0.1",
     "css-loader": "7.1.2",
     "esbuild-wasm": "0.25.9",

packages/schematics/angular/BUILD.bazel

@@ -4,10 +4,8 @@
 # found in the LICENSE file at https://angular.dev/license
 
 load("@npm//:defs.bzl", "npm_link_all_packages")
-load("//:constants.bzl", "BASELINE_DATE")
 load("//tools:defaults.bzl", "copy_to_bin", "jasmine_test", "npm_package", "ts_project")
 load("//tools:ts_json_schema.bzl", "ts_json_schema")
-load("//tools/baseline_browserslist:baseline_browserslist.bzl", "baseline_browserslist")
 
 licenses(["notice"])
 
@@ -44,18 +42,11 @@ copy_to_bin(
     srcs = glob(["**/schema.json"]),
 )
 
-baseline_browserslist(
-    name = "angular_browserslist",
-    out = "config/.browserslistrc",
-    baseline = BASELINE_DATE,
-)
-
 RUNTIME_ASSETS = [
     "collection.json",
     "migrations/migration-collection.json",
     "package.json",
     "utility/latest-versions/package.json",
-    ":angular_browserslist",
 ] + glob(
     include = [
         "*/schema.json",
@@ -156,6 +147,7 @@ npm_package(
         "//packages/angular_devkit/core:package.json",
     ],
     stamp_files = [
+        "config/index.js",
         "utility/latest-versions.js",
     ],
     tags = ["release-package"],

packages/schematics/angular/config/files/.browserslistrc.template

@@ -8,4 +8,4 @@
 # You can see what browsers were selected by your queries by running:
 #   npx browserslist
 
-<%= config %>
+baseline widely available on <%= baselineDate %>

packages/schematics/angular/config/index.ts

@@ -17,7 +17,6 @@ import {
   strings,
   url,
 } from '@angular-devkit/schematics';
-import { readFile } from 'node:fs/promises';
 import { posix as path } from 'node:path';
 import { relativePathToWorkspaceRoot } from '../utility/paths';
 import { createProjectSchematic } from '../utility/project';
@@ -37,13 +36,11 @@ export default createProjectSchematic<ConfigOptions>((options, { project }) => {
 });
 
 async function addBrowserslistConfig(projectRoot: string): Promise<Rule> {
-  // Read Angular's default vendored `.browserslistrc` file.
-  const config = await readFile(path.join(__dirname, '.browserslistrc'), 'utf8');
-
   return mergeWith(
     apply(url('./files'), [
       filter((p) => p.endsWith('.browserslistrc.template')),
-      applyTemplates({ config }),
+      // The below is replaced by bazel `npm_package`.
+      applyTemplates({ baselineDate: 'BASELINE-DATE-PLACEHOLDER' }),
       move(projectRoot),
     ]),
   );