fix(@angular/cli): don't break deployUrl with scheme

Fix angular#5254

Author: filipesilva

packages/@angular/cli/models/webpack-configs/styles.ts

@@ -44,17 +44,23 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
   const cssnanoPlugin = cssnano({ safe: true, autoprefixer: false });
 
   // Convert absolute resource URLs to account for base-href and deploy-url.
-  const baseHref = wco.buildOptions.baseHref;
-  const deployUrl = wco.buildOptions.deployUrl;
+  const baseHref = wco.buildOptions.baseHref || '';
+  const deployUrl = wco.buildOptions.deployUrl || '';
   const postcssUrlOptions = {
     url: (URL: string) => {
       // Only convert root relative URLs, which CSS-Loader won't process into require().
       if (!URL.startsWith('/') || URL.startsWith('//')) {
         return URL;
       }
-      // Join together base-href, deploy-url and the original URL.
-      // Also dedupe multiple slashes into single ones.
-      return `/${baseHref || ''}/${deployUrl || ''}/${URL}`.replace(/\/\/+/g, '/');
+
+      if (deployUrl.match(/:\/\//)) {
+        // If deployUrl contains a scheme, ignore baseHref use deployUrl as is.
+        return `${deployUrl.replace(/\/$/, '')}${URL}`;
+      } else {
+        // Join together base-href, deploy-url and the original URL.
+        // Also dedupe multiple slashes into single ones.
+        return `/${baseHref}/${deployUrl}/${URL}`.replace(/\/\/+/g, '/');
+      }
     }
   };
   const urlPlugin = postcssUrl(postcssUrlOptions);

tests/e2e/tests/build/css-urls.ts

@@ -47,7 +47,14 @@ export default function () {
     .then(() => expectToFail(() => expectFileToExist('dist/component-img-absolute.svg')))
     .then(() => expectFileMatchToExist('./dist', /global-img-relative\.[0-9a-f]{20}\.svg/))
     .then(() => expectFileMatchToExist('./dist', /component-img-relative\.[0-9a-f]{20}\.svg/))
-    // Also check with base-href and deploy-url flags.
+    // Check urls with scheme are used as is.
+    .then(() => ng('build', '--base-href=/base/', '--deploy-url=http://deploy.url/',
+      '--extract-css'))
+    .then(() => expectFileToMatch('dist/styles.bundle.css',
+      /url\(http:\/\/deploy\.url\/global-img-absolute\.svg\)/))
+    .then(() => expectFileToMatch('dist/main.bundle.js',
+      /url\(http:\/\/deploy\.url\/component-img-absolute\.svg\)/))
+    // Check with base-href and deploy-url flags.
     .then(() => ng('build', '--base-href=/base/', '--deploy-url=deploy/',
       '--extract-css', '--aot'))
     .then(() => expectFileToMatch('dist/styles.bundle.css',