fix(ShadowCss): support [attr="value with space"]

vicb · chuckjaz · commit bd012efcc417 · 2016-10-05T15:33:16.000-07:00
fixes angular#6249
diff --git 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
@@ -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] {}');
     });
