@react-x11/components 0.10.0 → 0.12.0

package/src/html/css/cascade.ts

@@ -49,6 +49,7 @@ import { parseDeclarations } from './parse.js';
 import { CounterStyles, counterStyleRule } from './counter-styles.js';
 import type { CounterStyleRule } from './counter-styles.js';
 import type { UnitContext } from './values.js';
+import { viewportUnit } from './values.js';
 import { customProperties, substituteIn } from './vars.js';
 import type { CustomProps } from './vars.js';
 
@@ -514,6 +515,46 @@ export interface PointerState {
 
 const NO_POINTER: PointerState = { hovered: new Set(), active: new Set() };
 
+/**
+ * The face a style's font-relative units are measured in: its family list,
+ * size, weight and slant, the four that pick one. A family's faces can be
+ * different fonts altogether — a page's `@font-face` rules may set its
+ * bold in another file — so an `ex` in bold text is the bold face's.
+ */
+export interface MetricFace {
+  family: string;
+  size: number;
+  weight: number;
+  style: ComputedStyle['fontStyle'];
+}
+
+/** What a face measures, where the fonts can say. */
+export type FaceMetric = (face: MetricFace) => number | null;
+
+/** What a style's face is read from: a computed style, or the part of one
+ *  a declaration's font-relative units are measured against. */
+type FaceSource = Pick<
+  ComputedStyle,
+  'fontFamily' | 'fontSize' | 'fontWeight' | 'fontStyle'
+>;
+
+/** …and its line height, for `lh`. */
+type LineSource = FaceSource &
+  Pick<ComputedStyle, 'lineHeight' | 'lineHeightIsLength'>;
+
+function faceOf(style: FaceSource): MetricFace {
+  return {
+    family: style.fontFamily,
+    size: style.fontSize,
+    weight: style.fontWeight,
+    style: style.fontStyle,
+  };
+}
+
+function faceKey(style: FaceSource): string {
+  return `${style.fontFamily}\u0001${style.fontSize}\u0001${style.fontWeight}\u0001${style.fontStyle}`;
+}
+
 /**
  * A cascade over a fixed set of stylesheets. Rebuilt when the sheets change;
  * re-run when the DOM, the viewport band or the pointer state does.
@@ -564,17 +605,15 @@ export class Cascade {
   /** The counter styles the sheets define, over the predefined ones. */
   readonly counterStyles: CounterStyles;
 
-  /** A font's x-height at a size, for `ex`, where the fonts can say. */
-  private _xHeightOf: ((family: string, size: number) => number | null) | null;
+  /** A face's x-height, for `ex`, where the fonts can say. */
+  private _xHeightOf: FaceMetric | null;
   private _xHeights = new Map<string, number>();
-  /** The advance of a font's "0" at a size, for `ch`, likewise. */
-  private _zeroWidthOf:
-    ((family: string, size: number) => number | null) | null;
+  /** The advance of a face's "0", for `ch`, likewise. */
+  private _zeroWidthOf: FaceMetric | null;
   private _zeroWidths = new Map<string, number>();
-  /** A font's own line height at a size, for `lh` where `line-height` is
-   *  `normal`, likewise. */
-  private _normalLineOf:
-    ((family: string, size: number) => number | null) | null;
+  /** A face's own line height, for `lh` where `line-height` is `normal`,
+   *  likewise. */
+  private _normalLineOf: FaceMetric | null;
   private _normalLines = new Map<string, number>();
   /** Whether any declaration sets a custom property or reads one: without
    *  one, no element's style asks about them. */
@@ -599,9 +638,9 @@ export class Cascade {
     viewportWidth: number,
     viewportHeight: number,
     scale = 1,
-    xHeight: ((family: string, size: number) => number | null) | null = null,
-    zeroWidth: ((family: string, size: number) => number | null) | null = null,
-    normalLine: ((family: string, size: number) => number | null) | null = null,
+    xHeight: FaceMetric | null = null,
+    zeroWidth: FaceMetric | null = null,
+    normalLine: FaceMetric | null = null,
     families: FontFamilies | null = null,
   ) {
     this._xHeightOf = xHeight;
@@ -665,7 +704,7 @@ export class Cascade {
     for (const d of declarations) {
       if (!VIEWPORT_UNIT.test(d.value)) continue;
       for (const m of d.value.matchAll(VIEWPORT_UNITS)) {
-        const unit = m[1].toLowerCase();
+        const unit = viewportUnit(m[1]);
         if (unit !== 'vh') this.readsViewportWidth = true;
         if (unit !== 'vw') this.readsViewportHeight = true;
       }
@@ -1082,13 +1121,13 @@ export class Cascade {
     return style;
   }
 
-  /** The x-height of a style's font: the font's own, asked once per face
-   *  and size, or half an em. */
-  private _exOf(style: ComputedStyle): number {
-    const key = `${style.fontFamily}\u0001${style.fontSize}`;
+  /** The x-height of a style's font: the font's own, asked once per face,
+   *  or half an em. */
+  private _exOf(style: FaceSource): number {
+    const key = faceKey(style);
     let ex = this._xHeights.get(key);
     if (ex === undefined) {
-      ex = this._xHeightOf?.(style.fontFamily, style.fontSize) ?? NaN;
+      ex = this._xHeightOf?.(faceOf(style)) ?? NaN;
       if (!(ex > 0)) ex = style.fontSize * 0.5;
       this._xHeights.set(key, ex);
     }
@@ -1096,12 +1135,12 @@ export class Cascade {
   }
 
   /** The advance of a style's font's "0": the font's own, asked once per
-   *  face and size, or half an em. */
-  private _chOf(style: ComputedStyle): number {
-    const key = `${style.fontFamily}\u0001${style.fontSize}`;
+   *  face, or half an em. */
+  private _chOf(style: FaceSource): number {
+    const key = faceKey(style);
     let ch = this._zeroWidths.get(key);
     if (ch === undefined) {
-      ch = this._zeroWidthOf?.(style.fontFamily, style.fontSize) ?? NaN;
+      ch = this._zeroWidthOf?.(faceOf(style)) ?? NaN;
       if (!(ch > 0)) ch = style.fontSize * 0.5;
       this._zeroWidths.set(key, ch);
     }
@@ -1109,16 +1148,16 @@ export class Cascade {
   }
 
   /** A style's computed line height as a length, for `lh`: `normal` as
-   *  its font's own, asked once per face and size, or 1.2em. */
-  private _lineHeightOf(style: ComputedStyle): number {
+   *  its font's own, asked once per face, or 1.2em. */
+  private _lineHeightOf(style: LineSource): number {
     const set = style.lineHeight;
     if (set !== 'normal') {
       return style.lineHeightIsLength ? set : set * style.fontSize;
     }
-    const key = `${style.fontFamily}\u0001${style.fontSize}`;
+    const key = faceKey(style);
     let line = this._normalLines.get(key);
     if (line === undefined) {
-      line = this._normalLineOf?.(style.fontFamily, style.fontSize) ?? NaN;
+      line = this._normalLineOf?.(faceOf(style)) ?? NaN;
       if (!(line > 0)) line = style.fontSize * 1.2;
       this._normalLines.set(key, line);
     }
@@ -1154,12 +1193,22 @@ export class Cascade {
       lh: () => this._lineHeightOf(parentStyle),
       rlh: () => this._lineHeightOf(this.initial),
     };
-    // the family goes with the size, so an `ex` after it is its font's
+    // The family, the weight and the slant go with the size: together they
+    // pick the face an `ex`, a `ch` or an `lh` in any declaration is
+    // measured in, however the declarations are ordered. A `width: 10ex`
+    // in a sheet under an inline `font-weight: 900` was measured in the
+    // family's regular face. The colour scheme goes ahead of the rest for
+    // the same reason: every `light-dark()` among them is read by it.
     let sized = false;
     let keyword = false;
     for (const c of candidates) {
       for (const d of pick(c)) {
-        if (d.prop === 'font-family') {
+        if (
+          d.prop === 'font-family' ||
+          d.prop === 'font-weight' ||
+          d.prop === 'font-style' ||
+          d.prop === 'color-scheme'
+        ) {
           this._apply(style, parentStyle, d, ctxParent);
         } else if (d.prop === 'font-size' || d.prop === 'font') {
           // NaN until a size is set, so one the declaration did not take
@@ -1188,21 +1237,43 @@ export class Cascade {
     ) {
       style.fontSize *= mono ? FIXED_SIZE : 1 / FIXED_SIZE;
     }
+    // The face as the first pass settled it. The second applies every
+    // declaration again in cascade order, the font's among them, so the
+    // style passes through the fonts of every rule on the way: read from
+    // it, the `10ex` in `div { font-family: foo; width: 10ex }` was `foo`'s
+    // under an inline `font-family: Ahem` that came after it.
+    const face: FaceSource = {
+      fontFamily: style.fontFamily,
+      fontSize: style.fontSize,
+      fontWeight: style.fontWeight,
+      fontStyle: style.fontStyle,
+    };
+    let line: LineSource | null = null;
     const ctx: UnitContext = {
       ...ctxParent,
       em: style.fontSize,
-      ex: () => this._exOf(style),
-      ch: () => this._chOf(style),
-      lh: () => this._lineHeightOf(style),
+      ex: () => this._exOf(face),
+      ch: () => this._chOf(face),
+      lh: () => this._lineHeightOf(line ?? style),
     };
     // the line height, which an `lh` in any other declaration reads, ahead
-    // of them: set again with the rest, in its place among them
+    // of them — a `font` sets one too — and read as it is then, for the
+    // same reason as the face: set again with the rest, in its place among
+    // them. A `font` sets the size as well, which the first pass settled.
     if (this._lh) {
       for (const c of candidates) {
         for (const d of pick(c)) {
-          if (d.prop === 'line-height') this._apply(style, parentStyle, d, ctx);
+          if (d.prop === 'line-height' || d.prop === 'font') {
+            this._apply(style, parentStyle, d, ctx);
+          }
         }
       }
+      style.fontSize = face.fontSize;
+      line = {
+        ...face,
+        lineHeight: style.lineHeight,
+        lineHeightIsLength: style.lineHeightIsLength,
+      };
     }
     const settled = style.fontSize;
     for (const c of candidates) {
@@ -1283,22 +1354,32 @@ export class Cascade {
    * that implied `<html>` instead, so an `html { font-size }` still reaches
    * the body. Taken as the initial style, the rule matched nothing and the
    * whole page came out at the theme's size.
+   *
+   * `html` is the implied `<html>`'s own style where the root box stands in
+   * for the body inside it, and null otherwise: what an `html { … }` or a
+   * `:root { … }` rule gives it that is not inherited has no box to be
+   * drawn on, and its background is the canvas's (`paintDocument`).
    */
-  rootStyle(hasBody: boolean, hasHtml = true): ComputedStyle {
+  rootStyle(
+    hasBody: boolean,
+    hasHtml = true,
+  ): { style: ComputedStyle; html: ComputedStyle | null } {
     const style = copyStyle(this.initial);
     style.display = 'block';
-    if (hasBody && hasHtml) return style;
+    if (hasBody && hasHtml) return { style, html: null };
     const synthetic = new DomElement('body', {}, []);
     let parent = style;
+    let html: ComputedStyle | null = null;
     if (!hasHtml) {
-      const html = new DomElement('html', {}, hasBody ? [] : [synthetic]);
-      synthetic.parent = html;
-      parent = this.styleFor(html, style, false);
-      if (hasBody) return asRoot(parent);
+      const element = new DomElement('html', {}, hasBody ? [] : [synthetic]);
+      synthetic.parent = element;
+      parent = this.styleFor(element, style, false);
+      if (hasBody) return { style: asRoot(parent), html: null };
+      html = parent;
     }
     // Only the box the body would have drawn is taken, not its layout role:
     // the root is still the initial containing block.
-    return asRoot(this.styleFor(synthetic, parent, false));
+    return { style: asRoot(this.styleFor(synthetic, parent, false)), html };
   }
 
   /** The rules of `index` that match `el`, pushed onto `out` as candidates,
@@ -1412,10 +1493,20 @@ function asRoot(style: ComputedStyle): ComputedStyle {
 
 /** `:root` is the `<html>` element: the one a browser implies around a
  *  fragment, whose style the root box takes (`rootStyle`), and never a
- *  fragment's top-level elements, which css-select would take for it. */
+ *  fragment's top-level elements, which css-select would take for it.
+ *
+ *  `:focus` and its two kin match nothing: no element of the document takes
+ *  the focus — a control's widget does, beside it. css-select has none of
+ *  the three and throws on them, which dropped every rule that named one,
+ *  `:not(:focus)` among them: Wikipedia's skip link hides with
+ *  `.mw-jump-link:not(:focus)`, and without it stood in the flow at the top
+ *  of every page. */
 const PSEUDOS = {
   root: (el: Element) =>
     el.name === 'html' && !(el.parent && isTag(el.parent as Element)),
+  focus: () => false,
+  'focus-visible': () => false,
+  'focus-within': () => false,
   // css-select's, but its ranges and tags lower-cased as ASCII has it, and
   // no other script (CSS 2.1 4.1.3): Unicode's took `:lang(\u212Al)`, a
   // Kelvin sign for the K, for `:lang(kl)`
@@ -1449,8 +1540,8 @@ const PSEUDOS = {
 
 /** A length in a unit of the viewport: a number, then the unit, and no
  *  more of a name after it. */
-const VIEWPORT_UNIT = /\d(?:vw|vh|vmin|vmax)(?![\w-])/i;
-const VIEWPORT_UNITS = /\d(vw|vh|vmin|vmax)(?![\w-])/gi;
+const VIEWPORT_UNIT = /\d[sld]?v(?:w|h|i|b|min|max)(?![\w-])/i;
+const VIEWPORT_UNITS = /\d([sld]?v(?:w|h|i|b|min|max))(?![\w-])/gi;
 
 /**
  * A selector with its `[attr~=""]` made one that matches nothing: an empty

package/src/html/css/color.ts

@@ -1,4 +1,5 @@
 import * as ntk from 'react-x11/ntk';
+import { closingParen, topLevelComma } from './vars.js';
 
 // CSS Color 4's functional colours: read here, and written back in the one
 // form every drawing context reads — `#rrggbb`, or `rgba(r, g, b, a)` with
@@ -753,3 +754,89 @@ const REC2020_TO_XYZ: readonly Triple[] = [
   [26158966 / 99577255, 472592308 / 697040785, 8267143 / 139408157],
   [0, 19567812 / 697040785, 295819943 / 278816314],
 ];
+
+// --- colour schemes ---------------------------------------------------------
+
+/** Whether a value has a `light-dark()` in it. */
+export const LIGHT_DARK = /(?:^|[^\w-])light-dark\(/i;
+const LIGHT_DARK_AT = /(?:^|[^\w-])(light-dark\()/gi;
+
+/**
+ * A value with each `light-dark()` in it replaced by the branch `scheme`
+ * picks (CSS Color 5, 7): the first where the element's used colour
+ * scheme is light, the second where it is dark. Replaced in the text, as a
+ * `var()` is, so a branch can be any colour — or another `light-dark()` —
+ * in any value a colour stands in. Null where one is not two arguments,
+ * which makes the declaration invalid.
+ */
+export function lightDark(
+  value: string,
+  scheme: 'light' | 'dark',
+): string | null {
+  let out = value;
+  // a branch can hold another, which the next round replaces
+  for (let round = 0; round < 32; round += 1) {
+    LIGHT_DARK_AT.lastIndex = 0;
+    const m = LIGHT_DARK_AT.exec(out);
+    if (!m) return out;
+    const open = m.index + m[0].length;
+    const start = open - m[1].length;
+    const close = closingParen(out, open);
+    if (close < 0) return null;
+    const inner = out.slice(open, close);
+    const comma = topLevelComma(inner);
+    if (comma < 0) return null;
+    const light = inner.slice(0, comma).trim();
+    const dark = inner.slice(comma + 1).trim();
+    if (!light || !dark || topLevelComma(dark) >= 0) return null;
+    out =
+      out.slice(0, start) +
+      (scheme === 'dark' ? dark : light) +
+      out.slice(close + 1);
+  }
+  return null;
+}
+
+/**
+ * The scheme an element with this `color-scheme` is drawn in (CSS Color
+ * Adjust 1, 2.2), given the one `preferred` — the palette's, which stands
+ * for the reader's preference: that one where the element supports it,
+ * else the first it names that is one, else the one `normal` gives, which
+ * is the palette's own too. Null for a value that is not a `color-scheme`.
+ */
+export function usedColorScheme(
+  value: string,
+  preferred: 'light' | 'dark' = 'light',
+): 'light' | 'dark' | null {
+  const words = value.trim().toLowerCase().split(/\s+/);
+  if (words.length === 1 && words[0] === 'normal') return preferred;
+  // `[ light | dark | <custom-ident> ]+ && only?`: `only` once, first or
+  // last, and never on its own
+  const only = words.indexOf('only');
+  if (only >= 0) {
+    if (only !== 0 && only !== words.length - 1) return null;
+    words.splice(only, 1);
+    if (!words.length) return null;
+  }
+  let first: 'light' | 'dark' | null = null;
+  for (const word of words) {
+    if (!SCHEME_IDENT.test(word) || NOT_SCHEMES.has(word)) return null;
+    if (word === preferred) return preferred;
+    if (!first && (word === 'light' || word === 'dark')) first = word;
+  }
+  return first ?? preferred;
+}
+
+const SCHEME_IDENT = /^-?(?:[a-z_]|--)[\w-]*$/;
+/** What a scheme's name cannot be: the keywords the grammar has, and the
+ *  CSS-wide ones, which reach here only in a list. */
+const NOT_SCHEMES = new Set([
+  'normal',
+  'only',
+  'inherit',
+  'initial',
+  'unset',
+  'revert',
+  'revert-layer',
+  'default',
+]);

package/src/html/css/parse.ts

@@ -242,8 +242,11 @@ export function parseStylesheet(
         } else if (name === 'supports' && at.block !== null) {
           // Everything in a `@supports` block is markup this renderer either
           // understands or ignores per-declaration, so entering it is closer
-          // to right than skipping it.
-          walk(at.block, media, layer, path);
+          // to right than skipping it — but for a condition it can answer
+          // false (`supportsCondition`)
+          if (supportsCondition(at.prelude) !== false) {
+            walk(at.block, media, layer, path);
+          }
         } else if (name === 'layer') {
           // `@layer a, b;` names layers, and so fixes their order, and
           // `@layer a { … }` puts rules in one; one with no name is a layer
@@ -342,7 +345,9 @@ export function parseStylesheet(
           depth + 1,
         );
       } else if (name === 'supports') {
-        styleRule(selectors, item.block, media, layer, path, depth + 1);
+        if (supportsCondition(item.prelude) !== false) {
+          styleRule(selectors, item.block, media, layer, path, depth + 1);
+        }
       } else if (name === 'layer' && LAYER_NAME.test(item.prelude.trim())) {
         const [ranks, full] = enter(item.prelude.trim(), layer, path);
         styleRule(selectors, item.block, media, ranks, full, depth + 1);
@@ -1775,7 +1780,7 @@ export function parseMediaQuery(prelude: string): MediaCondition[] {
         sawWidth = true;
         continue;
       }
-      const feature = /^\(\s*([a-z-]+)\s*:\s*([^)]+?)\s*\)$/i.exec(term);
+      const feature = mediaFeature(term);
       if (feature) {
         const key = feature[1].toLowerCase();
         const len = parseLength(feature[2], ZERO_UNITS);
@@ -1845,6 +1850,104 @@ export function parseMediaQuery(prelude: string): MediaCondition[] {
   return out.length ? out : [{ staticPass: true }];
 }
 
+/**
+ * The properties whose support a `@supports` condition is answered for:
+ * the mask's, which pages test before they draw an icon as a masked colour
+ * and keep a background image under `not` for an engine without them.
+ * Drawn here, and the fallback drawn too, an icon was its image in black
+ * under the mask, over the colour it was meant to be.
+ */
+const ANSWERED = new Set(
+  [
+    'mask',
+    'mask-image',
+    'mask-repeat',
+    'mask-position',
+    'mask-size',
+    'mask-origin',
+    'mask-clip',
+  ].flatMap((name) => [name, `-webkit-${name}`]),
+);
+
+/**
+ * Whether a `@supports` condition holds (CSS Conditional 3, 6): true or
+ * false where it turns on declarations of the properties this answers for
+ * (`ANSWERED`), combined by `not`, `and` and `or`; null where it turns on
+ * anything else, or is none, and the block is entered as every one was.
+ * Answering more is not safe without a list of what this draws: Tailwind 4
+ * keeps its variables' starting values under a test for engines without
+ * `@property`, which this is, and false there would drop every shadow and
+ * gradient it writes.
+ */
+export function supportsCondition(prelude: string): boolean | null {
+  const text = prelude.trim();
+  if (/^not\b/i.test(text)) {
+    const inner = supportsCondition(text.slice(3));
+    return inner === null ? null : !inner;
+  }
+  // the terms at the top level, and the one operator between them
+  const terms: string[] = [];
+  let op = '';
+  let depth = 0;
+  let start = 0;
+  for (let i = 0; i < text.length; i += 1) {
+    const c = text[i];
+    if (c === '(') depth += 1;
+    else if (c === ')') depth -= 1;
+    else if (depth === 0 && /\s/.test(c)) {
+      const word = /^\s+(and|or)\s+/i.exec(text.slice(i));
+      if (!word) continue;
+      const next = word[1].toLowerCase();
+      // `and` and `or` mixed without parentheses is no condition
+      if (op && op !== next) return null;
+      op = next;
+      terms.push(text.slice(start, i));
+      i += word[0].length - 1;
+      start = i + 1;
+    }
+    if (depth < 0) return null;
+  }
+  if (terms.length) {
+    terms.push(text.slice(start));
+    const values = terms.map(supportsCondition);
+    if (op === 'and') {
+      if (values.includes(false)) return false;
+      return values.includes(null) ? null : true;
+    }
+    if (values.includes(true)) return true;
+    return values.includes(null) ? null : false;
+  }
+  // one term: a condition in parentheses, or a declaration in them
+  if (!(text.startsWith('(') && text.endsWith(')'))) return null;
+  const inner = text.slice(1, -1).trim();
+  if (inner.startsWith('(') || /^not\b/i.test(inner)) {
+    return supportsCondition(inner);
+  }
+  const declaration = /^([a-z-]+)\s*:\s*(\S[\s\S]*)$/i.exec(inner);
+  if (!declaration || !ANSWERED.has(declaration[1].toLowerCase())) return null;
+  return true;
+}
+
+/**
+ * A `(name: value)` media feature: the whole term, its name, and its value
+ * read to the parenthesis that closes the feature, or null where the term is
+ * no such thing. A value may hold parentheses of its own: MediaWiki's
+ * breakpoints are `(max-width: calc(640px - 1px))`, and a value read to the
+ * first `)` found no feature there — the term was passed over as though it
+ * said nothing, and every narrow-screen rule held at every width.
+ */
+function mediaFeature(term: string): [string, string, string] | null {
+  const m = /^\(\s*([a-z-]+)\s*:([\s\S]*)\)$/i.exec(term);
+  if (!m) return null;
+  let depth = 0;
+  for (const c of m[2]) {
+    if (c === '(') depth += 1;
+    else if (c === ')' && --depth < 0) return null;
+  }
+  const value = m[2].trim();
+  return depth === 0 && value ? [term, m[1], value] : null;
+}
+
 /** A `@media` width is compared with the viewport in CSS pixels — the
  *  cascade divides the device width by the scale before asking — so the
  *  thresholds parse at scale 1 whatever panel the document lands on. */