From c4402b1bd32cdb0cdd7aeab14239b57ee700d361 Mon Sep 17 00:00:00 2001
From: Alan Agius <alanagius@google.com>
Date: Mon, 22 Aug 2022 06:47:34 +0000
Subject: [PATCH] fix(@angular-devkit/build-angular): correctly handle
 parenthesis in url

PR #23691 introduced a regression that caused paranthesis in url not to be handled correctly.

This change correct this behaviour and adds a test case to valid this.

Closes #23773

(cherry picked from commit 147f8c3ebbad883826da1a94f09054938ed9b534)
---
 .../src/builders/browser/specs/styles_spec.ts    | 16 ++++++++++++++++
 .../src/webpack/plugins/postcss-cli-resources.ts |  5 ++---
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/packages/angular_devkit/build_angular/src/builders/browser/specs/styles_spec.ts b/packages/angular_devkit/build_angular/src/builders/browser/specs/styles_spec.ts
index 08c4fb6c4673..2d5cc91a3269 100644
--- a/packages/angular_devkit/build_angular/src/builders/browser/specs/styles_spec.ts
+++ b/packages/angular_devkit/build_angular/src/builders/browser/specs/styles_spec.ts
@@ -706,4 +706,20 @@ describe('Browser Builder styles', () => {
     const result = await browserBuild(architect, host, target, { styles: ['src/styles.css'] });
     expect(await result.files['styles.css']).toContain(svgData);
   });
+
+  it('works when Data URI has parenthesis', async () => {
+    const svgData =
+      '"data:image/svg+xml;charset=utf-8,<svg>' +
+      `<mask id='clip'><g><circle mask='url(%23clip)' cx='11.5' cy='11.5' r='9.25'/><use xlink:href='#text' mask='url(#clip)'/></g>` +
+      '</svg>"';
+
+    host.writeMultipleFiles({
+      'src/styles.css': `
+        div { background: url(${svgData}) }
+      `,
+    });
+
+    const result = await browserBuild(architect, host, target, { styles: ['src/styles.css'] });
+    expect(await result.files['styles.css']).toContain(svgData);
+  });
 });
diff --git a/packages/angular_devkit/build_angular/src/webpack/plugins/postcss-cli-resources.ts b/packages/angular_devkit/build_angular/src/webpack/plugins/postcss-cli-resources.ts
index ed78cb632a5b..f130d6c10e75 100644
--- a/packages/angular_devkit/build_angular/src/webpack/plugins/postcss-cli-resources.ts
+++ b/packages/angular_devkit/build_angular/src/webpack/plugins/postcss-cli-resources.ts
@@ -155,7 +155,7 @@ export default function (options?: PostcssCliResourcesOptions): Plugin {
       }
 
       const value = decl.value;
-      const urlRegex = /url(?:\(\s*['"]?)(.*?)(?:['"]?\s*\))/g;
+      const urlRegex = /url(?:\(\s*(['"]?))(.*?)(?:\1\s*\))/g;
       const segments: string[] = [];
 
       let match;
@@ -166,9 +166,8 @@ export default function (options?: PostcssCliResourcesOptions): Plugin {
       const inputFile = decl.source && decl.source.input.file;
       const context = (inputFile && path.dirname(inputFile)) || loader.context;
 
-      // eslint-disable-next-line no-cond-assign
       while ((match = urlRegex.exec(value))) {
-        const originalUrl = match[1];
+        const originalUrl = match[2];
         let processedUrl;
         try {
           processedUrl = await process(originalUrl, context, resourceCache);