@react-x11/components 0.12.0 → 0.14.0

package/dist/html/css/parse.d.ts

@@ -34,10 +34,22 @@ export interface Stylesheet {
      *  resource seam and splices the result in ahead of this sheet. Absolute
      *  when the sheet was parsed with a base. */
     imports: string[];
+    /** Each import's media query list, where it has one: the condition the
+     *  sheet it brings in is under, as though an `@media` block were around
+     *  all of it (CSS Cascade 4, 2). Null for an import with none. */
+    importConditions: (MediaCondition[] | null)[];
     /** Every width a `@media` rule in this sheet switches on. The renderer
      *  keeps these so a resize can tell "the layout changed" from "the
      *  *cascade* changed", and restyle only when it crossed one. */
     breakpoints: number[];
+    /** Whether a `@media` rule in this sheet tests the viewport's height,
+     *  which makes a document restyle when the height moves, as a `vh`
+     *  does. */
+    readsHeight?: boolean;
+    /** Whether one tests its aspect ratio, which a width that crosses no
+     *  breakpoint can change: the document restyles as one with a `vw`
+     *  does. */
+    readsWidth?: boolean;
     /** The `@font-face` rules, in order (see `fonts.ts`). */
     fontFaces: FontFaceRule[];
     /** `@counter-style` rules, in order: a name and its descriptors, which
@@ -56,8 +68,9 @@ export interface Stylesheet {
 export interface FontFaceRule {
     /** The family as the document names it, unquoted. */
     family: string;
-    /** The `url()`s of `src`, in order, each with its `format()` hint
-     *  lowercased; `local()` entries are left out. */
+    /** The entries of `src`, in order, which is the order they are tried in:
+     *  a `url()` with its `format()` hint lowercased, or the name a `local()`
+     *  asks the system for. */
     sources: FontFaceSource[];
     /** The weights the face covers: `[400, 400]` for a static regular, a
      *  range for a variable face. */
@@ -68,16 +81,34 @@ export interface FontFaceRule {
     /** The `@media` blocks the rule sits under, as a style rule's. */
     media: MediaCondition[][] | null;
 }
-export interface FontFaceSource {
+export type FontFaceSource = {
     url: string;
     format: string | null;
 }
-/** The tests this evaluates live: a width, a colour scheme, or both.
+/** `local(Arial)`: a face the system has, by name and unquoted. */
+ | {
+    local: string;
+};
+/** The tests this evaluates live: a width, a height, a colour scheme.
  *  Anything else — `orientation`, `print`, `prefers-reduced-motion` — is
  *  decided once, at parse time, by `staticPass`. */
 export interface MediaCondition {
     min?: number;
     max?: number;
+    /** The viewport's height, as `min`/`max` its width: `min-height`,
+     *  `max-height` and a range on `height` (Media Queries 4, 4.2). */
+    minHeight?: number;
+    maxHeight?: number;
+    /** The display's resolution in dots per CSS pixel, its scale: `min-`
+     *  and `max-resolution`, and WebKit's `-webkit-min-device-pixel-ratio`,
+     *  which a design writes to swap in its high-DPI images. */
+    minResolution?: number;
+    maxResolution?: number;
+    /** The viewport's width over its height: `aspect-ratio` and its `min-`
+     *  and `max-`, the device's the viewport's too, and `orientation`, which
+     *  is landscape where the width is the greater. */
+    minAspect?: number;
+    maxAspect?: number;
     /** `prefers-color-scheme`, answered from the palette in force. */
     scheme?: 'light' | 'dark';
     /** Set when the query could not be evaluated as a width or scheme test:
@@ -106,7 +137,12 @@ layers?: Map<string, number>,
 /** The URL the sheet's own relative URLs resolve against — its own, or
  *  the document's for a `<style>` — or null to leave them as written.
  *  Every `url()`, `@import` and `@font-face` source comes out absolute. */
-base?: string | null): Stylesheet;
+base?: string | null, 
+/** The media queries the whole sheet is under, outermost first: the ones
+ *  of the `@import` that brought it in, and of the imports that brought
+ *  that sheet in. Every rule and face in it is under them, as one inside
+ *  an `@media` block is under the block's. */
+under?: MediaCondition[][] | null): Stylesheet;
 /**
  * Parse a declaration block — also the parser for a `style=""` attribute,
  * which is the same grammar with no braces around it. CSS Syntax's list of
@@ -186,5 +222,10 @@ export declare function parseMediaQuery(prelude: string): MediaCondition[];
 export declare function supportsCondition(prelude: string): boolean | null;
 /** Whether a rule's `@media` blocks all hold at this viewport width, under
  *  this colour scheme. */
-export declare function mediaMatches(media: MediaCondition[][] | null, width: number, scheme?: 'light' | 'dark'): boolean;
+export declare function mediaMatches(media: MediaCondition[][] | null, width: number, scheme?: 'light' | 'dark', 
+/** The viewport's height in CSS pixels; a test of it holds at no height
+ *  where none is given. */
+height?: number, 
+/** The display's scale, device pixels to the CSS pixel. */
+resolution?: number): boolean;
 //# sourceMappingURL=parse.d.ts.map

package/dist/html/css/parse.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"parse.d.ts","sourceRoot":"","sources":["../../../src/html/css/parse.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"parse.d.ts","sourceRoot":"","sources":["../../../src/html/css/parse.ts"],"names":[],"mappings":"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"}

package/dist/html/css/parse.js

@@ -56,16 +56,41 @@ layers = new Map(),
 /** The URL the sheet's own relative URLs resolve against — its own, or
  *  the document's for a `<style>` — or null to leave them as written.
  *  Every `url()`, `@import` and `@font-face` source comes out absolute. */
-base = null) {
+base = null, 
+/** The media queries the whole sheet is under, outermost first: the ones
+ *  of the `@import` that brought it in, and of the imports that brought
+ *  that sheet in. Every rule and face in it is under them, as one inside
+ *  an `@media` block is under the block's. */
+under = null) {
     text = withoutComments(text);
     const sheet = {
         rules: [],
         imports: [],
+        importConditions: [],
         breakpoints: [],
         fontFaces: [],
     };
     let order = startOrder;
     const breakpoints = new Set();
+    /** What a media query list tests that a resize has to restyle for: the
+     *  widths it changes its mind at, and whether it reads the height. */
+    const note = (conditions) => {
+        for (const c of conditions) {
+            if (c.min !== undefined)
+                breakpoints.add(c.min);
+            if (c.max !== undefined)
+                breakpoints.add(c.max + MAX_EDGE);
+            if (c.minHeight !== undefined || c.maxHeight !== undefined) {
+                sheet.readsHeight = true;
+            }
+            if (c.minAspect !== undefined || c.maxAspect !== undefined) {
+                sheet.readsHeight = true;
+                sheet.readsWidth = true;
+            }
+        }
+    };
+    for (const conditions of under ?? [])
+        note(conditions);
     // `@import` counts only ahead of every other rule, `@charset` aside
     let importsAllowed = true;
     /** A layer's rank, named for the first time if it has not been. */
@@ -103,10 +128,12 @@ base = null) {
                 if (name === 'charset')
                     continue;
                 if (name === 'import') {
-                    if (importsAllowed && media === null) {
+                    if (importsAllowed && media === under) {
                         const url = importUrl(at.prelude);
-                        if (url && importApplies(at.prelude)) {
+                        const conditions = importConditions(at.prelude);
+                        if (url && conditions !== false) {
                             sheet.imports.push(resolveUrl(url, base));
+                            sheet.importConditions.push(conditions);
                         }
                     }
                     continue;
@@ -118,12 +145,7 @@ base = null) {
                 }
                 if (name === 'media' && at.block !== null) {
                     const conditions = parseMediaQuery(at.prelude);
-                    for (const c of conditions) {
-                        if (c.min !== undefined)
-                            breakpoints.add(c.min);
-                        if (c.max !== undefined)
-                            breakpoints.add(c.max + MAX_EDGE);
-                    }
+                    note(conditions);
                     // A nested `@media` intersects with the one above it; pushing a
                     // level rather than merging keeps "all of these blocks hold" exact
                     // when two of them overlap.
@@ -226,6 +248,13 @@ base = null) {
                         breakpoints.add(c.min);
                     if (c.max !== undefined)
                         breakpoints.add(c.max + MAX_EDGE);
+                    if (c.minHeight !== undefined || c.maxHeight !== undefined) {
+                        sheet.readsHeight = true;
+                    }
+                    if (c.minAspect !== undefined || c.maxAspect !== undefined) {
+                        sheet.readsHeight = true;
+                        sheet.readsWidth = true;
+                    }
                 }
                 styleRule(selectors, item.block, media ? [...media, conditions] : [conditions], layer, path, depth + 1);
             }
@@ -259,7 +288,7 @@ base = null) {
             });
         }
     };
