@react-x11/components 0.13.0 → 0.14.1

package/src/html/css/parse.ts

@@ -56,6 +56,10 @@ 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. */
@@ -84,8 +88,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. */
@@ -97,10 +102,10 @@ export interface FontFaceRule {
   media: MediaCondition[][] | null;
 }
 
-export interface FontFaceSource {
-  url: string;
-  format: string | null;
-}
+export type FontFaceSource =
+  | { url: string; format: string | null }
+  /** `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
@@ -176,16 +181,38 @@ export function parseStylesheet(
    *  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 = 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 = null,
 ): Stylesheet {
   text = withoutComments(text);
   const sheet: Stylesheet = {
     rules: [],
     imports: [],
+    importConditions: [],
     breakpoints: [],
     fontFaces: [],
   };
   let order = startOrder;
   const breakpoints = new Set<number>();
+  /** 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: MediaCondition[]): void => {
+    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;
 
@@ -233,10 +260,12 @@ export function parseStylesheet(
         const name = at.name.toLowerCase();
         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;
@@ -248,17 +277,7 @@ export function parseStylesheet(
         }
         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);
-            if (c.minHeight !== undefined || c.maxHeight !== undefined) {
-              sheet.readsHeight = true;
-            }
-            if (c.minAspect !== undefined || c.maxAspect !== undefined) {
-              sheet.readsHeight = true;
-              sheet.readsWidth = true;
-            }
-          }
+          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.
@@ -414,7 +433,7 @@ export function parseStylesheet(
     }
   };
 
-  walk(text, null);
+  walk(text, under);
   sheet.breakpoints = [...breakpoints].sort((a, b) => a - b);
   return sheet;
 }
@@ -1591,18 +1610,28 @@ function importUrl(prelude: string): string | null {
   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: string): boolean {
+/**
+ * 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: string): MediaCondition[] | null | false {
   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);
+  if (!list) 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;
 }
 
 /**
@@ -1684,10 +1713,13 @@ const GENERIC_FAMILIES = new Set([
 ]);
 
 /**
- * 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: string,
@@ -1720,6 +1752,14 @@ function parseFontFace(
   const sources: FontFaceSource[] = [];
   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);
     const url = parseUrl(item.slice(0, end));

package/src/html/css/shapes.ts

@@ -0,0 +1,239 @@
+// What a style sheet says of the shapes in a drawing.
+//
+// An inline `<svg>` is a replaced box: the box builder stops at it, and no
+// computed style is made for what is inside. `fill`, `stroke` and their kin
+// are properties all the same (SVG 2, 6.2 and 13.2), which a rule of the
+// document's sets on a `<path>` as it would on a paragraph — a logo's
+// `.dark .logo path { fill: #fff }` — and a drawing exported with a style
+// sheet of its own, `.st0 { fill: #fff }` on `<path class="st0">`, has all
+// its colours in one. So the cascade is run for them narrowly
+// (`Cascade.shapeStyles`): over the rules that declare one of the
+// properties here, and down to values `SvgView` reads from a `style`
+// attribute, which is where the drawing's copy of an element carries them
+// (`svg.ts`). A `ComputedStyle` per `<path>` would be a few hundred
+// properties for the dozen a shape has, on a page of hundreds of icons.
+import type { Element } from 'domhandler';
+import { LIGHT_DARK, lightDark } from './color.js';
+import { inkColor, parseAlpha, parseColor, parseLength } from './values.js';
+import type { UnitContext } from './values.js';
+
+/** What the rules give one element of a drawing: each property they set,
+ *  as `SvgView` reads it — `inherit` for one they put back to what the
+ *  element inherits, over its own attribute. */
+export type ShapeStyle = Readonly<Record<string, string>>;
+
+/** What the rules give the elements of one drawing, and all of it as a
+ *  string: what a drawing's tree was last made with (`SvgDrawing`). */
+export interface ShapeStyles {
+  readonly of: ReadonlyMap<Element, ShapeStyle>;
+  readonly key: string;
+}
+
+/** Each property read, and whether it is inherited. */
+const PROPS: Record<string, boolean> = {
+  fill: true,
+  stroke: true,
+  'stroke-width': true,
+  'stroke-linecap': true,
+  'stroke-linejoin': true,
+  'stroke-miterlimit': true,
+  'fill-rule': true,
+  'fill-opacity': true,
+  'stroke-opacity': true,
+  color: true,
+  visibility: true,
+  opacity: false,
+  display: false,
+  'stop-color': false,
+  'stop-opacity': false,
+};
+
+/** Whether a rule with this declaration is one to keep for drawings. */
+export function isShapeProp(prop: string): boolean {
+  return PROPS[prop] !== undefined;
+}
+
+/** The properties the drawing's box has from its computed style already:
+ *  its paint, which `paintSvg` hands the drawing, and what makes it a box,
+ *  shown and see-through as one. */
+export const ROOT_BOX_PROPS: ReadonlySet<string> = new Set([
+  'fill',
+  'stroke',
+  'color',
+  'display',
+  'visibility',
+  'opacity',
+]);
+
+/** Each at its initial value (SVG 2, 13; CSS Color 4; CSS Display 3). */
+const INITIAL: Record<string, string> = {
+  fill: '#000000',
+  stroke: 'none',
+  'stroke-width': '1',
+  'stroke-linecap': 'butt',
+  'stroke-linejoin': 'miter',
+  'stroke-miterlimit': '4',
+  'fill-rule': 'nonzero',
+  'fill-opacity': '1',
+  'stroke-opacity': '1',
+  visibility: 'visible',
+  opacity: '1',
+  display: 'inline',
+  'stop-color': '#000000',
+  'stop-opacity': '1',
+};
+
+/** The elements a rule's subject can be, where it names one by its type,
+ *  for the rule to reach into a drawing: the ones `SvgView` draws, or
+ *  reads a paint from. `a` is both languages'. */
+export const SHAPE_TAGS: ReadonlySet<string> = new Set([
+  'svg',
+  'g',
+  'a',
+  'path',
+  'rect',
+  'circle',
+  'ellipse',
+  'line',
+  'polyline',
+  'polygon',
+  'text',
+  'tspan',
+  'use',
+  'symbol',
+  'switch',
+  'image',
+  'stop',
+]);
+
+/** What a shape's values are read against: the drawing's own `color` and
+ *  colour scheme, and its font size for a length in `em`. */
+export interface ShapeContext {
+  color: string;
+  scheme: 'light' | 'dark';
+  units: UnitContext;
+}
+
+/**
+ * A `fill` or a `stroke` (SVG 2, 13.2): `none`, a colour, or a `url()`
+ * naming a gradient in the drawing, with what follows it, its fallback,
+ * left off. Null for anything else, `context-fill` and `context-stroke`
+ * among it, which only a marker or a `<use>` has a context for.
+ */
+export function svgPaint(value: string): string | null {
+  const v = value.trim();
+  if (v.toLowerCase() === 'none') return 'none';
+  const url = /^url\(\s*(['"]?)(#[^'")\s]+)\1\s*\)/i.exec(v);
+  if (url) return `url(${url[2]})`;
+  return parseColor(v);
+}
+
+const NUMBER = /^[+-]?(?:\d*\.\d+|\d+)(?:e[+-]?\d+)?$/i;
+
+/** A word of a `display` that makes a box (CSS Display 3, 2). */
+const DISPLAY =
+  /^(?:block|inline|run-in|flow|flow-root|table|flex|grid|ruby|list-item|contents|inline-[a-z]+|table-[a-z-]+|ruby-[a-z-]+|-webkit-[a-z-]+)$/;
+
+const LINE_JOINS: Record<string, string> = {
+  miter: 'miter',
+  round: 'round',
+  bevel: 'bevel',
+  // the two a canvas has no join for end in a miter, clipped or not
+  'miter-clip': 'miter',
+  arcs: 'miter',
+};
+
+/**
+ * One declaration's value as a drawing reads it, or null for a value the
+ * property does not take, which leaves the declaration out of the cascade
+ * as any invalid one is left. `inherit` for a CSS-wide keyword that puts an
+ * inherited property back to what the element inherits.
+ */
+export function shapeValue(
+  prop: string,
+  raw: string,
+  ctx: ShapeContext,
+): string | null {
+  let value = raw.trim();
+  const wide = value.toLowerCase();
+  if (wide === 'inherit') return PROPS[prop] ? 'inherit' : null;
+  if (wide === 'initial') {
+    return prop === 'color'
+      ? (ctx.units.initial?.color ?? '#000000')
+      : INITIAL[prop];
+  }
+  if (wide === 'unset' || wide === 'revert' || wide === 'revert-layer') {
+    return PROPS[prop] ? 'inherit' : INITIAL[prop];
+  }
+  if (LIGHT_DARK.test(value)) {
+    const picked = lightDark(value, ctx.scheme);
+    if (picked === null) return null;
+    value = picked;
+  }
+  switch (prop) {
+    case 'fill':
+    case 'stroke': {
+      const paint = svgPaint(value);
+      // `currentColor` is the shape's own `color`, which the drawing knows
+      return paint === null || paint === 'currentColor'
+        ? paint
+        : inkColor(paint, ctx.color);
+    }
+    case 'color':
+    case 'stop-color': {
+      const color = parseColor(value);
+      return color === null ? null : inkColor(color, ctx.color);
+    }
+    case 'stroke-width': {
+      // a number is user units, as a length in pixels is; a percentage is
+      // of the viewport's diagonal, which only the drawing has
+      const px = NUMBER.test(value)
+        ? Number(value)
+        : lengthIn(value, ctx.units);
+      return px !== null && px >= 0 ? String(px) : null;
+    }
+    case 'stroke-miterlimit': {
+      const n = NUMBER.test(value) ? Number(value) : NaN;
+      return n >= 1 ? String(n) : null;
+    }
+    case 'fill-opacity':
+    case 'stroke-opacity':
+    case 'stop-opacity':
+    case 'opacity': {
+      const a = parseAlpha(value);
+      return a === null ? null : String(a);
+    }
+    case 'stroke-linecap': {
+      const v = value.toLowerCase();
+      return v === 'butt' || v === 'round' || v === 'square' ? v : null;
+    }
+    case 'stroke-linejoin':
+      return LINE_JOINS[value.toLowerCase()] ?? null;
+    case 'fill-rule': {
+      const v = value.toLowerCase();
+      return v === 'nonzero' || v === 'evenodd' ? v : null;
+    }
+    case 'visibility': {
+      const v = value.toLowerCase();
+      if (v === 'visible') return v;
+      return v === 'hidden' || v === 'collapse' ? 'hidden' : null;
+    }
+    case 'display': {
+      // `none`, or some box: which one is nothing to a shape
+      const v = value.toLowerCase();
+      if (v === 'none') return v;
+      return v.split(/\s+/).every((word) => DISPLAY.test(word))
+        ? 'inline'
+        : null;
+    }
+    default:
+      return null;
+  }
+}
+
+/** A length in user units, which are CSS pixels; null for none, and for a
+ *  percentage. */
+function lengthIn(value: string, units: UnitContext): number | null {
+  const length = parseLength(value, units);
+  return typeof length === 'number' ? length / units.scale : null;
+}