fix(@angular/cli): improve processing multi-line url() CSS rules

Author: clydin

packages/@angular/cli/plugins/postcss-cli-resources.ts

@@ -121,34 +121,39 @@ export default postcss.plugin('postcss-cli-resources', (options: PostcssCliResou
 
     return Promise.all(urlDeclarations.map(async decl => {
       const value = decl.value;
-      const urlRegex = /url\(\s*['"]?([ \S]+?)['"]??\s*\)/g;
+      const urlRegex = /url\(\s*(?:"([^"]+)"|'([^']+)'|(.+))\s*\)/g;
       const segments: string[] = [];
 
       let match;
       let lastIndex = 0;
       let modified = false;
       // tslint:disable-next-line:no-conditional-assignment
       while (match = urlRegex.exec(value)) {
+        const originalUrl = match[1] || match[2] || match[3];
         let processedUrl;
         try {
-          processedUrl = await process(match[1], resourceCache);
+          processedUrl = await process(originalUrl, resourceCache);
         } catch (err) {
-          loader.emitError(decl.error(err.message, { word: match[1] }).toString());
+          loader.emitError(decl.error(err.message, { word: originalUrl }).toString());
           continue;
         }
 
-        if (lastIndex !== match.index) {
+        if (lastIndex < match.index) {
           segments.push(value.slice(lastIndex, match.index));
         }
 
-        if (!processedUrl || match[1] === processedUrl) {
+        if (!processedUrl || originalUrl === processedUrl) {
           segments.push(match[0]);
         } else {
           segments.push(wrapUrl(processedUrl));
           modified = true;
         }
 
-        lastIndex = urlRegex.lastIndex;
+        lastIndex = match.index + match[0].length;
+      }
+
+      if (lastIndex < value.length) {
+        segments.push(value.slice(lastIndex));
       }
 
       if (modified) {

tests/e2e/tests/build/styles/inline-urls.ts

@@ -22,13 +22,14 @@ export default function () {
       'src/styles.scss': `
         $fa-font-path: "~font-awesome/fonts";
         @import "~font-awesome/scss/font-awesome";
-        h1 { background: url('./assets/large.png'); }
+        h1 { background: url('./assets/large.png'),
+                         linear-gradient(to bottom, #0e40fa 25%, #0654f4 75%); }
         h2 { background: url('./assets/small.svg'); }
-        p  { background: url('./assets/small-id.svg#testID'); }
+        p  { background: url(./assets/small-id.svg#testID); }
       `,
       'src/app/app.component.css': `
         h3 { background: url('../assets/small.svg'); }
-        h4 { background: url('../assets/large.png'); }
+        h4 { background: url("../assets/large.png"); }
       `,
       'src/assets/small.svg': imgSvg,
       'src/assets/small-id.svg': imgSvg
@@ -46,15 +47,15 @@ export default function () {
     })
     // Check paths are correctly generated.
     .then(() => expectFileToMatch('dist/styles.bundle.css',
-      /url\([\'"]?large\.[0-9a-f]{20}\.png[\'"]?\)/))
+      /url\(['"]?large\.[0-9a-f]{20}\.png['"]?\),\s+linear-gradient\(to bottom, #0e40fa 25%, #0654f4 75%\);/))
     .then(() => expectFileToMatch('dist/styles.bundle.css',
-      /url\(\\?[\'"]data:image\/svg\+xml/))
+      /url\(\\?['"]data:image\/svg\+xml/))
     .then(() => expectFileToMatch('dist/styles.bundle.css',
-      /url\([\'"]?small-id\.[0-9a-f]{20}\.svg#testID[\'"]?\)/))
+      /url\(['"]?small-id\.[0-9a-f]{20}\.svg#testID['"]?\)/))
     .then(() => expectFileToMatch('dist/main.bundle.js',
-      /url\(\\?[\'"]data:image\/svg\+xml/))
+      /url\(\\?['"]data:image\/svg\+xml/))
     .then(() => expectFileToMatch('dist/main.bundle.js',
-      /url\((?:[\'"]|\\')?large\.[0-9a-f]{20}\.png(?:[\'"]|\\')?\)/))
+      /url\((?:['"]|\\')?large\.[0-9a-f]{20}\.png(?:['"]|\\')?\)/))
     // Check files are correctly created.
     .then(() => expectToFail(() => expectFileToExist('dist/small.svg')))
     .then(() => expectFileMatchToExist('./dist', /large\.[0-9a-f]{20}\.png/))