From 7d253e9cd0bb6df829fd4229465f4334d5c134bb Mon Sep 17 00:00:00 2001
From: Alan Agius <alanagius@google.com>
Date: Thu, 23 May 2024 08:24:33 +0000
Subject: [PATCH] fix(@angular/build): avoid rebasing URLs with function calls

Function calls can alter the URL path, leading to issues during URL parsing.

Closes: #27688
(cherry picked from commit a82a7414bcba79653bb0a3d00c791709cee7681d)
---
 .../build/src/tools/sass/rebasing-importer.ts |  5 +++++
 .../e2e/tests/build/styles/bootstrap.ts       | 22 +++++++++++++++++++
 2 files changed, 27 insertions(+)
 create mode 100644 tests/legacy-cli/e2e/tests/build/styles/bootstrap.ts

diff --git a/packages/angular/build/src/tools/sass/rebasing-importer.ts b/packages/angular/build/src/tools/sass/rebasing-importer.ts
index a5af1f948800..533cefd0bdb8 100644
--- a/packages/angular/build/src/tools/sass/rebasing-importer.ts
+++ b/packages/angular/build/src/tools/sass/rebasing-importer.ts
@@ -93,6 +93,11 @@ abstract class UrlRebasingImporter implements Importer<'sync'> {
         continue;
       }
 
+      // Skip if value is value contains a function call
+      if (/#\{.+\(.+\)\}/.test(value)) {
+        continue;
+      }
+
       // Sass variable usage either starts with a `$` or contains a namespace and a `.$`
       const valueNormalized = value[0] === '$' || /^\w+\.\$/.test(value) ? `#{${value}}` : value;
       const rebasedPath =
diff --git a/tests/legacy-cli/e2e/tests/build/styles/bootstrap.ts b/tests/legacy-cli/e2e/tests/build/styles/bootstrap.ts
new file mode 100644
index 000000000000..ec8c9f7936be
--- /dev/null
+++ b/tests/legacy-cli/e2e/tests/build/styles/bootstrap.ts
@@ -0,0 +1,22 @@
+import { writeMultipleFiles } from '../../../utils/fs';
+import { installPackage } from '../../../utils/packages';
+import { ng } from '../../../utils/process';
+import { updateJsonFile } from '../../../utils/project';
+
+export default async function () {
+  // Install bootstrap
+  await installPackage('bootstrap@5');
+
+  await writeMultipleFiles({
+    'src/styles.scss': `
+      @import 'bootstrap/scss/bootstrap';
+    `,
+  });
+
+  await updateJsonFile('angular.json', (workspaceJson) => {
+    const appArchitect = workspaceJson.projects['test-project'].architect;
+    appArchitect.build.options.styles = [{ input: 'src/styles.scss' }];
+  });
+
+  await ng('build');
+}