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

@@ -43,7 +43,8 @@ export const SassStylesheetLanguage = Object.freeze<StylesheetLanguage>({
         resolveDir = dirname(fileURLToPath(options.containingUrl));
       }
 
-      const result = await build.resolve(url, {
+      const path = url.startsWith('pkg:') ? url.slice(4) : url;
+      const result = await build.resolve(path, {
         kind: 'import-rule',
         resolveDir,
       });
@@ -56,8 +57,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;
 

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/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');
+}