fix(@angular-devkit/build-angular): correctly handle data URIs with escaped quotes in stylesheets

alan-agius4 · dgp1130 · commit d0a0c597cd09 · 2022-08-04T11:25:27.000-07:00
Previously, the RegExp didn't correctly handle cases where data URIs had escaped quotes like the below ```css url("data:image/svg+xml;charset=utf-8,<svg width=/"16/" height=/"15/"></svg>") ``` Closes #23680 (cherry picked from commit 70bc354)
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
@@ -679,4 +679,17 @@ describe('Browser Builder styles', () => {
 
     await browserBuild(architect, host, target, { styles: ['src/styles.css'] });
   });
+
+  it('works when Data URI has escaped quote', async () => {
+    const svgData = `"data:image/svg+xml;charset=utf-8,<svg width=/"16/" height=/"15/"></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
@@ -155,7 +155,7 @@ export default function (options?: PostcssCliResourcesOptions): Plugin {
       }
 
       const value = decl.value;
-      const urlRegex = /url\(\s*(?:"([^"]+)"|'([^']+)'|(.+?))\s*\)/g;
+      const urlRegex = /url(?:\(\s*['"]?)(.*?)(?:['"]?\s*\))/g;
       const segments: string[] = [];
 
       let match;
@@ -168,7 +168,7 @@ export default function (options?: PostcssCliResourcesOptions): Plugin {
 
       // eslint-disable-next-line no-cond-assign
       while ((match = urlRegex.exec(value))) {
-        const originalUrl = match[1] || match[2] || match[3];
+        const originalUrl = match[1];
         let processedUrl;
         try {
           processedUrl = await process(originalUrl, context, resourceCache);
