fix(@angular-devkit/build-angular): error when using protocol-relative url

Fixes #12648

Author: alan-agius4

packages/angular_devkit/build_angular/src/angular-cli-files/plugins/postcss-cli-resources.ts

@@ -54,10 +54,11 @@ export default postcss.plugin('postcss-cli-resources', (options: PostcssCliResou
   const dedupeSlashes = (url: string) => url.replace(/\/\/+/g, '/');
 
   const process = async (inputUrl: string, context: string, resourceCache: Map<string, string>) => {
-    // If root-relative or absolute, leave as is
-    if (inputUrl.match(/^(?:\w+:\/\/|data:|chrome:|#)/)) {
+    // If root-relative, absolute or protocol relative url, leave as is
+    if (/^((?:\w+:)?\/\/|data:|chrome:|#)/.test(inputUrl)) {
       return inputUrl;
     }
+
     // If starts with a caret, remove and return remainder
     // this supports bypassing asset processing
     if (inputUrl.startsWith('^')) {
@@ -74,7 +75,7 @@ export default postcss.plugin('postcss-cli-resources', (options: PostcssCliResou
       inputUrl = inputUrl.substr(1);
     }
 
-    if (inputUrl.startsWith('/') && !inputUrl.startsWith('//')) {
+    if (inputUrl.startsWith('/')) {
       let outputUrl = '';
       if (deployUrl.match(/:\/\//) || deployUrl.startsWith('/')) {
         // If deployUrl is absolute or root relative, ignore baseHref & use deployUrl as is.

packages/angular_devkit/build_angular/test/browser/styles_spec_large.ts

@@ -503,4 +503,25 @@ describe('Browser Builder styles', () => {
       tap((buildEvent) => expect(buildEvent.success).toBe(true)),
     ).toPromise().then(done, done.fail);
   });
+
+  it('supports Protocol-relative Url', (done) => {
+    host.writeMultipleFiles({
+      'src/styles.css': `
+        body {
+          background-image: url('//cdn.com/classic-bg.jpg');
+        }
+      `,
+    });
+
+    const overrides = { extractCss: true, optimization: true };
+    runTargetSpec(host, browserTargetSpec, overrides).pipe(
+      tap((buildEvent) => {
+        expect(buildEvent.success).toBe(true);
+
+        const filePath = './dist/styles.css';
+        const content = virtualFs.fileBufferToString(host.scopedSync().read(normalize(filePath)));
+        expect(content).toContain('background-image:url(//cdn.com/classic-bg.jpg)');
+      }),
+    ).toPromise().then(done, done.fail);
+  });
 });