@react-x11/components 0.9.0 → 0.11.0

package/dist/html/css/cascade.js

@@ -19,9 +19,12 @@ import { compile } from 'css-select';
 import * as DomUtils from 'domutils';
 import { Element as DomElement, isTag } from 'domhandler';
 import { attr, tagOf } from '../dom.js';
-import { mediaMatches } from './parse.js';
-import { applyDeclaration, blockify, inherit, initialStyle } from './style.js';
+import { svgSizeHint } from '../svg.js';
+import { asciiLower, escapeEnd, mediaMatches, readIdent, startsIdent, } from './parse.js';
+import { applyDeclaration, blockify, settleContentVisibility, settleOverflow, settleClamp, copyStyle, decorate, inherit, initialOne, initialStyle, isInherited, } from './style.js';
 import { parseDeclarations } from './parse.js';
+import { CounterStyles, counterStyleRule } from './counter-styles.js';
+import { customProperties, substituteIn } from './vars.js';
 /** Where a declaration came from. Higher wins before specificity is asked. */
 var Origin;
 (function (Origin) {
@@ -32,6 +35,20 @@ var Origin;
     Origin[Origin["AuthorImportant"] = 4] = "AuthorImportant";
     Origin[Origin["InlineImportant"] = 5] = "InlineImportant";
 })(Origin || (Origin = {}));
