Implement parsing of media query lists

Ref. #107
Siteimprove · Feb 27, 2019 · 36b5bb1 · 36b5bb1
1 parent e7825e8
commit 36b5bb1
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 4 deletions.
diff --git a/packages/alfa-css/src/grammars/media.ts b/packages/alfa-css/src/grammars/media.ts
@@ -12,6 +12,7 @@ import {
 import { Units } from "../units";
 import { Value, Values } from "../values";
 
+const { isArray } = Array;
 const { assign } = Object;
 
 /**
@@ -85,6 +86,7 @@ function mediaQuery(stream: Stream<Token>): MediaQuery | null {
   }
 
   stream.accept(token => token.type !== TokenType.Comma);
+
   return null;
 }
 
@@ -330,7 +332,11 @@ function mediaFeature(stream: Stream<Token>): MediaFeature | null {
   return null;
 }
 
-type Production<T extends Token> = Lang.Production<Token, MediaQuery, T>;
+type Production<T extends Token> = Lang.Production<
+  Token,
+  MediaQuery | Array<MediaQuery>,
+  T
+>;
 
 const ident: Production<Tokens.Ident> = {
   token: TokenType.Ident,
@@ -348,7 +354,29 @@ const parenthesis: Production<Tokens.Parenthesis> = {
   }
 };
 
-export const MediaGrammar: Grammar<Token, MediaQuery> = new Grammar(
-  [skip(TokenType.Whitespace), ident, parenthesis],
+const comma: Production<Tokens.Comma> = {
+  token: TokenType.Comma,
+  infix: (token, stream, expression, left) => {
+    const right = expression();
+
+    if (!isArray(left)) {
+      left = [left];
+    }
+
+    if (isArray(right)) {
+      left.push(...right);
+    } else if (right !== null) {
+      left.push(right);
+    }
+
+    return left;
+  }
+};
+
+export const MediaGrammar: Grammar<
+  Token,
+  MediaQuery | Array<MediaQuery>
+> = new Grammar(
+  [skip(TokenType.Whitespace), ident, parenthesis, comma],
   () => null
 );
diff --git a/packages/alfa-css/test/grammars/media.spec.ts b/packages/alfa-css/test/grammars/media.spec.ts
@@ -5,7 +5,11 @@ import { MediaGrammar } from "../../src/grammars/media";
 import { MediaOperator, MediaQuery } from "../../src/types";
 import { Values } from "../../src/values";
 
-function media(t: Assertions, input: string, expected: MediaQuery) {
+function media(
+  t: Assertions,
+  input: string,
+  expected: MediaQuery | Array<MediaQuery>
+) {
   const lexer = lex(input, Alphabet);
   const parser = parse(lexer.result, MediaGrammar);
 
@@ -73,6 +77,20 @@ test("Can parse a media type and feature", t => {
   });
 });
 
+test("Can parse a list of media types and a feature", t => {
+  media(t, "typeA, typeB and (feature)", [
+    {
+      type: "typeA"
+    },
+    {
+      type: "typeB",
+      condition: {
+        features: [{ name: "feature" }]
+      }
+    }
+  ]);
+});
+
 test("Can parse multiple media features separated by and", t => {
   media(t, "(foo) and (bar)", {
     condition: {

diff --git a/packages/alfa-dom/test/fulfills.spec.ts b/packages/alfa-dom/test/fulfills.spec.ts
@@ -40,3 +40,7 @@ test("Checks fulfillment of a min-width media feature", t => {
   t(fulfills(device, mediaRule("(min-width: 720px)")));
   t(fulfills(device, mediaRule("(min-width: 719px)")));
 });
+
+test("Checks fulfillment of a media query list", t => {
+  t(fulfills(device, mediaRule("print, screen and (min-width: 721px)")));
+});