asnowwolf · Jan 29, 2017
diff --git a/modules/@angular/compiler/src/shadow_css.ts b/modules/@angular/compiler/src/shadow_css.ts
@@ -146,10 +146,18 @@ export class ShadowCss {
   * - hostSelector is the attribute added to the host itself.
   */
   shimCssText(cssText: string, selector: string, hostSelector: string = ''): string {
-    const sourceMappingUrl: string = extractSourceMappingUrl(cssText);
+    const commentsWithHash: string[] = extractCommentsWithHash(cssText);
     cssText = stripComments(cssText);
     cssText = this._insertDirectives(cssText);
-    return this._scopeCssText(cssText, selector, hostSelector) + sourceMappingUrl;
+
+    const scopedCssText = this._scopeCssText(cssText, selector, hostSelector);
+    if (!commentsWithHash) {
+      return scopedCssText;
+    }
+    return [scopedCssText]
+        .concat(containsSourceUrl(commentsWithHash) ? [] : ['/*# sourceURL=any-name.css */'])
+        .concat(commentsWithHash)
+        .join('\n');
   }
 
   private _insertDirectives(cssText: string): string {
@@ -313,7 +321,7 @@ export class ShadowCss {
   /*
    * Convert combinators like ::shadow and pseudo-elements like ::content
    * by replacing with space.
-  */
+   */
   private _convertShadowDOMSelectors(cssText: string): string {
     return _shadowDOMSelectorsRe.reduce((result, pattern) => result.replace(pattern, ' '), cssText);
   }
@@ -525,12 +533,16 @@ function stripComments(input: string): string {
   return input.replace(_commentRe, '');
 }
 
-// all comments except inline source mapping
-const _sourceMappingUrlRe = /\/\*\s*#\s*sourceMappingURL=[\s\S]+?\*\//;
+const _commentWithHashRe = /\/\*#[\s\S]+?\*\//g;
+
+function extractCommentsWithHash(input: string): string[] {
+  return input.match(_commentWithHashRe);
+}
 
-function extractSourceMappingUrl(input: string): string {
-  const matcher = input.match(_sourceMappingUrlRe);
-  return matcher ? matcher[0] : '';
+const _sourceUrlRe = /\/\*#\s*sourceURL=[\s\S]+?\*\//;
+function containsSourceUrl(hashComments: string[]): boolean {
+  return hashComments.reduce(
+      (result, comment) => { return result || _sourceUrlRe.test(comment); }, false);
 }
 
 const _ruleRe = /(\s*)([^;\{\}]+?)(\s*)((?:{%BLOCK%}?\s*;?)|(?:\s*;))/g;

diff --git a/modules/@angular/compiler/src/style_url_resolver.ts b/modules/@angular/compiler/src/style_url_resolver.ts
@@ -29,19 +29,20 @@ export function extractStyleUrls(
     resolver: UrlResolver, baseUrl: string, cssText: string): StyleWithImports {
   const foundUrls: string[] = [];
 
-  const modifiedCssText =
-      cssText.replace(CSS_COMMENT_REGEXP, '').replace(CSS_IMPORT_REGEXP, (...m: string[]) => {
-        const url = m[1] || m[2];
-        if (!isStyleUrlResolvable(url)) {
-          // Do not attempt to resolve non-package absolute URLs with URI scheme
-          return m[0];
-        }
-        foundUrls.push(resolver.resolve(baseUrl, url));
-        return '';
-      });
+  const modifiedCssText = cssText.replace(CSS_COMMENT_WITH_NO_SOURCE_MAP_REGEXP, '')
+                              .replace(CSS_IMPORT_REGEXP, (...m: string[]) => {
+                                const url = m[1] || m[2];
+                                if (!isStyleUrlResolvable(url)) {
+                                  // Do not attempt to resolve non-package absolute URLs with URI
+                                  // scheme
+                                  return m[0];
+                                }
+                                foundUrls.push(resolver.resolve(baseUrl, url));
+                                return '';
+                              });
   return new StyleWithImports(modifiedCssText, foundUrls);
 }
 
 const CSS_IMPORT_REGEXP = /@import\s+(?:url\()?\s*(?:(?:['"]([^'"]*))|([^;\)\s]*))[^;]*;?/g;
-const CSS_COMMENT_REGEXP = /\/\*.+?\*\//g;
+const CSS_COMMENT_WITH_NO_SOURCE_MAP_REGEXP = /\/\*[^#].*?\*\//g;
 const URL_WITH_SCHEMA_REGEXP = /^([^:/?#]+):/;
diff --git a/modules/@angular/compiler/test/shadow_css_spec.ts b/modules/@angular/compiler/test/shadow_css_spec.ts
@@ -258,10 +258,14 @@ export function main() {
        () => { expect(s('/* \n */b {c}', 'a')).toEqual('b[a] {c}'); });
 
     it('should keep sourceMappingURL comments', () => {
-      expect(s('b {c}/*# sourceMappingURL=data:x */', 'a'))
-          .toEqual('b[a] {c}/*# sourceMappingURL=data:x */');
-      expect(s('b {c}/* #sourceMappingURL=data:x */', 'a'))
-          .toEqual('b[a] {c}/* #sourceMappingURL=data:x */');
+      expect(s('b {c}\n/*# sourceMappingURL=data:x */', 'a'))
+          .toEqual('b[a] {c}/*# sourceURL=any-name.css *//*# sourceMappingURL=data:x */');
+    });
+    it('should add sourceURL placeholder if and only if it does not exist', () => {
+      expect(s('b {c}\n/*# sourceMappingURL=data:x */', 'a'))
+          .toEqual('b[a] {c}/*# sourceURL=any-name.css *//*# sourceMappingURL=data:x */');
+      expect(s('b {c}\n/*# sourceURL=my-name.scss */\n/*# sourceMappingURL=data:x */', 'a'))
+          .toEqual('b[a] {c}/*# sourceURL=my-name.scss *//*# sourceMappingURL=data:x */');
     });
   });
 

diff --git a/modules/@angular/compiler/test/style_url_resolver_spec.ts b/modules/@angular/compiler/test/style_url_resolver_spec.ts
@@ -47,6 +47,15 @@ export function main() {
       expect(styleWithImports.styleUrls).not.toContain('http://ng.io/2.css');
     });
 
+    it('should keep /*# ... */ comments', () => {
+      const css =
+          `@import '1.css';\n/*@import '2.css';*/\n/*# sourceURL=2.scss */\n/*# sourceMappingURL=data:x */`;
+      const styleWithImports = extractStyleUrls(urlResolver, 'http://ng.io', css);
+      expect(styleWithImports.style.trim())
+          .toEqual('/*# sourceURL=2.scss */\n/*# sourceMappingURL=data:x */');
+      expect(styleWithImports.styleUrls).not.toContain('http://ng.io/2.css');
+    });
+
     it('should extract "@import url()" urls', () => {
       const css = `
       @import url('3.css');