+/**
+ * What makes a selector's match depend on more than the element's own tag and
+ * attributes and its ancestors' — its siblings, where it sits among them,
+ * what it contains, or where the document is scrolled to. Two elements that
+ * look alike from the root down can still differ under a rule with one of
+ * these, so an element such a rule could reach does not share its style
+ * (`Cascade.sharedStyleFor`). css-select spells some of them under other
+ * names, and those count too: `:checked` and `:selected` read which option
+ * comes first, `:disabled` and `:enabled` which legend does, and `:parent`
+ * and `:contains()` the element's contents. Over-broad on purpose: a `+` or
+ * `~` inside an attribute value, or the `~=` operator, costs sharing and
+ * nothing else.
+ */
+const UNSHAREABLE = /[+~]|:(?:first|last|only)-(?:child|of-type)|:nth-|:empty|:blank|:has\(|:focus-within|:target|:scope|:(?:checked|selected|disabled|enabled|parent)\b|:i?contains\(/;
 /**
  * Rules bucketed by the key of their rightmost compound selector. An element
  * only ever tries `id`, its classes, its tag and the universal bucket.
@@ -44,12 +61,64 @@ class RuleIndex {
     /** Whether any rule in here is pointer-sensitive, so the renderer knows
      *  whether a pointer move can change the cascade at all. */
     hoverSensitive = false;
+    /** The buckets holding a rule an element cannot share its style under
+     *  (`UNSHAREABLE`): the ids, classes and tags whose elements compute
+     *  their own, and whether the universal bucket makes every element do so. */
+    ownStyleIds = new Set();
+    ownStyleClasses = new Set();
+    ownStyleTags = new Set();
+    ownStyleEverywhere = false;
+    /** How many rules are in here, so an empty index costs one comparison. */
+    size = 0;
+    _nextId = 0;
+    /**
+     * Whether a bucket here could hold a rule for `el`, by its tag, id and
+     * classes and without matching anything: an index of a rule or two is
+     * asked of every element — the user-agent sheet's `q::before` and
+     * `q::after` made every element of a document split its `class` twice —
+     * and almost none of them has a rule in it.
+     */
+    reaches(el) {
+        if (this.universal.length || this.byTag.has(tagOf(el)))
+            return true;
+        if (this.byId.size) {
+            const id = attr(el, 'id');
+            if (id && this.byId.has(id))
+                return true;
+        }
+        if (this.byClass.size) {
+            const className = attr(el, 'class');
+            if (className) {
+                for (const name of className.split(/\s+/)) {
+                    if (name && this.byClass.has(name))
+                        return true;
+                }
+            }
+        }
+        return false;
+    }
     add(rule) {
-        const indexed = { rule, match: null, compiled: false };
+        this.size += 1;
+        const indexed = {
+            rule,
+            match: null,
+            compiled: false,
+            id: this._nextId++,
+        };
         if (rule.selector.includes(':hover') || rule.selector.includes(':active')) {
             this.hoverSensitive = true;
         }
         const key = rightmostKey(rule.selector);
+        if (UNSHAREABLE.test(rule.selector)) {
+            if (key.kind === 'id')
+                this.ownStyleIds.add(key.name);
+            else if (key.kind === 'class')
+                this.ownStyleClasses.add(key.name);
+            else if (key.kind === 'tag')
+                this.ownStyleTags.add(key.name);
+            else
+                this.ownStyleEverywhere = true;
+        }
         const bucket = key.kind === 'id'
             ? mapBucket(this.byId, key.name)
             : key.kind === 'class'
@@ -60,6 +129,200 @@ class RuleIndex {
         bucket.push(indexed);
     }
 }
+/** A selector's trailing `::before`, `::after`, `::first-letter`,
+ *  `::first-line` or `::marker`, or CSS 2's single-colon spelling of any of
+ *  its four. */
+const PSEUDO_ELEMENT = /::?(before|after|first-letter|first-line)$|::marker$/i;
+/**
+ * A rule for a pseudo-element, as the pseudo-element it styles and a rule
+ * for the element it hangs off, which is what gets matched. The specificity
+ * is the whole selector's, the pseudo-element counted in. `p::before`
+ * matches `p`; `p ::before` and `p > ::before` have nothing left of their
+ * last compound and match any child, `p *` and `p > *`.
+ */
+function splitPseudoElement(rule) {
+    const m = PSEUDO_ELEMENT.exec(rule.selector);
+    if (!m)
+        return null;
+    const head = rule.selector.slice(0, m.index);
+    const trimmed = head.trimEnd();
+    const selector = !trimmed
+        ? '*'
+        : head !== trimmed || /[>+~]$/.test(trimmed)
+            ? `${trimmed} *`
+            : trimmed;
+    return {
+        which: (m[1] ?? 'marker').toLowerCase(),
+        rule: { ...rule, selector },
+    };
+}
+/**
+ * The compounds of a selector that test `:hover`, each without it (and
+ * without an `:active` beside it), and whether one is followed by a sibling
+ * combinator, which reaches the element's later siblings. `nested` where a
+ * `:hover` sits inside a functional pseudo-class — `:not(:hover)`,
+ * `:is(:hover)` — and reaches elements no compound names.
+ *
+ * A `:hover` in a compound's `:has()` is the one exception, since what it
+ * reaches is known: the compound, without its `:has()`, is an ancestor of
+ * the element the pointer is over — or an earlier sibling of it or of an
+ * ancestor, where the argument starts at a sibling (Selectors 4, 4.5). So
+ * it is given as an anchor (`has`) rather than making the rule `nested`.
+ *
+ * `:active` is not the pointer's here: nothing sets it (`setPointer` is
+ * handed none), so a selector that tests only it never changes as the
+ * pointer moves — Wikipedia's buttons' `:focus:not(:active)` among them.
+ * A press that sets it would have to be counted here too.
+ */
+export function pointerCompounds(selector) {
+    const out = {
+        compounds: [],
+        siblings: false,
+        nested: false,
+        has: [],
+    };
+    // the compounds at the top level, each with the combinator after it
+    const parts = [];
+    let start = 0;
+    let depth = 0;
+    let quote = '';
+    const split = (end, next) => {
+        const text = selector.slice(start, end).trim();
+        if (text)
+            parts.push({ text, next });
+        else if (parts.length && next !== ' ')
+            parts[parts.length - 1].next = next;
+    };
+    for (let i = 0; i < selector.length; i += 1) {
+        const c = selector[i];
+        if (quote) {
+            if (c === quote && selector[i - 1] !== '\\')
+                quote = '';
+            continue;
+        }
+        if (c === '\\')
+            i = escapeEnd(selector, i) - 1;
+        else if (c === '"' || c === "'")
+            quote = c;
+        else if (c === '(' || c === '[')
+            depth += 1;
+        else if (c === ')' || c === ']')
+            depth = Math.max(0, depth - 1);
+        else if (depth === 0 && /[\s>+~]/.test(c)) {
+            split(i, c === '+' || c === '~' || c === '>' ? c : ' ');
+            start = i + 1;
+        }
+    }
+    split(selector.length, '');
+    for (const { text, next } of parts) {
+        let bare = '';
+        let pointer = false;
+        depth = 0;
+        quote = '';
+        /** Where a top-level `:has(` starts in `bare`, and its argument in
+         *  `text`, while one is open. */
+        let hasAt = -1;
+        let argAt = -1;
+        let hasPointer = false;
+        let anchored = false;
+        const args = [];
+        for (let i = 0; i < text.length; i += 1) {
+            const c = text[i];
+            if (quote) {
+                if (c === quote && text[i - 1] !== '\\')
+                    quote = '';
+                bare += c;
+                continue;
+            }
+            if (c === '\\') {
+                const end = escapeEnd(text, i);
+                bare += text.slice(i, end);
+                i = end - 1;
+                continue;
+            }
+            if (c === '"' || c === "'")
+                quote = c;
+            else if (c === '(' || c === '[') {
+                if (depth === 0 && c === '(' && /:has$/i.test(bare)) {
+                    hasAt = bare.length - 4;
+                    argAt = i + 1;
+                    hasPointer = false;
+                }
+                depth += 1;
+            }
+            else if (c === ')' || c === ']') {
+                depth = Math.max(0, depth - 1);
+                if (depth === 0 && hasAt >= 0 && c === ')') {
+                    // the compound is kept without it: its argument is what the
+                    // pointer changes
+                    if (hasPointer) {
+                        anchored = true;
+                        args.push(text.slice(argAt, i));
+                        bare = bare.slice(0, hasAt);
+                    }
+                    else
+                        bare += c;
+                    hasAt = -1;
+                    continue;
+                }
+            }
+            else if (c === ':' && text[i + 1] !== ':') {
+                const m = POINTER_PSEUDO_AT.exec(text.slice(i));
+                if (m) {
+                    const hover = m[0].length === 6;
+                    if (depth > 0) {
+                        // whatever holds it in the argument, the element it tests is
+                        // in the anchor's subtree or a later sibling's
+                        if (hover && hasAt >= 0)
+                            hasPointer = true;
+                        else if (hover)
+                            out.nested = true;
+                    }
+                    else {
+                        if (hover)
+                            pointer = true;
+                        i += m[0].length - 1;
+                        continue;
+                    }
+                }
+            }
+            bare += c;
+        }
+        if (anchored) {
+            out.has.push({
+                anchor: bare.trim() || '*',
+                siblings: args.some((arg) => arg.split(',').some((one) => /^\s*[+~]/.test(one))),
+            });
+        }
+        if (!pointer)
+            continue;
+        out.compounds.push(bare.trim() || '*');
+        if (next === '+' || next === '~')
+            out.siblings = true;
+    }
+    return out;
+}
+/** `:hover` or `:active` at the start of a string, and nothing longer. */
+const POINTER_PSEUDO_AT = /^:(?:hover|active)(?![\w-])/i;
+/** `:hover` or `:active` anywhere in a selector. */
+const POINTER_PSEUDO = /:(?:hover|active)(?![\w-])/i;
+/**
+ * A selector compiled to a matcher over this adapter. css-select keeps the
+ * answers of a `:has()` above the subject, or of the ancestors a
+ * descendant combinator tried under one, for as long as the matcher lives
+ * (`cacheResults`) — which is the cascade's life, and a pointer move is no
+ * new cascade. So a selector that tests the pointer keeps none: with them,
+ * `#box:has(a:hover) .m` answered what it did before the first move, for
+ * good.
+ */
+function compileSelector(selector, adapter) {
+    return compile(noEmptyWords(selector), {
+        adapter,
+        xmlMode: false,
+        pseudos: PSEUDOS,
+        cacheResults: !POINTER_PSEUDO.test(selector),
+    });
+}
 function mapBucket(map, key) {
     let bucket = map.get(key);
     if (!bucket) {
@@ -87,14 +350,26 @@ function rightmostKey(selector) {
                 quote = '';
             continue;
         }
-        if (c === '"' || c === "'")
+        // an escaped character is part of a name, whatever it is — and a hex
+        // escape takes the space after it: `.c\6c ass` is the class `class`
+        if (c === '\\')
+            i = escapeEnd(selector, i) - 1;
+        else if (c === '"' || c === "'")
             quote = c;
         else if (c === '(' || c === '[')
             depth += 1;
         else if (c === ')' || c === ']')
             depth = Math.max(0, depth - 1);
         else if (depth === 0 &&
-            (c === ' ' || c === '>' || c === '+' || c === '~')) {
+            (c === ' ' ||
+                c === '>' ||
+                c === '+' ||
+                c === '~' ||
+                // CSS's other white space: `div\fp` is a descendant too
+                c === '\t' ||
+                c === '\n' ||
+                c === '\r' ||
+                c === '\f')) {
             start = i + 1;
         }
     }
@@ -105,31 +380,29 @@ function rightmostKey(selector) {
     let i = 0;
     while (i < compound.length) {
         const c = compound[i];
-        if (c === '#') {
-            const end = identEnd(compound, i + 1);
-            if (!id)
-                id = compound.slice(i + 1, end);
-            i = end;
-        }
-        else if (c === '.') {
-            const end = identEnd(compound, i + 1);
-            if (!cls)
-                cls = compound.slice(i + 1, end);
-            i = end;
+        // Names as the matcher reads them, escapes resolved: `.md\:flex` is
+        // the class `md:flex`, and filed under its first half it never matched.
+        if (c === '#' || c === '.') {
+            const name = readIdent(compound, i + 1);
+            if (c === '#' && !id)
+                id = name.value;
+            if (c === '.' && !cls)
+                cls = name.value;
+            i = Math.max(name.end, i + 1);
         }
         else if (c === '[') {
             i = balancedEnd(compound, i, '[', ']');
         }
         else if (c === ':') {
             const skip = compound[i + 1] === ':' ? 2 : 1;
-            const end = identEnd(compound, i + skip);
+            const end = Math.max(readIdent(compound, i + skip).end, i + skip);
             i = compound[end] === '(' ? balancedEnd(compound, end, '(', ')') : end;
         }
-        else if (/[a-zA-Z]/.test(c)) {
-            const end = identEnd(compound, i);
+        else if (startsIdent(compound, i)) {
+            const name = readIdent(compound, i);
             if (!tag)
-                tag = compound.slice(i, end).toLowerCase();
-            i = end;
+                tag = name.value.toLowerCase();
+            i = name.end;
         }
         else {
             i += 1;
@@ -143,12 +416,6 @@ function rightmostKey(selector) {
         return { kind: 'tag', name: tag };
     return { kind: 'any', name: '' };
 }
-function identEnd(text, from) {
-    let i = from;
-    while (i < text.length && /[a-zA-Z0-9_\-\\]/.test(text[i]))
-        i += 1;
-    return i;
-}
 function balancedEnd(text, from, open, close) {
     let depth = 0;
     for (let i = from; i < text.length; i += 1) {
@@ -163,13 +430,50 @@ function balancedEnd(text, from, open, close) {
     return text.length;
 }
 const NO_POINTER = { hovered: new Set(), active: new Set() };
+function faceOf(style) {
+    return {
+        family: style.fontFamily,
+        size: style.fontSize,
+        weight: style.fontWeight,
+        style: style.fontStyle,
+    };
+}
+function faceKey(style) {
+    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.
  */
 export class Cascade {
     _index = new RuleIndex();
+    /** The rules for pseudo-elements, kept apart: they never style the
+     *  element itself, and a document with none of them asks nothing. */
+    _pseudo = {
+        before: new RuleIndex(),
+        after: new RuleIndex(),
+        'first-letter': new RuleIndex(),
+        'first-line': new RuleIndex(),
+        marker: new RuleIndex(),
+    };
     _adapter;
+    /** The compounds of the selectors that test the pointer, each without
+     *  its `:hover` or `:active` (`pointerCompounds`), and their matchers,
+     *  compiled when a pointer move first asks (`hoverTouches`). */
+    _hoverCompounds = new Set();
+    _hoverMatchers = null;
+    /** Whether a pointer move can be restyled where it happened
+     *  (`HtmlViewNode._hoverInPlace`): false where a selector tests the
+     *  pointer inside a functional pseudo-class, which reaches elements no
+     *  compound names. */
+    hoverLocal = true;
+    /** Whether a compound that tests the pointer is followed by a sibling
+     *  combinator, so an element's later siblings restyle with it. */
+    hoverSiblings = false;
+    /** The compounds whose `:has()` tests the pointer, each without it, and
+     *  whether its argument starts at a sibling (`hoverAnchors`). */
+    _hoverAnchors = new Map();
+    _anchorMatchers = null;
     _pointer = NO_POINTER;
     initial;
     look;
@@ -183,20 +487,74 @@ export class Cascade {
     /** Every width at which some `@media` rule changes its mind, in CSS
      *  pixels — the unit the author wrote them in. */
     breakpoints;
-    constructor(sheets, look, viewportWidth, viewportHeight, scale = 1) {
+    /** The counter styles the sheets define, over the predefined ones. */
+    counterStyles;
+    /** A face's x-height, for `ex`, where the fonts can say. */
+    _xHeightOf;
+    _xHeights = new Map();
+    /** The advance of a face's "0", for `ch`, likewise. */
+    _zeroWidthOf;
+    _zeroWidths = new Map();
+    /** A face's own line height, for `lh` where `line-height` is `normal`,
+     *  likewise. */
+    _normalLineOf;
+    _normalLines = new Map();
+    /** Whether any declaration sets a custom property or reads one: without
+     *  one, no element's style asks about them. */
+    _vars = false;
+    /** Whether any declaration is in a unit of the viewport's width — `vw`,
+     *  `vmin`, `vmax` — or of its height, `vh` and the same two: a style
+     *  holds such a length as a number, so it is computed again when that
+     *  side of the viewport moves (`HtmlViewNode._update`). */
+    readsViewportWidth = false;
+    readsViewportHeight = false;
+    /** The families the document loads itself (`fonts.ts`), or null for a
+     *  document with no `@font-face`. */
+    _families;
+    _mapFamilies;
+    /** Whether any declaration has a length in `lh` or `rlh`: only then is
+     *  the line height settled ahead of the declarations that read it. */
+    _lh = false;
+    constructor(sheets, look, viewportWidth, viewportHeight, scale = 1, xHeight = null, zeroWidth = null, normalLine = null, families = null) {
+        this._xHeightOf = xHeight;
+        this._zeroWidthOf = zeroWidth;
+        this._normalLineOf = normalLine;
+        this._families = families;
+        this._mapFamilies = families
+            ? (list) => families.map(list)
+            : undefined;
         this.look = look;
-        this.initial = initialStyle(look);
+        this.initial = initialStyle(look, scale);
         this.viewportWidth = viewportWidth;
         this.viewportHeight = viewportHeight;
         this.scale = scale;
         const breakpoints = new Set();
+        const counterStyles = new Map();
         for (const sheet of sheets) {
-            for (const rule of sheet.rules)
-                this._index.add(rule);
+            // a counter style's rule whole over any before it of its name
+            for (const { prelude, declarations } of sheet.counterStyles ?? []) {
+                const style = counterStyleRule(prelude, declarations);
+                if (style)
+                    counterStyles.set(style.name, style.rule);
+            }
+            for (const rule of sheet.rules) {
+                if (!this._vars && usesVars(rule.declarations))
+                    this._vars = true;
+                this._noteViewportUnits(rule.declarations);
+                if (!this._lh && usesLh(rule.declarations))
+                    this._lh = true;
+                const pseudo = splitPseudoElement(rule);
+                if (pseudo)
+                    this._pseudo[pseudo.which].add(pseudo.rule);
+                else
+                    this._index.add(rule);
+                this._noteHover((pseudo?.rule ?? rule).selector);
+            }
             for (const bp of sheet.breakpoints)
                 breakpoints.add(bp);
         }
         this.breakpoints = [...breakpoints].sort((a, b) => a - b);
+        this.counterStyles = new CounterStyles(counterStyles);
         // css-select's default adapter is domutils; `isHovered` and `isActive`
         // are its documented hooks for exactly this, so `:hover` costs an
         // adapter field rather than a fork of the matcher.
@@ -207,18 +565,124 @@ export class Cascade {
         this._adapter = {
             ...DomUtils,
             isTag,
+            // a type selector sees `tagOf`'s name — XHTML's `<svg:svg>` is an
+            // `svg` — asked only of a name that could be one: this runs for every
+            // type selector tried, and the parser has lowercased the rest
+            getName: (el) => el.name.endsWith(':svg') ? tagOf(el) : el.name,
             isHovered: (el) => this._pointer.hovered.has(el),
             isActive: (el) => this._pointer.active.has(el),
             isVisited: () => false,
         };
     }
+    /** Whether declarations read the viewport's width or height (`vw`,
+     *  `vh`, `vmin`, `vmax`), noted on the cascade. */
+    _noteViewportUnits(declarations) {
+        if (this.readsViewportWidth && this.readsViewportHeight)
+            return;
+        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();
+                if (unit !== 'vh')
+                    this.readsViewportWidth = true;
+                if (unit !== 'vw')
+                    this.readsViewportHeight = true;
+            }
+        }
+    }
     /** Whether a pointer move can change what this cascade produces. */
     get hoverSensitive() {
-        return this._index.hoverSensitive;
+        return (this._index.hoverSensitive ||
+            this._pseudo.before.hoverSensitive ||
+            this._pseudo.after.hoverSensitive ||
+            this._pseudo['first-letter'].hoverSensitive ||
+            this._pseudo['first-line'].hoverSensitive ||
+            this._pseudo.marker.hoverSensitive);
     }
     setPointer(pointer) {
         this._pointer = pointer;
     }
+    /**
+     * Whether the pointer entering or leaving `el` can change a style: one of
+     * the compounds a selector tests the pointer in matches it, the pointer
+     * aside. A move between two paragraphs of a page whose only such rule is
+     * `a:hover` touches nothing, and restyles nothing.
+     */
+    hoverTouches(el) {
+        this._hoverMatchers ??= [...this._hoverCompounds].flatMap((c) => {
+            const match = this._compile(c);
+            return match ? [match] : [];
+        });
+        for (const match of this._hoverMatchers)
+            if (match(el))
+                return true;
+        return false;
+    }
+    /**
+     * The elements whose `:has()` may have changed its answer as `el` was
+     * hovered or left: the ancestors of it a compound whose `:has()` tests
+     * the pointer names, and their earlier siblings and its own where the
+     * argument starts at a sibling — a superset, which is restyled and found
+     * the same where it did not. Into `into`.
+     */
+    hoverAnchors(el, into) {
+        if (!this._hoverAnchors.size)
+            return;
+        this._anchorMatchers ??= [...this._hoverAnchors].flatMap(([anchor, siblings]) => {
+            const match = this._compile(anchor);
+            return match ? [{ match, siblings }] : [];
+        });
+        const siblings = this._anchorMatchers.some((m) => m.siblings);
+        for (let at = el; at;) {
+            if (at !== el) {
+                for (const { match } of this._anchorMatchers) {
+                    if (match(at)) {
+                        into.push(at);
+                        break;
+                    }
+                }
+            }
+            if (siblings) {
+                for (let s = at.prev; s; s = s.prev) {
+                    if (!isTag(s))
+                        continue;
+                    for (const { match, siblings: apart } of this._anchorMatchers) {
+                        if (apart && match(s)) {
+                            into.push(s);
+                            break;
+                        }
+                    }
+                }
+            }
+            const parent = at.parent;
+            at = parent && isTag(parent) ? parent : null;
+        }
+    }
+    _noteHover(selector) {
+        if (!/:(?:hover|active)/i.test(selector))
+            return;
+        const found = pointerCompounds(selector);
+        if (found.nested)
+            this.hoverLocal = false;
+        if (found.siblings)
+            this.hoverSiblings = true;
+        for (const c of found.compounds)
+            this._hoverCompounds.add(c);
+        for (const { anchor, siblings } of found.has) {
+            this._hoverAnchors.set(anchor, siblings || (this._hoverAnchors.get(anchor) ?? false));
+        }
+    }
+    /** A selector compiled as a rule's is, or null where css-select refuses
+     *  it, as a rule it refuses drops out of the cascade. */
+    _compile(selector) {
+        try {
+            return compileSelector(selector, this._adapter);
+        }
+        catch {
+            return null;
+        }
+    }
     /** Which media band a device-pixel width falls in. Two widths in the same
      *  band produce identical styles, which is what lets a resize skip
      *  restyling. */
@@ -233,14 +697,323 @@ export class Cascade {
         }
         return band;
     }
+    /** Computed styles by sharing key, for one build (`sharedStyleFor`): one
+     *  map for the elements shared without matching, one for the elements
+     *  shared by what they matched. */
+    _shared = new Map();
+    _sharedByMatch = new Map();
+    _nextShareKey = 1;
+    /** Custom property sets by what made them, for one build (`_customFor`). */
+    _customs = new Map();
+    _ids = new WeakMap();
+    _nextId = 1;
+    /** A box tree is about to be built: the styles shared in the last build
+     *  were computed against a pointer and a viewport that may have moved. */
+    beginSharing() {
+        this._shared.clear();
+        this._sharedByMatch.clear();
+        this._customs.clear();
+    }
+    /**
+     * An element's custom properties: its parent's, or its own over them —
+     * shared by every element whose parent has the same ones and whose own
+     * come from the same declarations. Tailwind 4 sets thirty-five of them on
+     * every element (`*, ::before, ::after { --tw-shadow: 0 0 #0000; … }`),
+     * and a set per element was a fifth of building the boxes; it also kept
+     * each element's `var()`s from being replaced once for its siblings,
+     * which `substituteIn` remembers by the set they were read against.
+     */
+    _customFor(parentStyle, candidates) {
+        let key = '';
+        for (const c of candidates) {
+            if (!this._hasCustom(c))
+                continue;
+            key += `${this._idOf(c.declarations)}:${c.only},`;
+        }
+        const parent = parentStyle.custom;
+        if (!key)
+            return parent;
+        key = `${parent ? this._idOf(parent) : 0}|${key}`;
+        const hit = this._customs.get(key);
+        if (hit)
+            return hit;
+        const own = new Map();
+        for (const c of candidates) {
+            for (const d of pick(c))
+                if (d.custom)
+                    own.set(d.prop, d.value);
+        }
+        const made = customProperties(own, parent);
+        this._customs.set(key, made);
+        return made;
+    }
+    /** Whether a candidate sets a custom property. */
+    _hasCustom(c) {
+        if (c.only >= 0)
+            return !!c.declarations[c.only].custom;
+        let has = CUSTOM_IN.get(c.declarations);
+        if (has === undefined) {
+            has = c.declarations.some((d) => !!d.custom);
+            CUSTOM_IN.set(c.declarations, has);
+        }
+        return has;
+    }
+    /** A number for an object, to key a string by. */
+    _idOf(of) {
+        let id = this._ids.get(of);
+        if (id === undefined) {
+            id = this._nextId++;
+            this._ids.set(of, id);
+        }
+        return id;
+    }
+    /**
+     * `styleFor`, shared between the elements that must compute the same
+     * style, with the key this element's children share under.
+     *
+     * A style is a function of the parent's style, the rules that match, the
+     * presentational attributes, the inline style and whether the parent is a
+     * flex container. Outside the rules `UNSHAREABLE` names, what matches
+     * depends only on the element's tag and attributes and its ancestors', and
+     * the hints read nothing else either. So the key is the parent's key, the
+     * flex flag, the tag and every attribute — plus the pointer state where a
+     * rule asks for it — and an element whose key has been computed in this
+     * build takes that style object, matching nothing. A long document is a
+     * few kinds of element many times over: the benchmark's 600 KB report is
+     * 9,039 elements and 110 keys, and computing every style again was a third
+     * of an edit.
+     *
+     * An element a rule `UNSHAREABLE` could reach is matched, since where it
+     * sits decides what matches — and then shared by what matched: the same
+     * parent, attributes and rules make the same style. That is what keeps a
+     * striped table from being a style per row, and it keeps the key its
+     * children share under, which an element-per-key would have taken from the
+     * whole subtree.
+     *
+     * The style is handed out shared, so nothing may write to it — nothing
+     * does after the cascade, and `rootStyle` does not go through here.
+     */
+    sharedStyleFor(el, parentStyle, parentKey, inFlexContainer) {
+        let key = `${parentKey}\u0001${inFlexContainer ? 1 : 0}`;
+        const tag = tagOf(el);
+        key += `\u0001${tag.length}:${tag}`;
+        if (this._index.hoverSensitive) {
+            if (this._pointer.hovered.has(el))
+                key += '\u0001:hover';
+            if (this._pointer.active.has(el))
+                key += '\u0001:active';
+        }
+        const attribs = el.attribs;
+        for (const name in attribs) {
+            const value = attribs[name];
+            key += `\u0001${name.length}:${name}=${value.length}:${value}`;
+        }
+        if (!this._shareable(el)) {
+            const matched = [];
+            const candidates = this._candidates(el, matched);
+            key += `\u0001${matched.join(',')}`;
+            let shared = this._sharedByMatch.get(key);
+            if (shared === undefined) {
+                shared = {
+                    style: this._computeStyle(el, parentStyle, inFlexContainer, candidates),
+                    key: this._nextShareKey++,
+                };
+                this._sharedByMatch.set(key, shared);
+            }
+            return shared;
+        }
+        let shared = this._shared.get(key);
+        if (shared === undefined) {
+            shared = {
+                style: this.styleFor(el, parentStyle, inFlexContainer),
+                key: this._nextShareKey++,
+            };
+            this._shared.set(key, shared);
+        }
+        return shared;
+    }
+    /** Whether no rule `UNSHAREABLE` names could reach this element: the same
+     *  buckets `_candidates` looks in. */
+    _shareable(el) {
+        const index = this._index;
+        if (index.ownStyleEverywhere)
+            return false;
+        if (index.ownStyleTags.size && index.ownStyleTags.has(tagOf(el))) {
+            return false;
+        }
+        if (index.ownStyleIds.size) {
+            const id = attr(el, 'id');
+            if (id && index.ownStyleIds.has(id))
+                return false;
+        }
+        if (index.ownStyleClasses.size) {
+            const className = attr(el, 'class');
+            if (className) {
+                for (const name of className.split(/\s+/)) {
+                    if (name && index.ownStyleClasses.has(name))
+                        return false;
+                }
+            }
+        }
+        return true;
+    }
     /**
-     * The computed style for one element, given its parent's. Called once per
-     * element per style pass, in document order — the box builder drives it,
-     * so there is no second traversal and no map of styles to allocate.
+     * The computed style for one element, given its parent's. The box builder
+     * asks for every element in document order, through `sharedStyleFor`, so
+     * a style is computed only for the elements with none to share.
      */
     styleFor(el, parentStyle, inFlexContainer) {
+        return this._computeStyle(el, parentStyle, inFlexContainer, this._candidates(el));
+    }
+    /**
+     * The style of an element's `::before` or `::after`, or null when it has
+     * none: no rule reaches it, or the rules that do leave `content` at
+     * `normal` or `none`, which make no box (CSS 2.1 12.2). It inherits from
+     * the element's own style, as a pseudo-element does, and a flex
+     * container's are flex items. Not shared: few elements have one, and where
+     * a rule gives every element one — a clearfix — the style is the cost of
+     * the box it makes.
+     */
+    pseudoStyleFor(el, which, elementStyle) {
+        const index = this._pseudo[which];
+        if (!index.size || !index.reaches(el))
+            return null;
+        const candidates = [];
+        this._matchInto(index, el, candidates);
+        if (!candidates.length)
+            return null;
+        // One that no rule gives a `content` is none, whatever else reaches it —
+        // `content` is not inherited, and its initial `normal` is nothing here.
+        // Tailwind's `*, ::before, ::after` reaches both of every element's.
+        if (!candidates.some(setsContent))
+            return null;
+        candidates.sort(byCascade);
+        const style = this._computeStyle(el, elementStyle, elementStyle.display === 'flex' || elementStyle.display === 'inline-flex', candidates);
+        return style.content === 'normal' || style.content === 'none'
+            ? null
+            : style;
+    }
+    /**
+     * The rules for an element's `::first-letter`, or null when none reaches
+     * it. They are matched against the element here, and its style computed
+     * later by `firstLetterStyle`, because the pseudo-element inherits from
+     * the box its letter turns out to be in — a `<span>` the block opens with,
+     * a `::before` — which the builder has not reached yet.
+     */
+    firstLetterRules(el) {
+        const index = this._pseudo['first-letter'];
+        if (!index.size || !index.reaches(el))
+            return null;
+        const candidates = [];
+        this._matchInto(index, el, candidates);
+        if (!candidates.length)
+            return null;
+        candidates.sort(byCascade);
+        return { el, candidates };
+    }
+    /** Whether any rule styles a `::first-line`: a document with none asks
+     *  nothing more of its blocks. */
+    get hasFirstLine() {
+        return this._pseudo['first-line'].size > 0;
+    }
+    /**
+     * A list item's `::marker` style, inheriting from its own, or null when no
+     * rule reaches it (CSS Lists 3, 3.1): the colour and the font a bullet or
+     * a number is set in, and a `content` it is set as instead.
+     */
+    markerStyle(el, style) {
+        const index = this._pseudo.marker;
+        if (!index.size || !index.reaches(el))
+            return null;
+        const candidates = [];
+        this._matchInto(index, el, candidates);
+        if (!candidates.length)
+            return null;
+        candidates.sort(byCascade);
+        const out = this._computeStyle(el, style, false, candidates);
+        // a marker's direction is its own unless a rule says otherwise (the
+        // HTML style sheet's `::marker { unicode-bidi: isolate }`)
+        const set = candidates.some((c) => c.declarations.some((d) => d.prop === 'unicode-bidi'));
+        if (!set)
+            out.unicodeBidi = 'isolate';
+        return out;
+    }
+    /**
+     * An element's `::first-line` style, inheriting from its own, or null
+     * when no rule reaches it (CSS 2.1 5.12.1).
+     */
+    firstLineStyle(el, style) {
+        const index = this._pseudo['first-line'];
+        if (!index.size)
+            return null;
+        const candidates = [];
+        this._matchInto(index, el, candidates);
+        if (!candidates.length)
+            return null;
+        candidates.sort(byCascade);
+        return this._computeStyle(el, style, false, candidates);
+    }
+    /**
+     * The style of a `::first-letter` inside a box of `parentStyle`. It is an
+     * inline box, or a float where it floats, whatever the rules say of its
+     * `display` or its `position` (CSS 2.1 5.12.2).
+     */
+    firstLetterStyle(rules, parentStyle) {
+        const style = this._computeStyle(rules.el, parentStyle, false, rules.candidates);
+        style.display = style.float === 'none' ? 'inline' : 'block';
+        style.position = 'static';
+        return style;
+    }
+    /** The x-height of a style's font: the font's own, asked once per face,
+     *  or half an em. */
+    _exOf(style) {
+        const key = faceKey(style);
+        let ex = this._xHeights.get(key);
+        if (ex === undefined) {
+            ex = this._xHeightOf?.(faceOf(style)) ?? NaN;
+            if (!(ex > 0))
+                ex = style.fontSize * 0.5;
+            this._xHeights.set(key, ex);
+        }
+        return ex;
+    }
+    /** The advance of a style's font's "0": the font's own, asked once per
+     *  face, or half an em. */
+    _chOf(style) {
+        const key = faceKey(style);
+        let ch = this._zeroWidths.get(key);
+        if (ch === undefined) {
+            ch = this._zeroWidthOf?.(faceOf(style)) ?? NaN;
+            if (!(ch > 0))
+                ch = style.fontSize * 0.5;
+            this._zeroWidths.set(key, ch);
+        }
+        return ch;
+    }
+    /** A style's computed line height as a length, for `lh`: `normal` as
+     *  its font's own, asked once per face, or 1.2em. */
+    _lineHeightOf(style) {
+        const set = style.lineHeight;
+        if (set !== 'normal') {
+            return style.lineHeightIsLength ? set : set * style.fontSize;
+        }
+        const key = faceKey(style);
+        let line = this._normalLines.get(key);
+        if (line === undefined) {
+            line = this._normalLineOf?.(faceOf(style)) ?? NaN;
+            if (!(line > 0))
+                line = style.fontSize * 1.2;
+            this._normalLines.set(key, line);
+        }
+        return line;
+    }
+    /** `styleFor`, from the rules and hints already gathered for `el`. */
+    _computeStyle(el, parentStyle, inFlexContainer, candidates) {
         const style = inherit(parentStyle, this.initial);
-        const candidates = this._candidates(el);
+        // custom properties first, in cascade order, so every `var()` in the
+        // declarations below finds the one that wins
+        if (this._vars)
+            style.custom = this._customFor(parentStyle, candidates);
         // The unit context has to be built twice: once with the parent's font
         // size, so a `font-size: 1.2em` in the cascade resolves against the
         // right em, and again after the font size is settled so every *other*
@@ -248,28 +1021,150 @@ export class Cascade {
         const ctxParent = {
             em: parentStyle.fontSize,
             rem: this.initial.fontSize,
+            initial: this.initial,
             vw: this.viewportWidth,
             vh: this.viewportHeight,
             scale: this.scale,
+            ex: () => this._exOf(parentStyle),
+            ch: () => this._chOf(parentStyle),
+            families: this._mapFamilies,
+            lh: () => this._lineHeightOf(parentStyle),
+            rlh: () => this._lineHeightOf(this.initial),
         };
+        // 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.
+        let sized = false;
+        let keyword = false;
         for (const c of candidates) {
             for (const d of pick(c)) {
-                if (d.prop === 'font-size' || d.prop === 'font') {
-                    applyDeclaration(style, parentStyle, d.prop, d.value, ctxParent);
+                if (d.prop === 'font-family' ||
+                    d.prop === 'font-weight' ||
+                    d.prop === 'font-style') {
+                    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
+                    // leaves the size where it was, and says nothing of it
+                    const was = style.fontSize;
+                    style.fontSize = NaN;
+                    this._apply(style, parentStyle, d, ctxParent);
+                    if (Number.isNaN(style.fontSize)) {
+                        style.fontSize = was;
+                    }
+                    else {
+                        sized = true;
+                        keyword = !d.vars && sizeKeyword(d.prop, d.value);
+                    }
+                }
+            }
+        }
+        // The generic `monospace` on its own has a smaller size than the rest,
+        // 13 pixels to their 16 (the "fixed" font size every browser keeps):
+        // an element whose family becomes it, or stops being it, scales the
+        // size it inherits by that, and a keyword size is read from the
+        // smaller scale — the size it sets itself stays its own. Blink's
+        // CheckForGenericFamilyChange, and why a `<pre>` in a browser is 13px.
+        const mono = monospaceOnly(style.fontFamily);
+        if (sized ? keyword && mono : mono !== monospaceOnly(parentStyle.fontFamily)) {
+            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 = {
+            fontFamily: style.fontFamily,
+            fontSize: style.fontSize,
+            fontWeight: style.fontWeight,
+            fontStyle: style.fontStyle,
+        };
+        let line = null;
+        const ctx = {
+            ...ctxParent,
+            em: style.fontSize,
+            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 — 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' || d.prop === 'font') {
+                        this._apply(style, parentStyle, d, ctx);
+                    }
                 }
             }
+            style.fontSize = face.fontSize;
+            line = {
+                ...face,
+                lineHeight: style.lineHeight,
+                lineHeightIsLength: style.lineHeightIsLength,
+            };
         }
-        const ctx = { ...ctxParent, em: style.fontSize };
+        const settled = style.fontSize;
         for (const c of candidates) {
             for (const d of pick(c)) {
-                if (d.prop === 'font-size')
+                if (d.prop === 'font-size' || d.custom)
                     continue;
-                applyDeclaration(style, parentStyle, d.prop, d.value, ctx);
+                this._apply(style, parentStyle, d, ctx);
             }
         }
+        // A `font` is applied again, to keep its other longhands in cascade
+        // order, and it sets the size it names as well: the size is the first
+        // pass's, which the declarations that outrank the `font` had their say
+        // in, and the scale after them. `span { font: 15px/1 Ahem }` under
+        // `.b > span { font-size: 3.75em }` was 15px, its `em`s 3.75 of its
+        // parent's.
+        style.fontSize = settled;
+        // A table never keeps HTML's alignment, `-webkit-center` and its kin:
+        // the `<td align="center">` every mail centres its body table in
+        // centres the table, and the text in its cells stays at their start —
+        // as Blink resets it ("tables never support the -webkit-* values for
+        // text-align"). An author's own `text-align: center` is not HTML's, and
+        // is inherited into the table as it always was.
+        if (style.alignBlocks !== null && tagOf(el) === 'table') {
+            style.textAlign = 'start';
+            style.alignBlocks = null;
+        }
+        settleClamp(style, parentStyle);
+        settleOverflow(style);
+        settleContentVisibility(style);
         blockify(style, inFlexContainer);
+        decorate(style);
+        // which faces of the document's own families this family, weight and
+        // slant ask for — known only now, with all three computed
+        this._families?.note(style);
         return style;
     }
+    /** One declaration, its `var()`s replaced first. One that names a
+     *  custom property with no value, and has no fallback, is invalid at
+     *  computed-value time, and the property is as though `unset`. */
+    _apply(style, parentStyle, d, ctx) {
+        if (!d.vars) {
+            applyDeclaration(style, parentStyle, d.prop, d.value, ctx);
+            return;
+        }
+        // unset first: a value that does not parse once it is substituted is
+        // invalid at computed-value time, and does not leave the property what
+        // an earlier declaration gave it
+        if (isInherited(d.prop)) {
+            applyDeclaration(style, parentStyle, d.prop, 'inherit', ctx);
+        }
+        else {
+            initialOne(style, this.initial, d.prop);
+        }
+        const value = substituteIn(d.value, style.custom);
+        if (value !== null)
+            applyDeclaration(style, parentStyle, d.prop, value, ctx);
+    }
     /**
      * The root's style — nothing above it to inherit from.
      *
@@ -278,24 +1173,44 @@ export class Cascade {
      * a `<body>` would have had: the UA sheet's margin and font, and any
      * author `body { … }` rule. Without it a fragment renders hard against the
      * left edge while the same markup inside `<html><body>` does not, which
-     * reads as a bug in the renderer rather than as a missing element.
+     * reads as a bug in the renderer rather than as a missing element. With
+     * no `<html>` either, the body inherits from an `<html>` that author
+     * `html { … }` rules have styled, as the one a browser implies would be.
+     *
+     * A document with a `<body>` and no `<html>` — the usual shape of a page
+     * that starts `<!DOCTYPE html><title>` — has the root box standing in for
+     * 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) {
-        const style = { ...this.initial };
+    rootStyle(hasBody, hasHtml = true) {
+        const style = copyStyle(this.initial);
         style.display = 'block';
-        if (hasBody)
-            return style;
+        if (hasBody && hasHtml)
+            return { style, html: null };
         const synthetic = new DomElement('body', {}, []);
-        const bodyStyle = this.styleFor(synthetic, style, false);
+        let parent = style;
+        let html = null;
+        if (!hasHtml) {
+            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.
-        bodyStyle.display = 'block';
-        bodyStyle.position = 'static';
-        bodyStyle.float = 'none';
-        return bodyStyle;
+        return { style: asRoot(this.styleFor(synthetic, parent, false)), html };
     }
-    _candidates(el) {
-        const out = [];
+    /** The rules of `index` that match `el`, pushed onto `out` as candidates,
+     *  and their ids onto `matched` in the order they were tried. */
+    _matchInto(index, el, out, matched) {
         // A media query's width is CSS pixels; the viewport is kept in device.
         const width = this.viewportWidth / this.scale;
         const consider = (bucket) => {
@@ -308,10 +1223,7 @@ export class Cascade {
                 if (!indexed.compiled) {
                     indexed.compiled = true;
                     try {
-                        indexed.match = compile(rule.selector, {
-                            adapter: this._adapter,
-                            xmlMode: false,
-                        });
+                        indexed.match = compileSelector(rule.selector, this._adapter);
                     }
                     catch {
                         // A selector this matcher does not know (`::-moz-…`, a CSS4 form
@@ -322,26 +1234,35 @@ export class Cascade {
                 }
                 if (!indexed.match || !indexed.match(el))
                     continue;
+                matched?.push(indexed.id);
                 const origin = rule.order < 0 ? Origin.UserAgent : Origin.Author;
                 pushRule(out, rule, origin);
             }
         };
         const id = attr(el, 'id');
         if (id)
-            consider(this._index.byId.get(id));
+            consider(index.byId.get(id));
         const className = attr(el, 'class');
         if (className) {
             for (const name of className.split(/\s+/)) {
                 if (name)
-                    consider(this._index.byClass.get(name));
+                    consider(index.byClass.get(name));
             }
         }
-        consider(this._index.byTag.get(tagOf(el)));
-        consider(this._index.universal);
+        consider(index.byTag.get(tagOf(el)));
+        consider(index.universal);
+    }
+    /** Every rule and hint that applies to `el`, in cascade order — and, into
+     *  `matched` when it is passed, the ids of the rules, in the order they
+     *  were tried. */
+    _candidates(el, matched) {
+        const out = [];
+        this._matchInto(this._index, el, out, matched);
         const hints = presentationHints(el);
         if (hints.length) {
             out.push({
                 origin: Origin.Presentation,
+                layer: null,
                 specificity: 0,
                 order: 0,
                 declarations: hints,
@@ -351,11 +1272,17 @@ export class Cascade {
         const inline = attr(el, 'style');
         if (inline) {
             const declarations = parseDeclarations(inline);
+            if (!this._vars && usesVars(declarations))
+                this._vars = true;
+            this._noteViewportUnits(declarations);
+            if (!this._lh && usesLh(declarations))
+                this._lh = true;
             const normal = declarations.filter((d) => !d.important);
             const important = declarations.filter((d) => d.important);
             if (normal.length) {
                 out.push({
                     origin: Origin.Inline,
+                    layer: null,
                     specificity: 0,
                     order: 0,
                     declarations: normal,
@@ -365,6 +1292,7 @@ export class Cascade {
             if (important.length) {
                 out.push({
                     origin: Origin.InlineImportant,
+                    layer: null,
                     specificity: 0,
                     order: 0,
                     declarations: important,
@@ -376,6 +1304,144 @@ export class Cascade {
         return out;
     }
 }
+/** An implied element's style as the root box's: its look, not its role —
+ *  the root is still a block, in flow, and the initial containing block. */
+function asRoot(style) {
+    style.display = 'block';
+    style.position = 'static';
+    style.float = 'none';
+    return style;
+}
+/** `: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. */
+const PSEUDOS = {
+    root: (el) => el.name === 'html' && !(el.parent && isTag(el.parent)),
+    // 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)`
+    lang: (el, code) => {
+        const ranges = (code ?? '')
+            .split(',')
+            .map((range) => range.trim().replace(/^['"]|['"]$/g, ''))
+            .filter((range) => range.length > 0)
+            .map((range) => asciiLower(range).split('-'));
+        let root = el;
+        for (let node = el; node;) {
+            const value = node.attribs['xml:lang'] ?? node.attribs.lang;
+            if (value != null) {
+                if (!value)
+                    return ranges.some((range) => range[0] === '');
+                const tag = asciiLower(value).split('-');
+                return ranges.some((range) => langRangeMatches(tag, range));
+            }
+            root = node;
+            const parent = node.parent;
+            node = parent && isTag(parent) ? parent : null;
+        }
+        // with no element saying, the document's, as its `<meta>` sets it —
+        // searched from the document, where a fragment's `<meta>` is a
+        // sibling of what it covers
+        const pragma = pragmaLanguage(root.parent ?? root);
+        if (!pragma)
+            return ranges.some((range) => range[0] === '');
+        const tag = asciiLower(pragma).split('-');
+        return ranges.some((range) => langRangeMatches(tag, range));
+    },
+};
+/** 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;
+/**
+ * A selector with its `[attr~=""]` made one that matches nothing: an empty
+ * string is no word of a list, and such a selector represents nothing
+ * (Selectors 3, 6.3.1) — which the matcher's `~=` is not told, taking the
+ * empty word for one between two spaces, or at either end of none.
+ */
+function noEmptyWords(selector) {
+    if (!selector.includes('~='))
+        return selector;
+    return selector.replace(/\[[^\]"']*~=\s*(?:""|'')\s*(?:[is]\s*)?\]/gi, ':not(*)');
+}
+/**
+ * A document's language as a `<meta http-equiv="content-language">` sets
+ * it — HTML's pragma-set default language, the last such `<meta>`'s
+ * `content` up to its first white space, and none where it lists more
+ * than one — by the document's root element, found once.
+ */
+function pragmaLanguage(root) {
+    let lang = PRAGMA_LANGUAGE.get(root);
+    if (lang !== undefined)
+        return lang;
+    lang = '';
+    const stack = [root];
+    while (stack.length) {
+        const node = stack.pop();
+        if (isTag(node) &&
+            node.name === 'meta' &&
+            node.attribs['http-equiv']?.trim().toLowerCase() === 'content-language') {
+            const content = node.attribs.content;
+            if (content !== undefined && !content.includes(',')) {
+                const candidate = content.trim().split(/[\t\n\f\r ]/)[0];
+                if (candidate)
+                    lang = candidate;
+            }
+        }
+        // in document order: the last one pushed is taken first
+        for (let i = node.children.length - 1; i >= 0; i -= 1) {
+            const child = node.children[i];
+            if (isTag(child))
+                stack.push(child);
+        }
+    }
+    PRAGMA_LANGUAGE.set(root, lang);
+    return lang;
+}
+const PRAGMA_LANGUAGE = new WeakMap();
+/** RFC 4647's extended filtering, of a tag's subtags by a range's, as
+ *  css-select does it. */
+function langRangeMatches(tag, range) {
+    if (range[0] !== '*' && range[0] !== tag[0])
+        return false;
+    let at = 1;
+    for (let r = 1; r < range.length; r += 1) {
+        if (range[r] === '*')
+            continue;
+        while (at < tag.length && tag[at] !== range[r]) {
+            if (tag[at++].length <= 1)
+                return false;
+        }
+        if (at >= tag.length)
+            return false;
+        at += 1;
+    }
+    return true;
+}
+/** Whether any of these declarations sets a custom property or reads one. */
+function usesVars(declarations) {
+    for (const d of declarations)
+        if (d.custom || d.vars)
+            return true;
+    return false;
+}
+/** Whether any of the declarations has a length in `lh` or `rlh`. */
+function usesLh(declarations) {
+    for (const d of declarations)
+        if (LH.test(d.value))
+            return true;
+    return false;
+}
+const LH = /\d\.?r?lh\b/i;
+/** Whether a candidate declares `content`. */
+function setsContent(c) {
+    for (const d of pick(c))
+        if (d.prop === 'content')
+            return true;
+    return false;
+}
+/** Whether a rule's declarations set a custom property, by the array. */
+const CUSTOM_IN = new WeakMap();
 function pick(c) {
     return c.only < 0 ? c.declarations : [c.declarations[c.only]];
 }
@@ -390,6 +1456,7 @@ function pushRule(out, rule, origin) {
     if (!hasImportant) {
         out.push({
             origin,
+            layer: rule.layer,
             specificity: rule.specificity,
             order: rule.order,
             declarations: rule.declarations,
@@ -407,6 +1474,7 @@ function pushRule(out, rule, origin) {
                     ? Origin.UserAgent
                     : Origin.AuthorImportant
                 : origin,
+            layer: rule.layer,
             specificity: rule.specificity,
             order: rule.order,
             declarations: rule.declarations,
@@ -417,10 +1485,34 @@ function pushRule(out, rule, origin) {
 function byCascade(a, b) {
     if (a.origin !== b.origin)
         return a.origin - b.origin;
+    if (a.layer !== b.layer) {
+        // a later layer wins over an earlier one whatever the specificity, and
+        // for `!important` an earlier one does (CSS Cascade 5, 6.4)
+        const by = compareLayers(a.layer, b.layer);
+        if (by !== 0)
+            return a.origin >= Origin.AuthorImportant ? -by : by;
+    }
     if (a.specificity !== b.specificity)
         return a.specificity - b.specificity;
     return a.order - b.order;
 }
+/**
+ * Which of two layers wins for a normal declaration: a later one over an
+ * earlier one, and a rule in no layer over any, as a rule directly in a
+ * layer is over the layers inside it.
+ */
+function compareLayers(a, b) {
+    if (a === null)
+        return b === null ? 0 : 1;
+    if (b === null)
+        return -1;
+    const n = Math.min(a.length, b.length);
+    for (let i = 0; i < n; i += 1) {
+        if (a[i] !== b[i])
+            return a[i] - b[i];
+    }
+    return b.length - a.length;
+}
 /**
  * The presentational attributes, as declarations. They sit above the UA
  * sheet and below every author rule, which is where HTML says they go — and
@@ -437,9 +1529,44 @@ function presentationHints(el) {
     const align = attr(el, 'align');
     if (align) {
         const v = align.toLowerCase();
-        if (tag === 'img' && (v === 'left' || v === 'right'))
+        const side = v === 'middle' ? 'center' : v;
+        if ((tag === 'img' || tag === 'table') && (v === 'left' || v === 'right')) {
             push('float', v);
-        else if (v === 'center' || v === 'middle')
+        }
+        else if (tag === 'img') {
+            // an image's other alignments are its line's
+            const va = IMAGE_ALIGN[v];
+            if (va)
+                push('vertical-align', va);
+        }
+        else if (tag === 'hr') {
+            // a rule narrower than its line stands where it is aligned
+            if (v === 'left') {
+                push('margin-left', '0');
+                push('margin-right', 'auto');
+            }
+            else if (v === 'right') {
+                push('margin-left', 'auto');
+                push('margin-right', '0');
+            }
+        }
+        else if (tag === 'table') {
+            // a table's `align` places the table and leaves its text alone: set
+            // as its text's, `<table align="center">` — the frame of nearly
+            // every mail — stood at the left with its cells' text centred
+            if (side === 'center') {
+                push('margin-left', 'auto');
+                push('margin-right', 'auto');
+            }
+        }
+        else if (ALIGNS_BLOCKS.has(tag) &&
+            (side === 'center' || side === 'left' || side === 'right')) {
+            // these align the blocks in them as well as their text (HTML's
+            // rendering, "align descendants"): the table a `<td align="center">`
+            // or a `<div align="center">` holds is centred in it
+            push('text-align', `-webkit-${side}`);
+        }
+        else if (side === 'center')
             push('text-align', 'center');
         else if (v === 'left' || v === 'right' || v === 'justify')
             push('text-align', v);
@@ -447,9 +1574,42 @@ function presentationHints(el) {
     const valign = attr(el, 'valign');
     if (valign)
         push('vertical-align', valign.toLowerCase());
+    // HTML's `dir` is its element's `direction`: `<table dir="rtl">` starts
+    // at the right, and a Hebrew or an Arabic message is written this way
+    const dir = attr(el, 'dir')?.toLowerCase();
+    if (dir === 'rtl' || dir === 'ltr')
+        push('direction', dir);
+    // and it isolates the element from the text around it, or with `auto`
+    // takes its first strong letter's direction (HTML's UA sheet: `[dir]`,
+    // `[dir=auto i]`, `bdo[dir]`)
+    if (dir !== undefined) {
+        push('unicode-bidi', tag === 'bdo'
+            ? 'isolate-override'
+            : dir === 'auto'
+                ? 'plaintext'
+                : 'isolate');
+    }
     const bgcolor = attr(el, 'bgcolor');
     if (bgcolor)
         push('background-color', bgcolor);
+    if (BACKGROUNDS.has(tag)) {
+        const background = attr(el, 'background')?.trim();
+        if (background) {
+            push('background-image', `url("${background.replace(/["\\\n]/g, '')}")`);
+        }
+    }
+    if (tag === 'body') {
+        // the text's colour, and the links'
+        const text = attr(el, 'text');
+        if (text)
+            push('color', text);
+    }
+    else if (tag === 'a' && attr(el, 'href') !== undefined) {
+        const body = closestBody(el);
+        const link = body ? attr(body, 'link') : undefined;
+        if (link)
+            push('color', link);
+    }
     const color = attr(el, 'color');
     if (color && (tag === 'font' || tag === 'basefont'))
         push('color', color);
@@ -472,6 +1632,27 @@ function presentationHints(el) {
         const height = attr(el, 'height');
         if (height)
             push('height', lengthAttr(height));
+        // and, both numbers, an image's the ratio it has before it loads, or
+        // where it has none of its own (HTML 15.4.3, "map to the aspect-ratio
+        // property")
+        if (width && height && RATIO_SIZED.has(tag)) {
+            const w = parseFloat(width);
+            const h = parseFloat(height);
+            if (w > 0 && h > 0 && !/%/.test(width + height)) {
+                push('aspect-ratio', `auto ${w} / ${h}`);
+            }
+        }
+    }
+    else if (tag === 'svg') {
+        // an SVG's are CSS lengths of their own, units and all (SVG 2, 5.1.1)
+        const width = attr(el, 'width');
+        const w = width ? svgSizeHint(width) : null;
+        if (w)
+            push('width', w);
+        const height = attr(el, 'height');
+        const h = height ? svgSizeHint(height) : null;
+        if (h)
+            push('height', h);
     }
     if (tag === 'table') {
         const border = attr(el, 'border');
@@ -496,15 +1677,54 @@ function presentationHints(el) {
         const noshade = attr(el, 'noshade');
         if (noshade !== undefined)
             push('border-top-width', '2px');
+        // the rule's colour and its thickness
+        const color = attr(el, 'color');
+        if (color)
+            push('border-top-color', color);
+        const size = attr(el, 'size');
+        if (size && Number(size) > 0)
+            push('border-top-width', `${Number(size)}px`);
+    }
+    if ((tag === 'td' || tag === 'th') && attr(el, 'nowrap') !== undefined) {
+        push('white-space', 'nowrap');
+    }
+    if (tag === 'br') {
+        // below the floats: `<br clear="all">` after a floated image
+        const clear = attr(el, 'clear')?.toLowerCase();
+        if (clear === 'all' || clear === 'both')
+            push('clear', 'both');
+        else if (clear === 'left' || clear === 'right')
+            push('clear', clear);
     }
     if (tag === 'ol') {
         const type = attr(el, 'type');
         const mapped = OL_TYPES[type ?? ''];
         if (mapped)
             push('list-style-type', mapped);
-        const start = attr(el, 'start');
-        if (start)
-            push('counter-reset', start);
+        // the number a list starts at is its `list-item` counter's, one before
+        // it, or counting down one after it (HTML's rendering, "Lists")
+        const start = htmlInteger(attr(el, 'start'));
+        if (start !== null) {
+            push('counter-reset', attr(el, 'reversed') !== undefined
+                ? `reversed(list-item) ${start + 1}`
+                : `list-item ${start - 1}`);
+        }
+    }
+    if (tag === 'ul') {
+        const type = attr(el, 'type')?.toLowerCase();
+        if (type && BULLETS.has(type))
+            push('list-style-type', type);
+    }
+    if (tag === 'li') {
+        // an item's `value` is the number it goes on from
+        const value = htmlInteger(attr(el, 'value'));
+        if (value !== null)
+            push('counter-set', `list-item ${value}`);
+        const type = attr(el, 'type');
+        const mapped = OL_TYPES[type ?? ''] ??
+            (type && BULLETS.has(type.toLowerCase()) ? type.toLowerCase() : null);
+        if (mapped)
+            push('list-style-type', mapped);
     }
     if (tag === 'img' || tag === 'object') {
         const hspace = attr(el, 'hspace');
@@ -520,6 +1740,51 @@ function presentationHints(el) {
     }
     return out;
 }
+/** An image's `align` other than a side, as its `vertical-align`. */
+const IMAGE_ALIGN = {
+    top: 'top',
+    texttop: 'text-top',
+    middle: 'middle',
+    absmiddle: 'middle',
+    center: 'middle',
+    bottom: 'baseline',
+    baseline: 'baseline',
+    absbottom: 'bottom',
+};
+/** The elements whose `align` aligns the blocks in them too. */
+const ALIGNS_BLOCKS = new Set([
+    'div',
+    'caption',
+    'thead',
+    'tbody',
+    'tfoot',
+    'tr',
+    'td',
+    'th',
+]);
+/** The elements a `background` attribute gives a background image. */
+const BACKGROUNDS = new Set([
+    'body',
+    'table',
+    'thead',
+    'tbody',
+    'tfoot',
+    'tr',
+    'td',
+    'th',
+]);
+function closestBody(el) {
+    let node = el.parent;
+    while (node) {
+        if (node.type === 'tag' && node.name === 'body') {
+            return node;
+        }
+        node = node.parent;
+    }
+    return null;
+}
+/** What the `width` and `height` attributes give a ratio as well. */
+const RATIO_SIZED = new Set(['img', 'video']);
 const SIZED = new Set([
     'img',
     'table',
@@ -529,7 +1794,6 @@ const SIZED = new Set([
     'colgroup',
     'iframe',
     'video',
-    'canvas',
     'object',
     'embed',
     'hr',
@@ -541,6 +1805,17 @@ const OL_TYPES = {
     i: 'lower-roman',
     I: 'upper-roman',
 };
+/** What a `<ul type>` or an `<li type>` names that is not a number. */
+const BULLETS = new Set(['disc', 'circle', 'square', 'none']);
+/** An attribute read as HTML reads an integer: its leading digits, signed,
+ *  whatever follows them; null where it has none. A counter is a 32-bit
+ *  integer in a browser, and one past that is kept to it. */
+function htmlInteger(value) {
+    const match = value === undefined ? null : /^\s*([+-]?\d+)/.exec(value);
+    if (!match)
+        return null;
+    return Math.max(-2147483648, Math.min(2147483647, Number(match[1])));
+}
 const FONT_SIZE_STEPS = [1, 0.63, 0.82, 1, 1.13, 1.5, 2, 3];
 /** A presentational length: bare numbers are pixels, `50%` stays a percent. */
 function lengthAttr(value) {
@@ -559,4 +1834,35 @@ function closestTable(el) {
     }
     return null;
 }
+/** The generic fixed-width family's size to everyone else's: 13 to 16. */
+const FIXED_SIZE = 13 / 16;
+/** Whether a family list is the generic `monospace` and nothing else,
+ *  which has the smaller size; a list with a fallback after it does not,
+ *  so `monospace, monospace` keeps the size it had. */
+function monospaceOnly(family) {
+    return family.length === 9 && family.toLowerCase() === 'monospace';
+}
+/** Whether a `font-size`, or the size in a `font`, is an absolute-size
+ *  keyword, or `initial`, which is `medium`. */
+function sizeKeyword(prop, value) {
+    const words = value.trim().toLowerCase();
+    if (prop === 'font-size')
+        return ABSOLUTE_SIZES.has(words);
+    for (const word of words.split(/[\s/]+/)) {
+        if (ABSOLUTE_SIZES.has(word))
+            return true;
+    }
+    return false;
+}
+const ABSOLUTE_SIZES = new Set([
+    'xx-small',
+    'x-small',
+    'small',
+    'medium',
+    'large',
+    'x-large',
+    'xx-large',
+    'xxx-large',
+    'initial',
+]);
 //# sourceMappingURL=cascade.js.map