feat(@angular/build): Support Sass package importers

Enhanced Sass integration by adding support for package importers.

See: https://sass-lang.com/blog/announcing-pkg-importers/

Closes: #29854

Author: alan-agius4

packages/angular/build/src/tools/esbuild/stylesheets/sass-language.ts

@@ -9,7 +9,13 @@
 import type { OnLoadResult, PartialMessage, PartialNote, ResolveResult } from 'esbuild';
 import { dirname, join } from 'node:path';
 import { fileURLToPath, pathToFileURL } from 'node:url';
-import type { CanonicalizeContext, CompileResult, Exception, Syntax } from 'sass';
+import {
+  type CanonicalizeContext,
+  type CompileResult,
+  type Exception,
+  NodePackageImporter,
+  type Syntax,
+} from 'sass';
 import type { SassWorkerImplementation } from '../../sass/sass-service';
 import { MemoryCache } from '../cache';
 import { StylesheetLanguage, StylesheetPluginOptions } from './stylesheet-plugin-factory';
@@ -56,8 +62,8 @@ export const SassStylesheetLanguage = Object.freeze<StylesheetLanguage>({
 });
 
 function parsePackageName(url: string): { packageName: string; readonly pathSegments: string[] } {
-  const parts = url.split('/');
-  const hasScope = parts.length >= 2 && parts[0].startsWith('@');
+  const parts = (url.startsWith('pkg:') ? url.slice(4) : url).split('/');
+  const hasScope = parts.length >= 2 && parts[0][0] === '@';
   const [nameOrScope, nameOrFirstPath, ...pathPart] = parts;
   const packageName = hasScope ? `${nameOrScope}/${nameOrFirstPath}` : nameOrScope;
 
@@ -110,6 +116,7 @@ async function compileString(
       futureDeprecations,
       quietDeps: true,
       importers: [
+        new NodePackageImporter(),
         {
           findFileUrl: (url, options) =>
             resolutionCache.getOrCreate(url, async () => {

tests/legacy-cli/e2e.bzl

@@ -46,6 +46,7 @@ WEBPACK_IGNORE_TESTS = [
     "tests/i18n/ivy-localize-app-shell.js",
     "tests/i18n/ivy-localize-app-shell-service-worker.js",
     "tests/commands/serve/ssr-http-requests-assets.js",
+    "tests/legacy-cli/e2e/tests/build/styles/sass-pkg-importer.js",
     "tests/build/prerender/http-requests-assets.js",
     "tests/build/prerender/error-with-sourcemaps.js",
     "tests/build/server-rendering/server-routes-*",

tests/legacy-cli/e2e/tests/build/styles/sass-pkg-importer.ts

@@ -0,0 +1,34 @@
+import assert from 'node:assert';
+import { writeFile } from '../../../utils/fs';
+import { getActivePackageManager, uninstallPackage } from '../../../utils/packages';
+import { ng } from '../../../utils/process';
+import { isPrereleaseCli, updateJsonFile } from '../../../utils/project';
+import { appendFile } from 'node:fs/promises';
+import { getGlobalVariable } from '../../../utils/env';
+
+export default async function () {
+  assert(
+    getGlobalVariable('argv')['esbuild'],
+    'This test should not be called in the Webpack suite.',
+  );
+
+  // forcibly remove in case another test doesn't clean itself up
+  await uninstallPackage('@angular/material');
+
+  const isPrerelease = await isPrereleaseCli();
+  const tag = isPrerelease ? '@next' : '';
+  if (getActivePackageManager() === 'npm') {
+    await appendFile('.npmrc', '\nlegacy-peer-deps=true');
+  }
+
+  await ng('add', `@angular/material${tag}`, '--skip-confirmation');
+  await Promise.all([
+    updateJsonFile('angular.json', (workspaceJson) => {
+      const appArchitect = workspaceJson.projects['test-project'].architect;
+      appArchitect.build.options.styles = ['src/styles.scss'];
+    }),
+    writeFile('src/styles.scss', `@use 'pkg:@angular/material' as mat;`),
+  ]);
+
+  await ng('build');
+}