diff --git a/libs/barista-components/container-breakpoint-observer/src/query.spec.ts b/libs/barista-components/container-breakpoint-observer/src/query.spec.ts index ed5178288a..825896d2a3 100644 --- a/libs/barista-components/container-breakpoint-observer/src/query.spec.ts +++ b/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', + }); + }); }); }); diff --git a/libs/barista-components/container-breakpoint-observer/src/query.ts b/libs/barista-components/container-breakpoint-observer/src/query.ts index a16e328793..94fd6957f3 100644 --- a/libs/barista-components/container-breakpoint-observer/src/query.ts +++ b/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