From 83d94b75045804576685397d359d9ad330bae3a0 Mon Sep 17 00:00:00 2001
From: Victor Berchet <victor@suumit.com>
Date: Fri, 30 Sep 2016 13:20:48 -0700
Subject: [PATCH] fix(ShadowCss): support quoted attribute values

fixes #6085
---
 modules/@angular/compiler/src/shadow_css.ts       | 12 ++++++------
 modules/@angular/compiler/test/shadow_css_spec.ts |  9 +++++++++
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/modules/@angular/compiler/src/shadow_css.ts b/modules/@angular/compiler/src/shadow_css.ts
index 0abf47876a..55ce7651c2 100644
--- a/modules/@angular/compiler/src/shadow_css.ts
+++ b/modules/@angular/compiler/src/shadow_css.ts
@@ -174,7 +174,7 @@ export class ShadowCss {
   private _insertPolyfillDirectivesInCssText(cssText: string): string {
     // Difference with webcomponents.js: does not handle comments
     return cssText.replace(
-        _cssContentNextSelectorRe, function(...m: string[]) { return m[1] + '{'; });
+        _cssContentNextSelectorRe, function(...m: string[]) { return m[2] + '{'; });
   }
 
   /*
@@ -196,7 +196,7 @@ export class ShadowCss {
     // Difference with webcomponents.js: does not handle comments
     return cssText.replace(_cssContentRuleRe, (...m: string[]) => {
       const rule = m[0].replace(m[1], '').replace(m[2], '');
-      return m[3] + rule;
+      return m[4] + rule;
     });
   }
 
@@ -242,7 +242,7 @@ export class ShadowCss {
     let m: RegExpExecArray;
     _cssContentUnscopedRuleRe.lastIndex = 0;
     while ((m = _cssContentUnscopedRuleRe.exec(cssText)) !== null) {
-      const rule = m[0].replace(m[2], '').replace(m[1], m[3]);
+      const rule = m[0].replace(m[2], '').replace(m[1], m[4]);
       r += rule + '\n\n';
     }
     return r;
@@ -458,10 +458,10 @@ export class ShadowCss {
   }
 }
 const _cssContentNextSelectorRe =
-    /polyfill-next-selector[^}]*content:[\s]*?['"](.*?)['"][;\s]*}([^{]*?){/gim;
-const _cssContentRuleRe = /(polyfill-rule)[^}]*(content:[\s]*['"](.*?)['"])[;\s]*[^}]*}/gim;
+    /polyfill-next-selector[^}]*content:[\s]*?(['"])(.*?)\1[;\s]*}([^{]*?){/gim;
+const _cssContentRuleRe = /(polyfill-rule)[^}]*(content:[\s]*(['"])(.*?)\3)[;\s]*[^}]*}/gim;
 const _cssContentUnscopedRuleRe =
-    /(polyfill-unscoped-rule)[^}]*(content:[\s]*['"](.*?)['"])[;\s]*[^}]*}/gim;
+    /(polyfill-unscoped-rule)[^}]*(content:[\s]*(['"])(.*?)\3)[;\s]*[^}]*}/gim;
 const _polyfillHost = '-shadowcsshost';
 // note: :host-context pre-processed to -shadowcsshostcontext.
 const _polyfillHostContext = '-shadowcsscontext';
diff --git a/modules/@angular/compiler/test/shadow_css_spec.ts b/modules/@angular/compiler/test/shadow_css_spec.ts
index 63b1e8845a..cc8f1de454 100644
--- a/modules/@angular/compiler/test/shadow_css_spec.ts
+++ b/modules/@angular/compiler/test/shadow_css_spec.ts
@@ -128,6 +128,9 @@ export function main() {
 
       css = s('polyfill-next-selector {content: "x > y"} z {}', 'a');
       expect(css).toEqual('x[a] > y[a]{}');
+
+      css = s(`polyfill-next-selector {content: 'button[priority="1"]'} z {}`, 'a');
+      expect(css).toEqual('button[priority="1"][a] {}');
     });
 
     it('should support polyfill-unscoped-rule', () => {
@@ -136,6 +139,9 @@ export function main() {
 
       css = s('polyfill-unscoped-rule {content: "#menu > .bar";color: blue;}', 'a');
       expect(css).toContain('#menu > .bar {;color:blue;}');
+
+      css = s(`polyfill-unscoped-rule {content: 'button[priority="1"]'}`, 'a');
+      expect(css).toContain('button[priority="1"] {}');
     });
 
     it('should support multiple instances polyfill-unscoped-rule', () => {
@@ -153,6 +159,9 @@ export function main() {
 
       css = s('polyfill-rule {content: ":host.foo .bar";color:blue;}', 'a', 'a-host');
       expect(css).toEqual('.foo[a-host] .bar[a] {;color:blue;}');
+
+      css = s(`polyfill-rule {content: 'button[priority="1"]'}`, 'a', 'a-host');
+      expect(css).toEqual('button[priority="1"][a] {}');
     });
 
     it('should handle ::shadow', () => {