From 6c4ec05a4a1a125aefcf678971366bb04364299a Mon Sep 17 00:00:00 2001
From: Victor Berchet <victor@suumit.com>
Date: Mon, 26 Sep 2016 09:55:05 -0700
Subject: [PATCH] fix(ShadowCss): support `[attr="value with space"]`

fixes #6249
---
 modules/@angular/compiler/src/shadow_css.ts   | 28 ++++++++++++++-----
 .../@angular/compiler/test/shadow_css_spec.ts |  1 +
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/modules/@angular/compiler/src/shadow_css.ts b/modules/@angular/compiler/src/shadow_css.ts
index cd06b95147..98d31c4b9f 100644
--- a/modules/@angular/compiler/src/shadow_css.ts
+++ b/modules/@angular/compiler/src/shadow_css.ts
@@ -417,21 +417,35 @@ export class ShadowCss {
       return scopedP;
     };
 
-    const sep = /( |>|\+|~(?!=))\s*/g;
+    const sep = /( |>|\+|~(?!=)|\[|\])\s*/g;
     const scopeAfter = selector.indexOf(_polyfillHostNoCombinator);
 
     let scoped = '';
     let startIndex = 0;
     let res: RegExpExecArray;
+    let inAttributeSelector: boolean = false;
 
     while ((res = sep.exec(selector)) !== null) {
       const separator = res[1];
-      const part = selector.slice(startIndex, res.index).trim();
-      // if a selector appears before :host-context it should not be shimmed as it
-      // matches on ancestor elements and not on elements in the host's shadow
-      const scopedPart = startIndex >= scopeAfter ? _scopeSelectorPart(part) : part;
-      scoped += `${scopedPart} ${separator} `;
-      startIndex = sep.lastIndex;
+      if (separator === '[') {
+        inAttributeSelector = true;
+        scoped += selector.slice(startIndex, res.index).trim() + '[';
+        startIndex = sep.lastIndex;
+      }
+      if (!inAttributeSelector) {
+        const part = selector.slice(startIndex, res.index).trim();
+        // if a selector appears before :host-context it should not be shimmed as it
+        // matches on ancestor elements and not on elements in the host's shadow
+        const scopedPart = startIndex >= scopeAfter ? _scopeSelectorPart(part) : part;
+        scoped += `${scopedPart} ${separator} `;
+        startIndex = sep.lastIndex;
+      } else if (separator === ']') {
+        const part = selector.slice(startIndex, res.index).trim() + ']';
+        const scopedPart = startIndex >= scopeAfter ? _scopeSelectorPart(part) : part;
+        scoped += `${scopedPart} `;
+        startIndex = sep.lastIndex;
+        inAttributeSelector = false;
+      }
     }
     return scoped + _scopeSelectorPart(selector.substring(startIndex));
   }
diff --git a/modules/@angular/compiler/test/shadow_css_spec.ts b/modules/@angular/compiler/test/shadow_css_spec.ts
index e91a271753..c974412dc9 100644
--- a/modules/@angular/compiler/test/shadow_css_spec.ts
+++ b/modules/@angular/compiler/test/shadow_css_spec.ts
@@ -91,6 +91,7 @@ export function main() {
       expect(s('one[attr*="value"] {}', 'a')).toEqual('one[attr*="value"][a] {}');
       expect(s('one[attr|="value"] {}', 'a')).toEqual('one[attr|="value"][a] {}');
       expect(s('one[attr~="value"] {}', 'a')).toEqual('one[attr~="value"][a] {}');
+      expect(s('one[attr="va lue"] {}', 'a')).toEqual('one[attr="va lue"][a] {}');
       expect(s('one[attr] {}', 'a')).toEqual('one[attr][a] {}');
       expect(s('[is="one"] {}', 'a')).toEqual('[is="one"][a] {}');
     });