diff --git a/packages/angular/build/src/tools/esbuild/stylesheets/sass-language.ts b/packages/angular/build/src/tools/esbuild/stylesheets/sass-language.ts index b3972ac407f4..4bccfb3adba4 100644 --- a/packages/angular/build/src/tools/esbuild/stylesheets/sass-language.ts +++ b/packages/angular/build/src/tools/esbuild/stylesheets/sass-language.ts @@ -43,7 +43,8 @@ export const SassStylesheetLanguage = Object.freeze({ 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({ }); 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; diff --git a/tests/legacy-cli/e2e.bzl b/tests/legacy-cli/e2e.bzl index 1bed11a77596..2152f6dcd229 100644 --- a/tests/legacy-cli/e2e.bzl +++ b/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-*", diff --git a/tests/legacy-cli/e2e/tests/build/styles/sass-pkg-importer.ts b/tests/legacy-cli/e2e/tests/build/styles/sass-pkg-importer.ts new file mode 100644 index 000000000000..8fbb6e74310f --- /dev/null +++ b/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'); +}