fix(container-breakdown-observer): Fixes an issue where query parsing…

… is not working in Edge.

Microsoft Edge will prepend `all and` to a query in window.matchMedia(). This will now be handled more gracefully and filtered out accordingly.

Closes #1346

libs/barista-components/container-breakpoint-observer/src/query.spec.ts

@@ -91,5 +91,16 @@ describe('Query', () => {
         value: '300px',
       });
     });
+
+    it('should return an element query if its a valid query string but polluted with `all and`', () => {
+      window.matchMedia = () =>
+        ({ media: 'all and (min-width: 300px)' } as any);
+
+      expect(convertQuery('(min-width: 300px)')).toMatchObject({
+        range: 'min',
+        feature: 'width',
+        value: '300px',
+      });
+    });
   });
 });

libs/barista-components/container-breakpoint-observer/src/query.ts

@@ -26,7 +26,7 @@ export interface ElementQuery {
   value: string;
 }
 
-const QUERY_REGEX = /^\s*\(\s*(min|max)-(width|height)\s*:\s*([\w\d]+)\s*\)\s*$/;
+const QUERY_REGEX = /^(?:\s*all\sand)*\s*\(\s*(min|max)-(width|height)\s*:\s*([\w\d]+)\s*\)\s*$/;
 
 /** @internal */
 // tslint:disable-next-line: interface-over-type-literal
@@ -60,6 +60,9 @@ export function convertQuery(query: string): ElementQuery | QueryResultToken {
 
     // To filter out `not all`, corrupt strings or valid media queries
     // we do not support (such as `screen`) we run it through our RegEx.
+    // Additionally this will remove any queries starting with `all and`
+    // as they are obsolete, but added by window.matchMedia(query)
+    // in Microsoft Edge.
     const parts = converted.match(QUERY_REGEX);
 
     return parts