-    walk(text, null);
+    walk(text, under);
     sheet.breakpoints = [...breakpoints].sort((a, b) => a - b);
     return sheet;
 }
@@ -1252,18 +1281,32 @@ function readAtRule(text, at) {
  *  at: a sixty-fourth of a pixel past it, where the widths a display scale
  *  divides a device width into (`640.5` at 2x) fall on the right side. */
 const MAX_EDGE = 1 / 64;
+/**
+ * The media features that are the viewport's width and its height here.
+ * `device-width` and `device-height` are the Web-exposed screen area's
+ * (Media Queries 4, appendix A), which a user agent may answer with the
+ * viewport's (CSSOM View 2.3), and a document drawn into an element has no
+ * screen of its own to answer with. Deprecated, and still what a page from
+ * before `width` asks with: DuckDuckGo Lite's phone sheet is
+ * `(max-device-width: 700px)`, and a query that went unread held, so a
+ * desktop window got the phone's 12px dropdowns.
+ */
+const VIEWPORT_SIDES = {
+    width: new Set(['width', 'device-width']),
+    height: new Set(['height', 'device-height']),
+};
 /**
  * A width range in Media Queries 4's syntax — `(width >= 48rem)`, `(60rem >
  * width)`, `(40rem <= width < 60rem)` — as the widths it holds between, or
  * null for a term that is not one. A strict bound is a sixty-fourth of a
  * pixel inside the value, where a viewport's width never lands.
  */
-function widthRange(term) {
+function widthRange(term, feature = 'width') {
     const inner = /^\(\s*(.*?)\s*\)$/.exec(term)?.[1];
     if (!inner || !/[<>=]/.test(inner))
         return null;
     const parts = inner.split(/\s*(<=|>=|<|>|=)\s*/);
-    const isWidth = (part) => part.toLowerCase() === 'width';
+    const isWidth = (part) => VIEWPORT_SIDES[feature].has(part.toLowerCase());
     const out = {};
     // `width OP value`, with the operator read from the width's side
     const bound = (op, value) => {
@@ -1432,16 +1475,27 @@ function importUrl(prelude) {
     const m = /^\s*(?:url\(\s*)?["']?([^"')\s]+)["']?\s*\)?/.exec(prelude);
     return m ? m[1] : null;
 }
-/** Whether an `@import`'s media list, the rest of its prelude after the
- *  URL, lets it apply here: a list that only names other media, `print` or
- *  `braille`, leaves the sheet out (CSS 2.1 6.3). A list that depends on the
- *  width is taken to apply; an import is fetched once, not per width. */
-function importApplies(prelude) {
+/**
+ * An `@import`'s media query list, the rest of its prelude after the URL:
+ * null where it has none, and false where no query in it can ever hold
+ * here — a list that only names other media, `print` or `braille` — which
+ * leaves the sheet out, unasked for (CSS 2.1 6.3). Any other list is the
+ * condition the sheet it imports is under (CSS Cascade 4, 2): the sheet is
+ * fetched once, and its rules hold at the widths the list does. Taken to
+ * hold at every width, as it was, a design that imports a sheet a
+ * breakpoint — the Zen Garden's 219, `@import url("219-1367.css") all and
+ * (min-width: 1367px)` — had all of them at once.
+ */
+function importConditions(prelude) {
     const m = /^\s*(?:url\(\s*(?:"[^"]*"|'[^']*'|[^)]*)\s*\)|"[^"]*"|'[^']*')(.*)$/s.exec(prelude);
     const list = m?.[1].trim();
     if (!list)
-        return true;
-    return parseMediaQuery(list).some((c) => c.staticPass !== false);
+        return null;
+    const conditions = parseMediaQuery(list);
+    if (!conditions.some((c) => c.staticPass !== false))
+        return false;
+    // one that always holds is no condition
+    return conditions.some((c) => c.staticPass === true) ? null : conditions;
 }
 /**
  * A declaration value with every `url()` in it made absolute against `base`
@@ -1516,10 +1570,13 @@ const GENERIC_FAMILIES = new Set([
     'default',
 ]);
 /**
- * A `@font-face` block, or null when it names no family, or no source this
- * can ask for: `local()` names a face the system has, which this does not
- * look up, and a family that is only `local()`s is left to the system as it
- * would be anyway.
+ * A `@font-face` block, or null when it names no family or no source — a
+ * rule CSS Fonts 4 (4.3) drops whole. A rule whose sources are all
+ * `local()`s is a rule like any other: its family is the document's, and
+ * left out here, `"GeistSans Fallback"` — next/font's `src: local("Arial")`
+ * with the metrics adjusted — reached the text engine as a name to look up,
+ * where fontconfig's nearest guess for a family nobody has set a site's
+ * headings in Gill Sans Ultra Bold.
  */
 function parseFontFace(block, base, media) {
     let family = null;
@@ -1555,6 +1612,15 @@ function parseFontFace(block, base, media) {
     const sources = [];
     for (const part of splitTopLevel(src, ',')) {
         const item = part.trim();
+        // `local(Gentium Bold)`, `local("Gentium Bold")`: a name as a family's
+        // is written, and like one never a keyword (`local(inherit)`)
+        const local = /^local\(([\s\S]*)\)$/i.exec(item);
+        if (local) {
+            const name = faceFamily(local[1]);
+            if (name)
+                sources.push({ local: name });
+            continue;
+        }
         if (!/^url\(/i.test(item))
             continue;
         const end = urlEnd(item, 3);
@@ -1660,8 +1726,15 @@ export function parseMediaQuery(prelude) {
         const condition = {};
         let pass = true;
         let sawWidth = false;
+        let sawHeight = false;
+        let sawResolution = false;
+        let sawAspect = false;
         const negated = /^\s*not\b/i.test(group);
-        for (const part of group.split(/\s+and\s+/i)) {
+        // `and` needs white space after it, where a `(` would make it a
+        // function, and none after the `)` it follows: DuckDuckGo writes
+        // `(max-device-width: 701px)and (orientation: landscape)`, which read
+        // as one term that was no feature, and held
+        for (const part of group.split(/(?:\s+|(?<=\)))and\s+/i)) {
             const term = part
                 .trim()
                 .replace(/^not\s+/i, '')
@@ -1681,19 +1754,53 @@ export function parseMediaQuery(prelude) {
                 sawWidth = true;
                 continue;
             }
+            const heights = widthRange(term, 'height');
+            if (heights) {
+                if (heights.min !== undefined) {
+                    condition.minHeight = Math.max(condition.minHeight ?? 0, heights.min);
+                }
+                if (heights.max !== undefined) {
+                    condition.maxHeight = Math.min(condition.maxHeight ?? Infinity, heights.max);
+                }
+                sawHeight = true;
+                continue;
+            }
             const feature = mediaFeature(term);
             if (feature) {
                 const key = feature[1].toLowerCase();
                 const len = parseLength(feature[2], ZERO_UNITS);
                 const px = typeof len === 'number' ? len : null;
-                if (key === 'min-width' && px !== null) {
+                if ((key === 'min-width' || key === 'min-device-width') &&
+                    px !== null) {
                     condition.min = Math.max(condition.min ?? 0, px);
                     sawWidth = true;
                 }
-                else if (key === 'max-width' && px !== null) {
+                else if ((key === 'max-width' || key === 'max-device-width') &&
+                    px !== null) {
                     condition.max = Math.min(condition.max ?? Infinity, px);
                     sawWidth = true;
                 }
+                else if (px === null &&
+                    /^(?:min-|max-)?(?:device-)?(?:width|height)$/.test(key)) {
+                    // a size that is no length is a query that does not parse, which
+                    // Media Queries 4 (3.2) makes `not all`: `(min-width:0\0)`, the
+                    // hack that kept a block for Internet Explorer 9 and 10, held
+                    // here as a query that asked nothing, and its rules applied
+                    pass = false;
+                }
+                else if ((key === 'min-height' || key === 'min-device-height') &&
+                    px !== null) {
+                    // the viewport's height, answered live as its width is: a
+                    // design that sets its heading's size by the window's height
+                    // took the tallest step's at every height
+                    condition.minHeight = Math.max(condition.minHeight ?? 0, px);
+                    sawHeight = true;
+                }
+                else if ((key === 'max-height' || key === 'max-device-height') &&
+                    px !== null) {
+                    condition.maxHeight = Math.min(condition.maxHeight ?? Infinity, px);
+                    sawHeight = true;
+                }
                 else if (key === 'prefers-color-scheme') {
                     // Answered live, from the palette in force: a document dropped
                     // into a dark application takes its dark branch, and follows the
@@ -1716,7 +1823,67 @@ export function parseMediaQuery(prelude) {
                     pass = false;
                 }
                 else if (key === 'orientation') {
-                    pass = feature[2].trim().toLowerCase() === 'landscape';
+                    // the viewport's, as its aspect ratio: portrait where its height
+                    // is at least its width (Media Queries 4, 4.5)
+                    const orientation = feature[2].trim().toLowerCase();
+                    if (orientation === 'portrait') {
+                        condition.maxAspect = Math.min(condition.maxAspect ?? Infinity, 1);
+                        sawAspect = true;
+                    }
+                    else if (orientation === 'landscape') {
+                        condition.minAspect = Math.max(condition.minAspect ?? 0, 1 + ASPECT_EDGE);
+                        sawAspect = true;
+                    }
+                    else
+                        pass = false;
+                }
+                else if (ASPECT_FEATURES.test(key)) {
+                    const ratio = ratioOf(feature[2]);
+                    if (ratio === null)
+                        pass = false;
+                    else {
+                        if (!key.startsWith('max-')) {
+                            condition.minAspect = Math.max(condition.minAspect ?? 0, ratio);
+                        }
+                        if (!key.startsWith('min-')) {
+                            condition.maxAspect = Math.min(condition.maxAspect ?? Infinity, ratio);
+                        }
+                        sawAspect = true;
+                    }
+                }
+                else if (RESOLUTION_FEATURES.has(key)) {
+                    const dppx = resolutionOf(feature[2], key.startsWith('-webkit-'));
+                    if (dppx === null)
+                        pass = false;
+                    else {
+                        if (!key.includes('max-')) {
+                            condition.minResolution = Math.max(condition.minResolution ?? 0, dppx);
+                        }
+                        if (!key.includes('min-')) {
+                            condition.maxResolution = Math.min(condition.maxResolution ?? Infinity, dppx);
+                        }
+                        sawResolution = true;
+                    }
+                }
+                else if (desktopFeature(key, feature[2]) !== true) {
+                    // any other feature as a desktop screen with a mouse answers
+                    // it, and one nothing knows is false (Media Queries 4, 3.2):
+                    // Firefox's and Opera's resolution features, which a design lists
+                    // beside WebKit's, held here, and a page at one dot to the pixel
+                    // took the rules it keeps for two
+                    pass = false;
+                }
+                continue;
+            }
+            const flag = /^\(\s*(-?[a-z][a-z0-9-]*)\s*\)$/i.exec(term);
+            if (flag) {
+                // a feature in the boolean context, `(hover)`: true where its value
+                // is anything but zero or none
+                const key = flag[1].toLowerCase();
+                if (!BOOLEAN_TRUE.has(key) &&
+                    !RESOLUTION_FEATURES.has(key) &&
+                    desktopFeature(key, null) !== true) {
+                    pass = false;
                 }
                 continue;
             }
@@ -1734,11 +1901,20 @@ export function parseMediaQuery(prelude) {
             // `not` over a scheme is the other scheme. `not` over a width range
             // is not expressible as one range; the honest reduction is to decide
             // it statically rather than invert it wrongly.
-            if (!sawWidth && pass && condition.scheme) {
+            if (!sawWidth &&
+                !sawHeight &&
+                !sawResolution &&
+                !sawAspect &&
+                pass &&
+                condition.scheme) {
                 out.push({ scheme: condition.scheme === 'dark' ? 'light' : 'dark' });
                 continue;
             }
-            out.push({ staticPass: !sawWidth && pass ? false : !pass });
+            out.push({
+                staticPass: !sawWidth && !sawHeight && !sawResolution && !sawAspect && pass
+                    ? false
+                    : !pass,
+            });
             continue;
         }
         if (!pass) {
@@ -1746,6 +1922,9 @@ export function parseMediaQuery(prelude) {
             continue;
         }
         if (!sawWidth &&
+            !sawHeight &&
+            !sawResolution &&
+            !sawAspect &&
             condition.scheme === undefined &&
             condition.min === undefined &&
             condition.max === undefined) {
@@ -1847,6 +2026,122 @@ export function supportsCondition(prelude) {
  * first `)` found no feature there — the term was passed over as though it
  * said nothing, and every narrow-screen rule held at every width.
  */
+/** `aspect-ratio` and the device's, bare or `min-`/`max-`. */
+const ASPECT_FEATURES = /^(?:min-|max-)?(?:device-)?aspect-ratio$/;
+/** How far past square a landscape viewport is: any width over the height. */
+const ASPECT_EDGE = 1e-9;
+/** A ratio, `16/9` or `16 / 9` or `1.5`, as a number; null for anything
+ *  else, or a ratio of nothing. */
+function ratioOf(value) {
+    const m = /^\s*(\d*\.?\d+)\s*(?:\/\s*(\d*\.?\d+)\s*)?$/.exec(value);
+    if (!m)
+        return null;
+    const ratio = Number(m[1]) / (m[2] === undefined ? 1 : Number(m[2]));
+    return Number.isFinite(ratio) && ratio > 0 ? ratio : null;
+}
+/** The resolution features, the standard's and WebKit's, which Chrome
+ *  answers; `min--moz-device-pixel-ratio` and `-o-min-device-pixel-ratio`
+ *  are no feature of its, and none of this. */
+const RESOLUTION_FEATURES = new Set([
+    'resolution',
+    'min-resolution',
+    'max-resolution',
+    '-webkit-device-pixel-ratio',
+    '-webkit-min-device-pixel-ratio',
+    '-webkit-max-device-pixel-ratio',
+]);
+/** A resolution in dots per CSS pixel: `2dppx`, `2x`, `192dpi`, `75.6dpcm`,
+ *  or WebKit's device pixel ratio, a number. Null for anything else. */
+function resolutionOf(value, ratio) {
+    const m = /^\s*(\d*\.?\d+(?:e[+-]?\d+)?)\s*(dppx|x|dpi|dpcm)?\s*$/i.exec(value);
+    if (!m)
+        return null;
+    const n = Number(m[1]);
+    const unit = (m[2] ?? '').toLowerCase();
+    if (ratio)
+        return unit ? null : n;
+    if (unit === 'dppx' || unit === 'x')
+        return n;
+    if (unit === 'dpi')
+        return n / 96;
+    if (unit === 'dpcm')
+        return (n * 2.54) / 96;
+    return null;
+}
+/** The features true in the boolean context whatever the viewport: a
+ *  size, a scheme, an orientation, there is always one. */
+const BOOLEAN_TRUE = new Set([
+    'width',
+    'height',
+    'device-width',
+    'device-height',
+    'aspect-ratio',
+    'orientation',
+    'prefers-color-scheme',
+]);
+/**
+ * A media feature as a desktop screen driven by a mouse answers it — the
+ * device `<Html>` draws on — for the features that do not depend on the
+ * viewport: true, false, or null for a feature nothing knows, which is
+ * false (Media Queries 4, 3.2). `value` is null in the boolean context.
+ * The colour is eight bits a component on no palette and no grid; scripts
+ * never run here, so `scripting` is `none`.
+ */
+function desktopFeature(key, value) {
+    const v = value?.trim().toLowerCase() ?? null;
+    const numeric = (feature, has) => {
+        const bare = key.replace(/^(min|max)-/, '');
+        if (bare !== feature)
+            return null;
+        if (v === null)
+            return key === feature ? has !== 0 : null;
+        const n = Number(v);
+        if (!Number.isFinite(n))
+            return false;
+        if (key.startsWith('min-'))
+            return has >= n;
+        if (key.startsWith('max-'))
+            return has <= n;
+        return has === n;
+    };
+    const keyword = (answers, bool) => v === null ? bool : (answers[v] ?? false);
+    switch (key) {
+        case 'hover':
+        case 'any-hover':
+            return keyword({ hover: true, none: false }, true);
+        case 'pointer':
+        case 'any-pointer':
+            return keyword({ fine: true, coarse: false, none: false }, true);
+        case 'update':
+            return keyword({ fast: true, slow: false, none: false }, true);
+        case 'overflow-block':
+        case 'overflow-inline':
+            return keyword({ scroll: true }, true);
+        case 'scan':
+            return false;
+        case 'color-gamut':
+            return keyword({ srgb: true }, true);
+        case 'dynamic-range':
+        case 'video-dynamic-range':
+            return keyword({ standard: true }, true);
+        case 'prefers-contrast':
+        case 'prefers-reduced-transparency':
+        case 'prefers-reduced-data':
+            return keyword({ 'no-preference': true }, false);
+        case 'forced-colors':
+            return keyword({ none: true }, false);
+        case 'scripting':
+            return keyword({ none: true }, false);
+        case 'display-mode':
+            return keyword({ browser: true }, true);
+        case '-webkit-transform-3d':
+            return v === null || v === '1';
+    }
+    return (numeric('color', 8) ??
+        numeric('monochrome', 0) ??
+        numeric('color-index', 0) ??
+        numeric('grid', 0));
+}
 function mediaFeature(term) {
     const m = /^\(\s*([a-z-]+)\s*:([\s\S]*)\)$/i.exec(term);
     if (!m)
@@ -1867,7 +2162,12 @@ function mediaFeature(term) {
 const ZERO_UNITS = { em: 16, rem: 16, vw: 0, vh: 0, scale: 1 };
 /** Whether a rule's `@media` blocks all hold at this viewport width, under
  *  this colour scheme. */
-export function mediaMatches(media, width, scheme = 'light') {
+export function mediaMatches(media, width, scheme = 'light', 
+/** The viewport's height in CSS pixels; a test of it holds at no height
+ *  where none is given. */
+height = NaN, 
+/** The display's scale, device pixels to the CSS pixel. */
+resolution = 1) {
     if (!media)
         return true;
     for (const block of media) {
@@ -1880,6 +2180,12 @@ export function mediaMatches(media, width, scheme = 'light') {
             }
             if ((c.min === undefined || width >= c.min) &&
                 (c.max === undefined || width <= c.max) &&
+                (c.minHeight === undefined || height >= c.minHeight) &&
+                (c.maxHeight === undefined || height <= c.maxHeight) &&
+                (c.minResolution === undefined || resolution >= c.minResolution) &&
+                (c.minAspect === undefined || width >= c.minAspect * height) &&
+                (c.maxAspect === undefined || width <= c.maxAspect * height) &&
+                (c.maxResolution === undefined || resolution <= c.maxResolution) &&
                 (c.scheme === undefined || c.scheme === scheme)) {
                 any = true;
             }