buninu-browser 0.1.0 → 0.2.1

package/lib/style/computed-style.js

@@ -4,6 +4,9 @@
  * model and parser here are project-owned and intentionally cover only the
  * properties the current pixel renderer consumes.
  */
+import { compileSelector, matchesCompiled } from "../happy-dom/selector-matcher.js";
+import { selectorKeys } from "./selector-keys.js";
+
 
 const BLOCK_TAGS = new Set([
   "ADDRESS", "ARTICLE", "ASIDE", "BLOCKQUOTE", "BODY", "DD", "DETAILS", "DIV", "DL", "DT",
@@ -12,8 +15,17 @@ const BLOCK_TAGS = new Set([
 ]);
 const NONE_TAGS = new Set(["HEAD", "LINK", "META", "NOFRAMES", "SCRIPT", "STYLE", "TEMPLATE", "TITLE"]);
 const INHERITED = new Set([
-  "color", "font-family", "font-size", "font-weight", "line-height", "list-style-type", "text-align", "white-space",
-  "visibility", "overflow-wrap", "word-break", "border-spacing", "border-collapse",
+  "color", "color-scheme", "font-family", "font-size", "font-weight", "line-height", "list-style-type", "text-align", "white-space",
+  "visibility", "overflow-wrap", "word-break", "border-spacing", "border-collapse", "pointer-events",
+]);
+// Inherited properties whose computed value is copied from the parent as is.
+// line-height is not: a unitless factor resolves against each element's own
+// font size, so it goes through its specified form (copyProperty).
+const INHERITED_FIELDS = new Map([
+  ["color", "color"], ["font-family", "fontFamily"], ["font-size", "fontSize"], ["font-weight", "fontWeight"],
+  ["list-style-type", "listStyleType"], ["text-align", "textAlign"], ["white-space", "whiteSpace"],
+  ["visibility", "visibility"], ["overflow-wrap", "overflowWrap"], ["word-break", "wordBreak"],
+  ["border-spacing", "borderSpacing"], ["border-collapse", "borderCollapse"], ["pointer-events", "pointerEvents"],
 ]);
 const LIST_STYLE_TYPES = new Set([
   "none", "disc", "circle", "square", "decimal", "decimal-leading-zero",
@@ -53,6 +65,9 @@ const PROPERTY_FIELDS = Object.freeze({
   "grid-row": ["gridRowStart", "gridRowEnd"],
   "grid-column": ["gridColumnStart", "gridColumnEnd"],
   "grid-template": ["gridTemplateColumns", "gridTemplateRows"],
+  "place-content": ["alignContent", "justifyContent"],
+  "place-items": ["alignItems", "justifyItems"],
+  "place-self": ["alignSelf", "justifySelf"],
   "line-height": ["lineHeight", "lineHeightFactor"],
   "list-style": ["listStyleType"],
   "border-radius": ["borderRadius"],
@@ -71,6 +86,7 @@ const INITIAL = Object.freeze({
   textDecorationColor: null,
   textDecorations: null,
   color: "rgba(0, 0, 0, 1)",
+  colorScheme: "light",
   backgroundColor: "rgba(0, 0, 0, 0)",
   backgroundImage: null,
   backgroundClip: "border-box",
@@ -102,6 +118,7 @@ const INITIAL = Object.freeze({
   flexDirection: "row",
   flexWrap: "nowrap",
   justifyContent: "normal",
+  alignContent: "normal",
   alignItems: "normal",
   alignSelf: "auto",
   gap: 0,
@@ -136,6 +153,8 @@ const INITIAL = Object.freeze({
   tableLayout: "auto",
   verticalAlign: "baseline",
   visibility: "visible",
+  // Hit testing only (inherited): "none" lets clicks pass through.
+  pointerEvents: "auto",
   // Breaking inside words (CSS Text 3 §5): only with these set.
   overflowWrap: "normal",
   wordBreak: "normal",
@@ -229,14 +248,26 @@ export class StyleEngine {
   #styles = new WeakMap();
   #customProperties = new WeakMap();
   #pseudoStyles = new WeakMap();
+  #document = null;
+  #sheetChanges = null;
+  /** Elements computed by the last compute(), and whether it was incremental. */
+  restyled = 0;
+  incremental = false;
   // Parsed and indexed rules for the last style sheet list and viewport:
   // restyles after script changes reuse them instead of re-parsing.
   #ruleCache = { styleSheets: null, key: "", index: null };
+  // Parsed rules by sheet text, for the viewport in #parsedSheetsKey.
+  #parsedSheets = new Map();
+  #parsedSheetsKey = "";
 
-  compute(document, styleSheets = [], viewport = {}) {
-    this.#styles = new WeakMap();
-    this.#customProperties = new WeakMap();
-    this.#pseudoStyles = new WeakMap();
+  /**
+   * Computes the document's styles. With `dirty` (elements whose subtree's
+   * styles may have changed), only those subtrees are restyled and every
+   * other element keeps the style it had: unchanged rules and viewport, the
+   * same document, and a styled root are required, else it restyles fully.
+   * `restyled` afterwards counts the elements this call computed.
+   */
+  compute(document, styleSheets = [], viewport = {}, dirty = null, selfOnly = null) {
     const previous = environment;
     environment = {
       viewportWidth: viewport.width ?? DEFAULT_ENVIRONMENT.viewportWidth,
@@ -244,9 +275,55 @@ export class StyleEngine {
       rootFontSize: DEFAULT_ENVIRONMENT.rootFontSize,
       mobile: viewport.mobile === true,
     };
+    this.restyled = 0;
     try {
+      const before = this.#ruleCache.index;
       const rules = this.#rulesFor(styleSheets);
-      if (document.documentElement) this.#visit(document.documentElement, null, null, rules);
+      const root = document.documentElement;
+      if (dirty !== null && rules !== before) {
+        const affected = this.#elementsForSheetChanges(document);
+        dirty = affected ? new Set([...dirty, ...affected]) : null;
+      }
+      const incremental = dirty !== null && this.#document === document
+        && Boolean(root) && this.#styles.has(root) && !dirty.has(root);
+      this.incremental = incremental;
+      if (!incremental) {
+        this.#styles = new WeakMap();
+        this.#customProperties = new WeakMap();
+        this.#pseudoStyles = new WeakMap();
+        this.#document = document;
+        if (root) this.#visit(root, null, null, rules);
+        return this;
+      }
+      // rem units resolve against the root's font size, which is unchanged.
+      environment = { ...environment, rootFontSize: this.#styles.get(root).fontSize };
+      // Restyle from the nearest ancestor that has a style (new subtrees have
+      // none); many roots inside one new subtree share that start.
+      const starts = new Set();
+      for (const element of topmostConnected(dirty, root)) {
+        let start = element;
+        while (start !== root && !this.#styles.has(start.parentElement)) start = start.parentElement;
+        starts.add(start);
+      }
+      if (starts.has(root) || selfOnly?.has(root)) {
+        this.#visit(root, null, null, rules);
+        return this;
+      }
+      const topmost = topmostConnected(starts, root);
+      for (const start of topmost) {
+        const parent = start.parentElement;
+        const ancestors = this.#ancestorsOf(start);
+        this.#visit(start, this.#styles.get(parent), this.#customProperties.get(parent) ?? EMPTY_MAP, rules, ancestors);
+      }
+      // Elements whose own matches may have changed (:empty, :first-child,
+      // ...) and that no restyled subtree covered.
+      const covered = new Set(topmost);
+      for (const element of selfOnly ?? []) {
+        if (!element || element.nodeType !== 1 || !root.contains(element) || !this.#styles.has(element.parentElement)) continue;
+        let inside = false;
+        for (let node = element; node && !inside; node = node.parentElement) inside = covered.has(node);
+        if (!inside) this.#restyleSelf(element, rules);
+      }
     } finally {
       environment = previous;
     }
@@ -256,15 +333,91 @@ export class StyleEngine {
   #rulesFor(styleSheets) {
     const key = `${environment.viewportWidth}x${environment.viewportHeight}${environment.mobile ? ":mobile" : ""}`;
     const cache = this.#ruleCache;
+    this.#sheetChanges = null;
     if (cache.styleSheets !== styleSheets || cache.key !== key || cache.length !== styleSheets.length) {
-      const counter = { order: 0 };
-      const rules = styleSheets.flatMap((source) => parseStyleSheet(source, environment, counter));
-      if (counter.layers) rankLayers(counter.layers, rules);
-      this.#ruleCache = { styleSheets, key, length: styleSheets.length, index: new RuleIndex(rules) };
+      const perSheet = this.#parseSheets(styleSheets, key);
+      const rules = perSheet.flat();
+      // Sheets added or removed since the last list (same viewport): only the
+      // elements their rules match can change style, every other element
+      // keeps the same rules in the same relative order.
+      if (cache.index && cache.key === key) this.#sheetChanges = diffSheets(cache, styleSheets, perSheet);
+      this.#ruleCache = { styleSheets, key, length: styleSheets.length, index: new RuleIndex(rules), perSheet };
     }
     return this.#ruleCache.index;
   }
 
+  /**
+   * Each sheet's rules, in cascade order. A sheet is parsed once per text
+   * (and viewport) with layers of its own; putting a list together only
+   * renumbers the rules and merges the sheets' layer trees in order, so a
+   * script adding one <style> does not re-parse every other sheet. Of
+   * identical sheets only the last copy's rules are kept, as each beats the
+   * same rule of an earlier copy (the earlier copy still declares its layers
+   * first); a sheet with anonymous layers is kept in every copy, since under
+   * !important an earlier anonymous layer wins.
+   */
+  #parseSheets(styleSheets, key) {
+    if (this.#parsedSheetsKey !== key) {
+      this.#parsedSheets = new Map();
+      this.#parsedSheetsKey = key;
+    }
+    const parsed = this.#parsedSheets;
+    const entries = styleSheets.map((source) => {
+      let entry = parsed.get(source);
+      if (entry) parsed.delete(source);
+      else {
+        const counter = { order: 0 };
+        const rules = parseStyleSheet(source, environment, counter);
+        entry = { rules, layers: counter.layers.children.size ? counter.layers : null };
+        entry.anonymousLayers = entry.layers !== null && hasAnonymousLayer(entry.layers);
+      }
+      parsed.set(source, entry); // most recently used last
+      return entry;
+    });
+    for (const source of parsed.keys()) {
+      if (parsed.size <= MAX_PARSED_SHEETS + styleSheets.length) break;
+      parsed.delete(source);
+    }
+    const last = new Map();
+    entries.forEach((entry, index) => last.set(entry, index));
+    const root = newLayer(null);
+    const layerOf = new Map();
+    let order = 0;
+    const perSheet = entries.map((entry, index) => {
+      if (entry.layers) mergeLayers(entry.layers, root, layerOf);
+      const lastCopy = last.get(entry) === index;
+      if (!lastCopy && !entry.anonymousLayers) return [];
+      // Each kept copy but the last gets rule objects of its own.
+      const rules = lastCopy ? entry.rules : entry.rules.map((rule) => rule.copy());
+      for (const rule of rules) {
+        rule.order = order++;
+        rule.layer = rule.layerNode ? layerOf.get(rule.layerNode) : Infinity;
+      }
+      return rules;
+    });
+    if (root.children.size) {
+      rankLayerTree(root);
+      for (const rules of perSheet) for (const rule of rules) if (rule.layerNode) rule.layer = rule.layer.rank;
+    }
+    return perSheet;
+  }
+
+  /** Elements matched by the rules of added or removed sheets, or null when that is unknown. */
+  #elementsForSheetChanges(document) {
+    const changes = this.#sheetChanges;
+    // Each selector is a document-wide search: past a few hundred, a full
+    // restyle is cheaper (a large stylesheet arriving late, for example).
+    if (!changes || changes.rules.length > MAX_SHEET_CHANGE_RULES) return null;
+    const elements = new Set();
+    const selectors = new Set(changes.rules.map((rule) => rule.selector));
+    for (const selector of selectors) {
+      let matched;
+      try { matched = document.querySelectorAll(selector); } catch { continue; } // invalid: matches nothing
+      for (const element of matched) elements.add(element);
+    }
+    return elements;
+  }
+
   get(element) {
     return this.#styles.get(element) ?? INITIAL;
   }
@@ -274,18 +427,26 @@ export class StyleEngine {
     return this.#pseudoStyles.get(element)?.[pseudo] ?? null;
   }
 
-  #visit(element, parentStyle, parentCustomProperties, rules, ancestors = new Map()) {
-    const keys = elementKeys(element);
+  /** Computes and stores one element's style and ::before/::after styles. */
+  #styleOne(element, parentStyle, parentCustomProperties, rules, keys, ancestors) {
+    const previousStyle = this.#styles.get(element);
+    const previousCustom = this.#customProperties.get(element);
+    const previousPseudo = this.#pseudoStyles.get(element);
     // Inline style takes part in the cascade before custom properties are
     // resolved: style="--x: ..." must win over stylesheet values of --x.
     const declarations = withInlineStyle(element, cascadeDeclarations(element, rules, null, keys, ancestors));
-    const customProperties = withCustomProperties(parentCustomProperties ?? EMPTY_MAP, declarations);
-    const style = computeElementStyle(element, parentStyle, declarations, customProperties);
+    let customProperties = withCustomProperties(parentCustomProperties ?? EMPTY_MAP, declarations);
+    let style = computeElementStyle(element, parentStyle, declarations, customProperties);
+    // A descendant may be visited because an ancestor's selector state
+    // changed even though its final computed values did not. Preserve the
+    // immutable identities so retained render and layout subtrees survive.
+    if (sameValue(previousStyle, style)) style = previousStyle;
+    if (sameCustom(previousCustom, customProperties)) customProperties = previousCustom;
     // rem units resolve against the root element's computed font size.
     if (!parentStyle) environment = { ...environment, rootFontSize: style.fontSize };
     this.#styles.set(element, style);
     this.#customProperties.set(element, customProperties);
-    const pseudoStyles = {};
+    let pseudoStyles = {};
     for (const pseudo of ["before", "after"]) {
       const pseudoDeclarations = cascadeDeclarations(element, rules, pseudo, keys, ancestors);
       if (!pseudoDeclarations.has("content")) continue;
@@ -294,20 +455,115 @@ export class StyleEngine {
       // `content: none | normal` generates no box (CSS Pseudo 4 §2.3).
       if (pseudoStyle.content != null && pseudoStyle.display !== "none") pseudoStyles[pseudo] = pseudoStyle;
     }
+    if (sameValue(previousPseudo ?? null, (pseudoStyles.before || pseudoStyles.after) ? pseudoStyles : null)) {
+      pseudoStyles = previousPseudo ?? {};
+    }
     if (pseudoStyles.before || pseudoStyles.after) this.#pseudoStyles.set(element, pseudoStyles);
+    else this.#pseudoStyles.delete(element);
+    this.restyled++;
+    return { style, customProperties };
+  }
+
+  #visit(element, parentStyle, parentCustomProperties, rules, ancestors = new AncestorFilter()) {
+    const keys = elementKeys(element);
+    const { style, customProperties } = this.#styleOne(element, parentStyle, parentCustomProperties, rules, keys, ancestors);
+    this.#visitChildren(element, keys, style, customProperties, rules, ancestors);
+  }
+
+  #visitChildren(element, keys, style, customProperties, rules, ancestors) {
     // The element is an ancestor of everything below it.
-    const own = ancestorFilterKeys(keys);
-    for (const key of own) ancestors.set(key, (ancestors.get(key) ?? 0) + 1);
+    const own = ancestors.push(keys);
     for (const child of element.children) this.#visit(child, style, customProperties, rules, ancestors);
-    for (const key of own) {
-      const count = ancestors.get(key) - 1;
-      if (count) ancestors.set(key, count);
-      else ancestors.delete(key);
+    ancestors.pop(own);
+  }
+
+  /** Ancestor filter counts for the elements above `element`. */
+  #ancestorsOf(element) {
+    const ancestors = new AncestorFilter();
+    for (let node = element.parentElement; node; node = node.parentElement) ancestors.push(elementKeys(node));
+    return ancestors;
+  }
+
+  /**
+   * Restyles one element; only when its style (or ::before/::after, or the
+   * custom properties it passes down) changed does its subtree follow.
+   */
+  #restyleSelf(element, rules) {
+    const parent = element.parentElement;
+    const before = { style: this.#styles.get(element), pseudo: this.#pseudoStyles.get(element), custom: this.#customProperties.get(element) };
+    const keys = elementKeys(element);
+    const ancestors = this.#ancestorsOf(element);
+    const { style, customProperties } = this.#styleOne(element, this.#styles.get(parent), this.#customProperties.get(parent) ?? EMPTY_MAP, rules, keys, ancestors);
+    const pseudo = this.#pseudoStyles.get(element);
+    if (sameValue(before.style, style) && sameValue(before.pseudo ?? null, pseudo ?? null) && sameCustom(before.custom, customProperties)) {
+      // Unchanged: keep the previous objects so later comparisons stay cheap.
+      this.#styles.set(element, before.style);
+      return;
     }
+    this.#visitChildren(element, keys, style, customProperties, rules, ancestors);
   }
 }
 
+/** Structural equality of computed style values (frozen objects and arrays). */
+function sameValue(left, right) {
+  if (left === right) return true;
+  if (!left || !right || typeof left !== "object" || typeof right !== "object") return false;
+  const keys = Object.keys(left);
+  if (keys.length !== Object.keys(right).length) return false;
+  return keys.every((key) => sameValue(left[key], right[key]));
+}
+
+function sameCustom(left, right) {
+  if (left === right) return true;
+  if (!left || !right || left.size !== right.size) return false;
+  for (const [name, value] of left) if (right.get(name) !== value) return false;
+  return true;
+}
+
 const EMPTY_MAP = new Map();
+const MAX_SHEET_CHANGE_RULES = 300;
+// Parsed sheets kept for reuse beyond those in use (sheets that come and go).
+const MAX_PARSED_SHEETS = 64;
+
+/**
+ * Rules from sheets present in only one of two sheet lists (by text), or null
+ * when such a change can reorder other rules: @layer declarations rank
+ * layers by first appearance and @property changes inheritance.
+ */
+function diffSheets(previous, styleSheets, perSheet) {
+  const remaining = new Map();
+  previous.styleSheets.forEach((source, index) => {
+    const list = remaining.get(source);
+    if (list) list.push(previous.perSheet[index]); else remaining.set(source, [previous.perSheet[index]]);
+  });
+  const rules = [];
+  const risky = (source) => /@layer\b|@property\b/i.test(source);
+  for (let index = 0; index < styleSheets.length; index++) {
+    const source = styleSheets[index];
+    const list = remaining.get(source);
+    if (list?.length) { list.pop(); continue; }
+    if (risky(source)) return null;
+    rules.push(...perSheet[index]);
+  }
+  for (const [source, lists] of remaining) {
+    if (!lists.length) continue;
+    if (risky(source)) return null;
+    for (const list of lists) rules.push(...list);
+  }
+  return { rules };
+}
+
+/** The connected elements of `elements` that are not inside another of them. */
+export function topmostConnected(elements, root) {
+  const result = [];
+  for (const element of elements) {
+    if (!element || element.nodeType !== 1 || !root.contains(element)) continue;
+    let covered = false;
+    for (let node = element.parentElement; node && !covered; node = node.parentElement) covered = elements.has(node);
+    if (!covered) result.push(element);
+  }
+  return result;
+}
 
 /** The cascaded declarations with the element's style attribute applied on top. */
 function withInlineStyle(element, declarations) {
@@ -342,8 +598,12 @@ function withCustomProperties(inherited, declarations) {
 
 export function computeElementStyle(element, parentStyle = null, authorDeclarations = null, customProperties = new Map()) {
   const values = { ...INITIAL };
-  for (const property of INHERITED) {
-    if (parentStyle) copyProperty(values, property, parentStyle);
+  if (parentStyle) {
+    for (const property of INHERITED) {
+      const field = INHERITED_FIELDS.get(property);
+      if (field) values[field] = parentStyle[field];
+      else copyProperty(values, property, parentStyle);
+    }
   }
   // vertical-align is not inherited, except through the table UA rules' "inherit".
   values.verticalAlign = "baseline";
@@ -374,20 +634,19 @@ export function computeElementStyle(element, parentStyle = null, authorDeclarati
   // font-size and the font shorthand wins the cascade.
   const fontSize = declarations.get("font-size");
   const font = declarations.get("font");
-  const cascadeKey = (declaration) => ({ important: false, specificity: 0, order: 0, ...declaration, important: Boolean(declaration.important) });
-  if (font && (!fontSize || compareCascade(cascadeKey(font), cascadeKey(fontSize)) > 0)) {
+  if (font && (!fontSize || compareDeclarations(font, fontSize) > 0)) {
     const parsed = parseFontShorthand(resolveVariables(font.value, customProperties));
     if (parsed) setProperty(values, "font-size", parsed.size, parentStyle);
   } else if (fontSize) {
     applyDeclaration(values, fontSize, customProperties, parentStyle);
   }
+  // light-dark() depends on the used scheme regardless of declaration order.
+  const colorScheme = declarations.get("color-scheme");
+  if (colorScheme) applyDeclaration(values, colorScheme, customProperties, parentStyle);
   // Apply in cascade order so a later shorthand overrides earlier longhands and vice versa.
-  const ordered = [...declarations.values()].sort((left, right) => compareCascade(
-    { important: false, specificity: 0, order: 0, ...left, important: Boolean(left.important) },
-    { important: false, specificity: 0, order: 0, ...right, important: Boolean(right.important) },
-  ));
+  const ordered = [...declarations.values()].sort(compareDeclarations);
   for (const declaration of ordered) {
-    if (declaration.name.startsWith("--") || declaration.name === "font-size") continue;
+    if (declaration.name.startsWith("--") || declaration.name === "font-size" || declaration.name === "color-scheme") continue;
     // The shorthand's size was settled above; its other parts apply in order.
     applyDeclaration(values, declaration.name === "font" ? { ...declaration, name: "font-parts" } : declaration, customProperties, parentStyle);
   }
@@ -506,6 +765,13 @@ class StyleRule {
   get hasCustomProperties() {
     return this.#block.hasCustomProperties;
   }
+
+  /** The same rule as a separate object (its own order and layer). */
+  copy() {
+    const rule = new StyleRule(this.selector, this.#selectorText, this.pseudo, this.#block, this.order);
+    rule.layerNode = this.layerNode;
+    return rule;
+  }
 }
 
 /**
@@ -544,7 +810,7 @@ export function parseStyleSheet(source, viewport = environment, counter = { orde
         if (name === "layer") {
           // A named layer block, or an anonymous one (a layer of its own).
           const parent = layer ?? counter.layers;
-          const inner = condition ? declareLayer(parent, condition) : declareLayer(parent, `\0anonymous${counter.order}`);
+          const inner = condition ? declareLayer(parent, condition) : declareLayer(parent, `${ANONYMOUS_LAYER}${counter.order}`);
           parseBlock(open + 1, close, inner);
         } else if ((name === "media" && mediaQueryMatches(condition, viewport)) || name === "supports") {
           parseBlock(open + 1, close, layer);
@@ -571,6 +837,28 @@ function newLayer(parent) {
   return { parent, children: new Map(), rank: Infinity };
 }
 
+const ANONYMOUS_LAYER = "\0anonymous";
+
+function hasAnonymousLayer(node) {
+  for (const [name, child] of node.children) if (name.startsWith(ANONYMOUS_LAYER) || hasAnonymousLayer(child)) return true;
+  return false;
+}
+
+/**
+ * Adds one sheet's layer tree to the layers of a sheet list, in first-seen
+ * order; `layerOf` maps each of the sheet's layers to the list's. Every
+ * anonymous layer is a layer of its own.
+ */
+function mergeLayers(node, target, layerOf) {
+  for (const [name, child] of node.children) {
+    const anonymous = name.startsWith(ANONYMOUS_LAYER);
+    let merged = anonymous ? null : target.children.get(name);
+    if (!merged) target.children.set(anonymous ? `${name}\0${target.children.size}` : name, merged = newLayer(target));
+    layerOf.set(child, merged);
+    mergeLayers(child, merged, layerOf);
+  }
+}
+
 /** Finds or creates a (possibly dotted) layer name under `parent`, in first-seen order. */
 function declareLayer(parent, name) {
   let node = parent;
@@ -587,12 +875,16 @@ function declareLayer(parent, name) {
  * layer's sublayers before its own rules; unlayered rules rank highest.
  */
 export function rankLayers(root, rules) {
+  rankLayerTree(root);
+  for (const rule of rules) rule.layer = rule.layerNode ? rule.layerNode.rank : Infinity;
+}
+
+function rankLayerTree(root) {
   let next = 0;
   (function visit(node) {
     for (const child of node.children.values()) visit(child);
     if (node !== root) node.rank = next++;
   })(root);
-  for (const rule of rules) rule.layer = rule.layerNode ? rule.layerNode.rank : Infinity;
 }
 
 /** Splits a `font` shorthand value into size, line height, weight and family. */
@@ -607,43 +899,54 @@ function parseFontShorthand(value) {
       weight = lower === "bolder" ? "700" : lower === "lighter" ? "300" : lower;
       continue;
     }
-    // The size, optionally with /line-height, then the family list.
-    const [size, lineHeight] = token.split("/");
-    const family = tokens.slice(index + 1).join(" ").trim();
+    // The size, optionally with /line-height (spaces around "/" allowed),
+    // then the family list.
+    let [size, lineHeight] = token.split("/");
+    let rest = index + 1;
+    if (lineHeight === "") lineHeight = tokens[rest++]; // "14px/ 1.5"
+    else if (lineHeight === undefined && tokens[rest] === "/") { // "14px / 1.5"
+      lineHeight = tokens[rest + 1];
+      rest += 2;
+    } else if (lineHeight === undefined && tokens[rest]?.startsWith("/")) lineHeight = tokens[rest++].slice(1); // "14px /1.5"
+    const family = tokens.slice(rest).join(" ").trim();
     if (!family || !(FONT_SIZE_KEYWORDS[size] || /^[\d.]/.test(size) || /^(?:calc|clamp|min|max)\(/.test(size))) return null;
     return { size, lineHeight: lineHeight || null, weight, family };
   }
   return null;
 }
 
+// Character codes for the scanners below, which run over whole style sheets.
+const QUOTE = 0x22, APOSTROPHE = 0x27, BACKSLASH = 0x5c, OPEN_PAREN = 0x28, CLOSE_PAREN = 0x29, OPEN_BRACE = 0x7b, CLOSE_BRACE = 0x7d;
+
 function findTopLevel(source, character, start, end) {
-  let quote = "";
+  const target = character.charCodeAt(0);
+  let quote = 0;
   let depth = 0;
   for (let index = start; index < end; index++) {
-    const current = source[index];
+    const current = source.charCodeAt(index);
     if (quote) {
-      if (current === "\\") index++;
-      else if (current === quote) quote = "";
-    } else if (current === '"' || current === "'") quote = current;
-    else if (current === "(") depth++;
-    else if (current === ")") depth = Math.max(0, depth - 1);
-    else if (current === character && depth === 0) return index;
-    else if (current === "{" || current === "}") return character === current ? index : -1;
+      if (current === BACKSLASH) index++;
+      else if (current === quote) quote = 0;
+    } else if (current === QUOTE || current === APOSTROPHE) quote = current;
+    else if (current === OPEN_PAREN) depth++;
+    else if (current === CLOSE_PAREN) depth = Math.max(0, depth - 1);
+    else if (current === target && depth === 0) return index;
+    else if (current === OPEN_BRACE || current === CLOSE_BRACE) return target === current ? index : -1;
   }
   return -1;
 }
 
 function matchingBrace(source, open, end) {
   let depth = 0;
-  let quote = "";
+  let quote = 0;
   for (let index = open; index < end; index++) {
-    const current = source[index];
+    const current = source.charCodeAt(index);
     if (quote) {
-      if (current === "\\") index++;
-      else if (current === quote) quote = "";
-    } else if (current === '"' || current === "'") quote = current;
-    else if (current === "{") depth++;
-    else if (current === "}" && --depth === 0) return index;
+      if (current === BACKSLASH) index++;
+      else if (current === quote) quote = 0;
+    } else if (current === QUOTE || current === APOSTROPHE) quote = current;
+    else if (current === OPEN_BRACE) depth++;
+    else if (current === CLOSE_BRACE && --depth === 0) return index;
   }
   return end;
 }
@@ -751,6 +1054,13 @@ function setProperty(style, name, value, parentStyle = null) {
   }
   if (typeof value !== "string") return;
   switch (name) {
+    case "color-scheme": {
+      const schemes = value.toLowerCase().split(/\s+/).filter((part) => part !== "only");
+      if (schemes.every((part) => ["normal", "light", "dark"].includes(part))) {
+        style.colorScheme = schemes.includes("light") || !schemes.includes("dark") ? "light" : "dark";
+      }
+      break;
+    }
     case "display": if (DISPLAYS.has(value)) style.display = value; break;
     case "text-decoration-line": {
       const lines = parseDecorationLines(value);
@@ -790,6 +1100,10 @@ function setProperty(style, name, value, parentStyle = null) {
     case "visibility":
       if (["visible", "hidden", "collapse"].includes(value)) style.visibility = value === "collapse" ? "hidden" : value;
       break;
+    // SVG-only values (visiblePainted, fill, ...) hit like auto for HTML boxes.
+    case "pointer-events":
+      if (/^[a-z]+$/i.test(value)) style.pointerEvents = value === "none" ? "none" : "auto";
+      break;
     case "opacity": {
       const number = /^([+-]?(?:\d+\.?\d*|\.\d+))(%?)$/.exec(value);
       if (number) style.opacity = Math.min(1, Math.max(0, Number(number[1]) / (number[2] ? 100 : 1)));
@@ -833,12 +1147,12 @@ function setProperty(style, name, value, parentStyle = null) {
       break;
     }
     case "color": {
-      const color = Bun.color(value, "rgba");
+      const color = resolvedColor(value, style.colorScheme);
       if (color) style.color = color;
       break;
     }
     case "background-color": {
-      const color = Bun.color(value, "rgba");
+      const color = resolvedColor(value, style.colorScheme);
       if (color) style.backgroundColor = color;
       break;
     }
@@ -847,7 +1161,7 @@ function setProperty(style, name, value, parentStyle = null) {
       const layers = splitTopLevel(value, ",");
       const images = layers.filter((layer) => GRADIENT.test(layer));
       const color = splitTopLevel(layers.at(-1) ?? "", " ")
-        .map((token) => Bun.color(token, "rgba"))
+        .map((token) => resolvedColor(token, style.colorScheme))
         .find(Boolean);
       style.backgroundColor = color ?? INITIAL.backgroundColor;
       style.backgroundImage = images.length ? images.join(", ") : null;
@@ -1097,6 +1411,24 @@ function setProperty(style, name, value, parentStyle = null) {
       if (["normal", "start", "end", "center", "space-between", "space-around", "space-evenly"].includes(justify)) style.justifyContent = justify;
       break;
     }
+    case "align-content": {
+      const alignment = FLEX_ALIGNMENT[value] ?? value;
+      if (["normal", "stretch", "start", "end", "center", "space-between", "space-around", "space-evenly"].includes(alignment)) {
+        style.alignContent = alignment;
+      }
+      break;
+    }
+    // CSS Box Alignment 3 §5.1/§6.1/§6.2: <align> [<justify>]; one value sets both.
+    case "place-content":
+    case "place-items":
+    case "place-self": {
+      const [align, justify = align] = splitTopLevel(value, " ").filter(Boolean);
+      if (!align) break;
+      const part = name.slice("place-".length);
+      setProperty(style, `align-${part}`, align, parentStyle);
+      setProperty(style, `justify-${part}`, justify, parentStyle);
+      break;
+    }
     case "align-items": {
       const alignment = FLEX_ALIGNMENT[value] ?? value;
       if (["normal", "stretch", "start", "end", "center", "baseline"].includes(alignment)) style.alignItems = alignment;
@@ -1216,10 +1548,14 @@ class RuleIndex {
         buckets = { id: new Map(), class: new Map(), attr: new Map(), tag: new Map(), universal: [] };
         this.#byPseudo.set(rule.pseudo, buckets);
       }
-      const parts = selectorParts(rule.selector);
-      rule.ancestorKeys = parts ? ancestorKeys(parts) : [];
+      // Kept on the rule: a parsed sheet's rules are indexed again whenever the sheet list changes.
+      if (rule.subjectKeys === undefined) {
+        const { subject, ancestors } = selectorKeys(rule.selector);
+        rule.ancestorIds = Int32Array.from(ancestors, filterKeyId);
+        rule.subjectKeys = subject;
+      }
       rule.seen = 0;
-      const keys = parts ? subjectKeys(parts.compounds.at(-1)) : null;
+      const keys = rule.subjectKeys;
       if (!keys) {
         buckets.universal.push(rule);
         continue;
@@ -1236,7 +1572,7 @@ class RuleIndex {
   /**
    * Rules that may match `element` for `pseudo`, in cascade order.
    * @param {ReturnType<typeof elementKeys>} keys the element's own keys
-   * @param {Map<string, number>} ancestors keys present on its ancestors
+   * @param {AncestorFilter} ancestors keys present on its ancestors
    */
   candidates(keys, pseudo, ancestors) {
     const buckets = this.#byPseudo.get(pseudo);
@@ -1254,7 +1590,7 @@ class RuleIndex {
       for (const rule of list) {
         if (rule.seen === stamp) continue;
         rule.seen = stamp;
-        if (rule.ancestorKeys.every((key) => ancestors.has(key))) result.push(rule);
+        if (ancestors.hasAll(rule.ancestorIds)) result.push(rule);
       }
     }
     if (lists.length > 1) result.sort((left, right) => left.order - right.order);
@@ -1262,6 +1598,72 @@ class RuleIndex {
   }
 }
 
+/**
+ * The elements that match each selector among `root`'s descendants and, for
+ * an element, `root` itself (querySelectorAll() plus matches()), in one walk: selectors are bucketed by their subject's keys like
+ * rules, so each element is only tested against selectors it may match.
+ * Invalid selectors are left out of the result.
+ * @param {Element | Document} root
+ * @param {Iterable<string>} selectors
+ * @param {Map<string, object | null>} [compiledSelectors] compiled selectors to reuse and add to
+ * @returns {Map<string, Set<Element>>}
+ */
+export function matchSelectors(root, selectors, compiledSelectors = new Map()) {
+  const result = new Map();
+  const buckets = { id: new Map(), class: new Map(), attr: new Map(), tag: new Map(), universal: [] };
+  const sample = root.nodeType === 9 ? root.documentElement : root;
+  for (const selector of selectors) {
+    if (result.has(selector)) continue;
+    // :scope means the root to querySelectorAll() but the element to matches().
+    let compiled;
+    if (sample && !selector.includes(":scope")) {
+      compiled = compiledSelectors.get(selector);
+      if (compiled === undefined) {
+        compiled = compileSelector(sample, selector);
+        if (compiled !== undefined) compiledSelectors.set(selector, compiled);
+      }
+    }
+    if (compiled === null) continue;
+    if (compiled === undefined) {
+      try { result.set(selector, new Set(root.querySelectorAll(selector))); } catch { /* invalid */ }
+      continue;
+    }
+    const entry = { compiled, matched: new Set(), seen: 0 };
+    result.set(selector, entry.matched);
+    const keys = selectorKeys(selector).subject;
+    if (!keys) {
+      buckets.universal.push(entry);
+      continue;
+    }
+    for (const key of keys) {
+      const list = buckets[key.kind].get(key.name);
+      if (list) list.push(entry); else buckets[key.kind].set(key.name, [entry]);
+    }
+  }
+  let stamp = 0;
+  const test = (element, list) => {
+    if (!list) return;
+    for (const entry of list) {
+      if (entry.seen === stamp) continue;
+      entry.seen = stamp;
+      if (matchesCompiled(element, entry.compiled)) entry.matched.add(element);
+    }
+  };
+  const visit = (element) => {
+    stamp++;
+    const keys = elementKeys(element);
+    test(element, buckets.universal);
+    if (keys.id) test(element, buckets.id.get(keys.id));
+    for (const name of keys.classes) test(element, buckets.class.get(name));
+    for (const name of keys.attrs) test(element, buckets.attr.get(name));
+    if (keys.tag) test(element, buckets.tag.get(keys.tag));
+    for (const child of element.children) visit(child);
+  };
+  if (root.nodeType === 1) visit(root);
+  else for (const child of root.children ?? []) visit(child);
+  return result;
+}
+
 /** The keys an element offers to selectors: id, classes, attribute names, type. */
 function elementKeys(element) {
   const id = element.getAttribute?.("id") || null;
@@ -1273,203 +1675,102 @@ function elementKeys(element) {
   return { id, classes, attrs, tag: tag ? String(tag).toLowerCase() : null };
 }
 
-/** Ancestor filter keys for an element: "tag", "#id", ".class", "[attr". */
-function ancestorFilterKeys(keys) {
-  const result = [];
-  if (keys.tag) result.push(keys.tag);
-  if (keys.id) result.push(`#${keys.id}`);
-  for (const name of keys.classes) result.push(`.${name}`);
-  for (const name of keys.attrs) result.push(`[${name}`);
-  return result;
+// Ancestor filter keys that some rule requires, numbered for AncestorFilter.
+const FILTER_KEY_IDS = new Map();
+
+function filterKeyId(key) {
+  let id = FILTER_KEY_IDS.get(key);
+  if (id === undefined) FILTER_KEY_IDS.set(key, id = FILTER_KEY_IDS.size);
+  return id;
 }
 
 /**
- * Splits a complex selector into compounds and the combinators between them
- * (" ", ">", "+", "~"), ignoring anything inside (), [] and quotes. Returns
- * null for selectors this does not understand, which are then left unindexed.
+ * Counts of the filter keys on the elements above the one being styled (a
+ * counting filter, like Blink's ancestor Bloom filter but exact). Keys no
+ * rule requires are not counted. Created after the rules are indexed.
  */
-function selectorParts(selector) {
-  const compounds = [];
-  const combinators = [];
-  let current = "";
-  let pending = null;
-  let depth = 0;
-  for (let index = 0; index < selector.length; index++) {
-    const character = selector[index];
-    if (character === "\\") {
-      current += character + (selector[++index] ?? "");
-      continue;
-    }
-    if (character === "\"" || character === "'") {
-      const close = selector.indexOf(character, index + 1);
-      if (close < 0) return null;
-      current += selector.slice(index, close + 1);
-      index = close;
-      continue;
-    }
-    if (character === "(" || character === "[") depth++;
-    else if (character === ")" || character === "]") depth--;
-    if (depth === 0 && (character === " " || character === ">" || character === "+" || character === "~"
-      || character === "\t" || character === "\n" || character === "\r" || character === "\f")) {
-      if (current) {
-        compounds.push(current);
-        current = "";
-        pending = " ";
-      }
-      if (character === ">" || character === "+" || character === "~") {
-        if (pending === null && compounds.length === 0) return null;
-        pending = character;
-      }
-      continue;
-    }
-    if (pending !== null) {
-      combinators.push(pending);
-      pending = null;
-    }
-    current += character;
-  }
-  if (depth !== 0) return null;
-  if (current) compounds.push(current);
-  else if (pending !== null && compounds.length) return null;
-  return compounds.length ? { compounds, combinators } : null;
-}
+class AncestorFilter {
+  #counts = new Int32Array(Math.max(1, FILTER_KEY_IDS.size));
 
-const IDENTIFIER = /^(?:[\w-]|\\[^0-9a-fA-F\s]|[^\x00-\x7f])+/;
-
-/** An identifier at the start of `text`, unescaped; null when absent or hex-escaped. */
-function leadingIdentifier(text) {
-  const match = IDENTIFIER.exec(text);
-  if (!match || text[match[0].length] === "\\") return null;
-  return match[0].replace(/\\(.)/g, "$1");
-}
-
-/** Keys of one compound selector, from its parts outside () (ids, classes, attribute names, type). */
-function compoundKeys(compound) {
-  const keys = { ids: [], classes: [], attrs: [], tag: null, pseudo: [] };
-  if (compound.includes("|")) return keys;
-  const tag = /^[a-zA-Z][\w-]*/.exec(compound)?.[0];
-  if (tag) keys.tag = tag.toLowerCase();
-  let depth = 0;
-  for (let index = 0; index < compound.length; index++) {
-    const character = compound[index];
-    if (character === "\\") {
-      index++;
-      continue;
-    }
-    if (character === "(") {
-      depth++;
-      continue;
-    }
-    if (character === ")") {
-      depth--;
-      continue;
-    }
-    if (depth > 0) continue;
-    if (character === "[") {
-      const name = /^\s*([\w-]+)/.exec(compound.slice(index + 1))?.[1];
-      if (name) keys.attrs.push(name.toLowerCase());
-      // Skip to the closing bracket; quoted values may contain "]", "#" or ".".
-      let quote = null;
-      for (index++; index < compound.length; index++) {
-        const inner = compound[index];
-        if (inner === "\\") index++;
-        else if (quote) {
-          if (inner === quote) quote = null;
-        } else if (inner === "\"" || inner === "'") quote = inner;
-        else if (inner === "]") break;
-      }
-    } else if (character === "#" || character === ".") {
-      const name = leadingIdentifier(compound.slice(index + 1));
-      if (name && !(character === "." && /^\d/.test(name))) (character === "#" ? keys.ids : keys.classes).push(name);
-    } else if (character === ":") {
-      const name = /^:?([\w-]+)/.exec(compound.slice(index + 1))?.[1];
-      if (name) keys.pseudo.push({ name: name.toLowerCase(), start: index });
+  /** Adds an element's keys; returns what pop() takes to remove them. */
+  push(keys) {
+    const ids = [];
+    for (const key of ancestorFilterKeys(keys)) {
+      const id = FILTER_KEY_IDS.get(key);
+      if (id === undefined || id >= this.#counts.length) continue;
+      this.#counts[id]++;
+      ids.push(id);
     }
+    return ids;
   }
-  return keys;
-}
 
-/**
- * Bucket keys for the subject compound: one id, class, attribute or type key,
- * or one per alternative of an :is()/:where() whose alternatives all have one.
- */
-function subjectKeys(compound) {
-  const keys = compoundKeys(compound);
-  if (keys.ids.length) return [{ kind: "id", name: keys.ids[0] }];
-  if (keys.classes.length) return [{ kind: "class", name: keys.classes[0] }];
-  if (keys.attrs.length) return [{ kind: "attr", name: keys.attrs[0] }];
-  if (keys.tag) return [{ kind: "tag", name: keys.tag }];
-  if (keys.pseudo.some(({ name }) => name === "root")) return [{ kind: "tag", name: "html" }];
-  for (const { name, start } of keys.pseudo) {
-    if (!["is", "where", "matches", "-webkit-any"].includes(name)) continue;
-    const open = compound.indexOf("(", start);
-    const close = open < 0 ? -1 : matchingParenthesis(compound, open);
-    if (close < 0) return null;
-    const alternatives = splitTopLevel(compound.slice(open + 1, close), ",").filter(Boolean);
-    const result = [];
-    for (const alternative of alternatives) {
-      // Only simple alternatives: complex ones inside :is() are left to the
-      // selector engine unindexed, so indexing never changes a result.
-      const parts = selectorParts(alternative.trim());
-      const inner = parts?.compounds.length === 1 ? subjectKeys(parts.compounds[0]) : null;
-      if (!inner) return null;
-      result.push(...inner);
-    }
-    return result.length ? result : null;
+  pop(ids) {
+    for (const id of ids) this.#counts[id]--;
   }
-  return null;
-}
 
-/** Keys that must be present on some ancestor for the selector to match. */
-function ancestorKeys(parts) {
-  const keys = new Set();
-  for (let index = 0; index < parts.compounds.length - 1; index++) {
-    // Only compounds whose right-hand combinator is descendant or child are
-    // ancestors of the subject (a sibling's parent is the subject's parent).
-    if (parts.combinators[index] !== " " && parts.combinators[index] !== ">") continue;
-    const compound = compoundKeys(parts.compounds[index]);
-    if (compound.tag) keys.add(compound.tag);
-    for (const id of compound.ids) keys.add(`#${id}`);
-    for (const name of compound.classes) keys.add(`.${name}`);
-    for (const name of compound.attrs) keys.add(`[${name}`);
+  hasAll(ids) {
+    for (let index = 0; index < ids.length; index++) if (!(this.#counts[ids[index]] > 0)) return false;
+    return true;
   }
-  return [...keys];
 }
 
-function matchingParenthesis(text, open) {
-  let depth = 0;
-  for (let index = open; index < text.length; index++) {
-    if (text[index] === "\\") index++;
-    else if (text[index] === "(") depth++;
-    else if (text[index] === ")" && --depth === 0) return index;
-  }
-  return -1;
+/** Ancestor filter keys for an element: "tag", "#id", ".class", "[attr". */
+function ancestorFilterKeys(keys) {
+  const result = [];
+  if (keys.tag) result.push(keys.tag);
+  if (keys.id) result.push(`#${keys.id}`);
+  for (const name of keys.classes) result.push(`.${name}`);
+  for (const name of keys.attrs) result.push(`[${name}`);
+  return result;
 }
 
-function cascadeDeclarations(element, rules, pseudo = null, keys = elementKeys(element), ancestors = new Map()) {
+function cascadeDeclarations(element, rules, pseudo = null, keys = elementKeys(element), ancestors = new AncestorFilter()) {
   const result = new Map();
   result.hasCustomProperties = false;
   for (const rule of rules.candidates(keys, pseudo, ancestors)) {
     if (!matchesSelector(element, rule)) continue;
     if (rule.hasCustomProperties) result.hasCustomProperties = true;
+    const { specificity, order } = rule;
+    const layer = rule.layer ?? Infinity;
     for (const declaration of rule.declarationList) {
-      const candidate = { ...declaration, specificity: rule.specificity, order: rule.order, layer: rule.layer ?? Infinity };
-      const current = result.get(candidate.name);
-      if (!current || compareCascade(candidate, current) >= 0) result.set(candidate.name, candidate);
+      const current = result.get(declaration.name);
+      if (current && compareCascadeParts(declaration.important, layer, specificity, order, current) < 0) continue;
+      result.set(declaration.name, { name: declaration.name, value: declaration.value, important: declaration.important, specificity, order, layer });
     }
   }
   return result;
 }
 
 function compareCascade(left, right) {
-  if (left.important !== right.important) return left.important ? 1 : -1;
+  return compareCascadeParts(left.important, left.layer ?? Infinity, left.specificity, left.order, right);
+}
+
+/** compareCascade() for a left side given as its parts (no object for it). */
+function compareCascadeParts(important, layer, specificity, order, right) {
+  if (important !== right.important) return important ? 1 : -1;
   // Cascade layers: later layers and unlayered styles win for normal
   // declarations; for !important the order is reversed.
+  const rightLayer = right.layer ?? Infinity;
+  if (layer !== rightLayer) return (layer > rightLayer ? 1 : -1) * (important ? -1 : 1);
+  if (specificity !== right.specificity) return specificity - right.specificity;
+  return order - right.order;
+}
+
+/**
+ * compareCascade() for declarations that may lack cascade fields (user-agent
+ * and inline ones): absent means normal importance, specificity and order 0.
+ */
+function compareDeclarations(left, right) {
+  const leftImportant = Boolean(left.important);
+  const rightImportant = Boolean(right.important);
+  if (leftImportant !== rightImportant) return leftImportant ? 1 : -1;
   const leftLayer = left.layer ?? Infinity;
   const rightLayer = right.layer ?? Infinity;
-  if (leftLayer !== rightLayer) return (leftLayer > rightLayer ? 1 : -1) * (left.important ? -1 : 1);
-  if (left.specificity !== right.specificity) return left.specificity - right.specificity;
-  return left.order - right.order;
+  if (leftLayer !== rightLayer) return (leftLayer > rightLayer ? 1 : -1) * (leftImportant ? -1 : 1);
+  const leftSpecificity = "specificity" in left ? left.specificity : 0;
+  const rightSpecificity = "specificity" in right ? right.specificity : 0;
+  if (leftSpecificity !== rightSpecificity) return leftSpecificity - rightSpecificity;
+  return ("order" in left ? left.order : 0) - ("order" in right ? right.order : 0);
 }
 
 const PSEUDO_ELEMENT = /(?:::?(before|after)|::([\w-]+))$/i;
@@ -1480,9 +1781,14 @@ const PSEUDO_ELEMENT = /(?:::?(before|after)|::([\w-]+))$/i;
  * pseudo-elements that are not rendered (::placeholder, ::selection, ...).
  */
 function splitPseudoElement(selectorText) {
-  const match = PSEUDO_ELEMENT.exec(selectorText);
+  // A trailing pseudo-element starts at the last colon (or the one before
+  // it): only the tail needs the regular expression.
+  const colon = selectorText.lastIndexOf(":");
+  if (colon < 0) return { selector: selectorText, pseudo: null };
+  const offset = Math.max(0, colon - 1);
+  const match = PSEUDO_ELEMENT.exec(offset ? selectorText.slice(offset) : selectorText);
   if (!match) return { selector: selectorText, pseudo: null };
-  const selector = selectorText.slice(0, match.index).trim() || "*";
+  const selector = selectorText.slice(0, offset + match.index).trim() || "*";
   return { selector, pseudo: match[1] ? match[1].toLowerCase() : undefined };
 }
 
@@ -1544,7 +1850,18 @@ function addSpecificity(left, right) {
 function matchesSelector(element, rule) {
   if (rule.invalid || typeof element.matches !== "function") return false;
   try {
-    return element.matches(rule.selector);
+    // Compiled once per rule; objects other than Happy DOM elements use matches().
+    let compiled = rule.compiled;
+    if (compiled === undefined) {
+      compiled = compileSelector(element, rule.selector);
+      if (compiled === undefined) return element.matches(rule.selector);
+      rule.compiled = compiled;
+    }
+    if (compiled === null) {
+      rule.invalid = true;
+      return false;
+    }
+    return matchesCompiled(element, compiled);
   } catch {
     rule.invalid = true;
     return false;
@@ -1678,6 +1995,7 @@ function cssValue(style, name) {
     "line-height": style.lineHeightFactor != null ? String(style.lineHeightFactor)
       : style.lineHeight == null ? "normal" : `${style.lineHeight}px`,
     "list-style-type": style.listStyleType,
+    "pointer-events": style.pointerEvents,
     "text-align": style.textAlign,
     "white-space": style.whiteSpace,
   })[name] ?? style[name];
@@ -1988,6 +2306,17 @@ function flexShorthand(value, fontSize) {
   };
 }
 
+function resolvedColor(value, scheme) {
+  const match = /^light-dark\((.*)\)$/is.exec(value.trim());
+  if (match) {
+    const choices = splitTopLevel(match[1], ",");
+    if (choices.length !== 2) return null;
+    return resolvedColor(choices[scheme === "dark" ? 1 : 0], scheme);
+  }
+  const color = Bun.color(value, "rgba");
+  return /^rgba\(/.test(color ?? "") ? color : null;
+}
+
 function splitTopLevel(source, separator) {
   const parts = [];
   let depth = 0;