browser-debugger-cli 0.11.0 → 0.13.0

package/dist/runtime/dom/inspectAllStyles.js

@@ -3,13 +3,13 @@
  *
  * `--all` lists every computed longhand that is not noise and not its
  * default, collapsed into shorthands (margin, padding, inset, border,
- * radius, overflow, gap, flex, grid area, outline, animation). Defaults are
+ * radius, overflow, gap, flex, grid area, outline, animation, transition). Defaults are
  * the CSS initial values as Chrome computes them; the UA stylesheet's
  * per-tag values (a `<p>`'s margins, a button's padding) are real values and
  * are listed. Display, font, size, line height and color are always listed.
  *
  * Noise: custom properties, logical duplicates of physical properties,
- * width/height (in the header), transitions, origins without a transform,
+ * width/height (in the header), origins without a transform,
  * colors that only repeat `color` (currentColor), properties of borders,
  * outlines and rules that are not drawn, SVG paint properties on HTML
  * elements, and vendor-prefixed internals.
@@ -98,6 +98,28 @@ const INITIAL_BY_VALUE = [
     ['collapse', 'white-space-collapse'],
     ['horizontal-tb', 'writing-mode'],
     ['isolate', 'unicode-bidi'],
+    ['rgb(0, 0, 0)', 'fill flood-color stop-color'],
+    ['1', 'fill-opacity flood-opacity stop-opacity stroke-opacity'],
+    ['rgb(255, 255, 255)', 'lighting-color'],
+    ['1px', 'stroke-width'],
+    ['4', 'stroke-miterlimit'],
+    ['butt', 'stroke-linecap'],
+    ['miter', 'stroke-linejoin'],
+    ['nonzero', 'fill-rule clip-rule'],
+    ['none', 'stroke stroke-dasharray marker-start marker-mid marker-end vector-effect'],
+    ['0px', 'stroke-dashoffset baseline-shift'],
+    [
+        'auto',
+        'shape-rendering dominant-baseline alignment-baseline buffered-rendering color-rendering',
+    ],
+    ['srgb', 'color-interpolation'],
+    ['linearrgb', 'color-interpolation-filters'],
+    ['all', 'transition-property'],
+    ['0s', 'transition-duration transition-delay'],
+    ['ease', 'transition-timing-function'],
+    ['normal', 'transition-behavior paint-order'],
+    ['start', 'text-anchor'],
+    ['rgba(0, 0, 0, 0.18)', '-webkit-tap-highlight-color'],
 ];
 /** Initial value per property ({@link INITIAL_BY_VALUE}) */
 const INITIAL_VALUES = new Map(INITIAL_BY_VALUE.flatMap(([value, names]) => names.split(' ').map((name) => [name, value])));
@@ -144,9 +166,11 @@ const NOISE = new Set([
 const LOGICAL = /((^|-)block(-|$)|(^|-)inline(-|$)|^inset-|-start-start|-start-end|-end-end|-end-start)/;
 /** Vendor-prefixed properties worth listing */
 const PREFIXED_KEPT = new Set([
+    '-webkit-tap-highlight-color',
     '-webkit-line-clamp',
     '-webkit-text-stroke-width',
     '-webkit-text-security',
+    '-webkit-text-fill-color',
 ]);
 /** SVG paint and geometry properties (noise on HTML elements) */
 const SVG_ONLY = /^(fill|fill-opacity|fill-rule|stroke|stroke-.*|stop-.*|flood-.*|lighting-color|marker-.*|clip-rule|color-interpolation.*|color-rendering|shape-rendering|text-anchor|dominant-baseline|alignment-baseline|baseline-shift|vector-effect|buffered-rendering|paint-order|mask-type)$/;
@@ -161,7 +185,9 @@ const CURRENT_COLOR_ECHOES = /^(border-(top|right|bottom|left)-color|outline-col
  * @returns True when it is left out
  */
 function isNoise(name, style, svg) {
-    if (name.startsWith('--') || NOISE.has(name) || name.startsWith('transition'))
+    if (name.startsWith('--') || NOISE.has(name))
+        return true;
+    if (name.startsWith('transition') && style['transition-duration'] === '0s')
         return true;
     if (LOGICAL.test(name) && !name.endsWith('-axis'))
         return true;
@@ -266,7 +292,56 @@ const COLLAPSES = [
         ],
         write: (v) => v.join(' '),
     },
+    {
+        shorthand: 'transition',
+        longhands: [
+            'transition-property',
+            'transition-duration',
+            'transition-timing-function',
+            'transition-delay',
+            'transition-behavior',
+        ],
+        write: transitionList,
+    },
 ];
+/**
+ * A transition list from its longhands' comma lists, one transition per
+ * property, defaults left out (`background-color 0.25s ease-in, opacity 0.2s`).
+ *
+ * @param values - Property, duration, timing function, delay and behavior lists
+ * @returns Transition shorthand
+ */
+function transitionList(values) {
+    const lists = values.map((value) => value.split(/,\s*(?![^(]*\))/));
+    const [properties = []] = lists;
+    return properties
+        .map((property, i) => {
+        const at = (list) => list?.[i % list.length] ?? '';
+        const [duration, timing, delay, behavior] = lists.slice(1).map(at);
+        return [
+            property,
+            duration,
+            timing === 'ease' ? '' : timing,
+            delay === '0s' ? '' : delay,
+            behavior === 'normal' ? '' : behavior,
+        ]
+            .filter(Boolean)
+            .join(' ');
+    })
+        .join(', ');
+}
+/**
+ * A shorthand's computed value as `--all` writes it (`margin 0 8`,
+ * `outline 2 solid #f00`, `transition color 1s ease-in`).
+ *
+ * @param shorthand - Shorthand name
+ * @param style - Computed longhands
+ * @returns Value, or undefined for a shorthand `--all` does not collapse
+ */
+export function collapsedValue(shorthand, style) {
+    const group = COLLAPSES.find((entry) => entry.shorthand === shorthand);
+    return group?.write(group.longhands.map((longhand) => normalizeProperty(longhand, style[longhand] ?? '')));
+}
 /**
  * Border longhands collapsed: one `border` when the four drawn sides are
  * equal, else one entry per drawn side.
@@ -337,13 +412,15 @@ function isUnsetOffset(name, value, style) {
  *
  * @param style - Computed styles
  * @param svg - The element is an SVG element (SVG properties are listed)
+ * @param formControl - A form control (`appearance: none` is not its default)
  * @returns Properties and values
  */
-export function allStyles(style, svg) {
+export function allStyles(style, svg, formControl = false) {
     const kept = new Map();
     const transformed = (style['transform'] ?? 'none') !== 'none';
     for (const [name, value] of Object.entries(style)) {
-        if (name === 'transform-origin' && transformed) {
+        const set = (name === 'transform-origin' && transformed) || (name === 'appearance' && formControl);
+        if (set) {
             kept.set(name, normalizeProperty(name, value));
             continue;
         }
@@ -364,10 +441,12 @@ export function allStyles(style, svg) {
  * @param style - Computed longhands (CDP)
  * @param pageValues - Values the page read
  * @param pageUnknown - Names the page does not know as CSS properties
+ * @param rootFontSize - Root font size (px): a custom property that is one
+ *   rem length is also given in px
  * @returns Values by name (an unset custom property is empty), and the
  *   names that are not properties
  */
-export function selectedProps(names, style, pageValues, pageUnknown = []) {
+export function selectedProps(names, style, pageValues, pageUnknown = [], rootFontSize = 16) {
     const props = {};
     const unknown = [];
     for (const name of names) {
@@ -377,7 +456,11 @@ export function selectedProps(names, style, pageValues, pageUnknown = []) {
             unknown.push(name);
         }
         else {
-            props[name] = { computed, value: normalizeProperty(name, computed) };
+            const rem = name.startsWith('--') ? /^(-?\d*\.?\d+)rem$/.exec(computed.trim()) : null;
+            const value = rem
+                ? String(Math.round(Number(rem[1]) * rootFontSize * 10) / 10)
+                : normalizeProperty(name, computed);
+            props[name] = { computed, value };
         }
     }
     return { props, unknown };

package/dist/runtime/dom/inspectCascade.d.ts

@@ -32,6 +32,11 @@ export interface DeclarationSource {
     condition?: string;
     /** Specificity of the matching selector (ids, classes, types) */
     specificity?: [number, number, number];
+    /** The rule as written, whitespace collapsed (no selector: the style attribute) */
+    rule?: {
+        selector?: string;
+        declarations: string;
+    };
 }
 /** One declaration of a longhand */
 export interface Declaration {
@@ -66,9 +71,11 @@ export declare function shorthandLonghands(name: string): readonly string[] | un
  * Whether a property inherits.
  *
  * @param property - Longhand
- * @returns True for inherited properties (custom properties inherit)
+ * @param notInherited - Custom properties registered with `inherits: false`
+ * @returns True for inherited properties (custom properties inherit unless
+ *   registered otherwise)
  */
-export declare function isInherited(property: string): boolean;
+export declare function isInherited(property: string, notInherited?: ReadonlySet<string>): boolean;
 /**
  * The physical longhand a logical property sets.
  *
@@ -91,4 +98,14 @@ export declare function ownProperties(matched: Protocol.CSS.GetMatchedStylesForN
  * @returns Resolution per property
  */
 export declare function resolveCascade(matched: Protocol.CSS.GetMatchedStylesForNodeResponse, properties: readonly string[]): Map<string, Resolution>;
+/**
+ * The rule a declaration is in, as written: whole when short, else its
+ * selector and that declaration (`.btn { … background-color:var(--bs-btn-bg); … }`).
+ *
+ * @param declaration - Declaration
+ * @returns `{ rule }`, or nothing for a browser, extension or attribute style
+ */
+export declare function ruleField(declaration: Declaration): {
+    rule?: string;
+};
 //# sourceMappingURL=inspectCascade.d.ts.map

package/dist/runtime/dom/inspectCascade.js

@@ -13,6 +13,7 @@
  * writing). With no declaration of its own, an inherited property comes from
  * the nearest ancestor that declares it.
  */
+import { truncateByLength } from '../../utils/strings.js';
 /**
  * The four side longhands of a pattern.
  *
@@ -64,9 +65,37 @@ const SHORTHANDS = {
         `border-${side}`,
         ['width', 'style', 'color'].map((part) => `border-${side}-${part}`),
     ])),
-    background: ['background-color', 'background-image'],
+    background: [
+        'background-color',
+        'background-image',
+        'background-position-x',
+        'background-position-y',
+        'background-size',
+        'background-repeat',
+        'background-origin',
+        'background-clip',
+        'background-attachment',
+    ],
     font: ['font-style', 'font-weight', 'font-size', 'line-height', 'font-family'],
     flex: ['flex-grow', 'flex-shrink', 'flex-basis'],
+    'flex-flow': ['flex-direction', 'flex-wrap'],
+    outline: ['outline-width', 'outline-style', 'outline-color'],
+    'text-decoration': [
+        'text-decoration-line',
+        'text-decoration-style',
+        'text-decoration-color',
+        'text-decoration-thickness',
+    ],
+    transition: [
+        'transition-property',
+        'transition-duration',
+        'transition-timing-function',
+        'transition-delay',
+        'transition-behavior',
+    ],
+    'background-position': ['background-position-x', 'background-position-y'],
+    'list-style': ['list-style-position', 'list-style-image', 'list-style-type'],
+    columns: ['column-width', 'column-count'],
     'place-items': ['align-items', 'justify-items'],
     'place-content': ['align-content', 'justify-content'],
     'place-self': ['align-self', 'justify-self'],
@@ -91,35 +120,31 @@ const LOGICAL_SIDES = {
     'inline-start': 'left',
     'inline-end': 'right',
 };
-/** Properties that inherit (those `dom inspect` reports) */
+/** Longhands that inherit (CSS, SVG and the prefixed ones Chrome computes) */
 const INHERITED = new Set([
-    'color',
-    'font-family',
-    'font-size',
-    'font-style',
-    'font-weight',
-    'font-variant',
-    'font-feature-settings',
-    'font-variation-settings',
-    'line-height',
-    'letter-spacing',
-    'word-spacing',
-    'text-align',
-    'text-indent',
-    'text-transform',
-    'text-shadow',
-    'white-space-collapse',
-    'text-wrap-mode',
-    'visibility',
-    'cursor',
-    'direction',
-    'list-style-type',
-    'list-style-position',
-    'tab-size',
-    'pointer-events',
-    'user-select',
-    '-webkit-text-security',
-]);
+    'color caret-color accent-color color-scheme forced-color-adjust print-color-adjust',
+    'font-family font-size font-style font-weight font-stretch font-size-adjust font-kerning',
+    'font-optical-sizing font-palette font-language-override font-feature-settings',
+    'font-variation-settings font-variant font-variant-caps font-variant-ligatures',
+    'font-variant-numeric font-variant-east-asian font-variant-alternates',
+    'font-variant-position font-variant-emoji font-synthesis-weight font-synthesis-style',
+    'font-synthesis-small-caps line-height letter-spacing word-spacing text-align',
+    'text-align-last text-indent text-justify text-transform text-shadow text-rendering',
+    'text-size-adjust text-underline-position text-underline-offset text-decoration-skip-ink',
+    'text-emphasis-style text-emphasis-color text-emphasis-position text-orientation',
+    'text-wrap-mode text-wrap-style text-spacing-trim text-autospace white-space-collapse',
+    'word-break overflow-wrap line-break hyphens hyphenate-character hyphenate-limit-chars',
+    'tab-size direction writing-mode ruby-position ruby-align visibility cursor',
+    'pointer-events user-select interpolate-size list-style-type list-style-position',
+    'list-style-image quotes border-collapse border-spacing caption-side empty-cells orphans',
+    'widows image-rendering fill fill-opacity fill-rule stroke stroke-width stroke-opacity',
+    'stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit',
+    'paint-order marker-start marker-mid marker-end clip-rule color-interpolation',
+    'color-interpolation-filters color-rendering shape-rendering text-anchor dominant-baseline',
+    'math-depth math-style math-shift scrollbar-color text-combine-upright',
+    '-webkit-text-security -webkit-text-fill-color',
+    '-webkit-text-stroke-color -webkit-text-stroke-width',
+].flatMap((names) => names.split(' ')));
 /**
  * The longhands of a shorthand.
  *
@@ -133,10 +158,30 @@ export function shorthandLonghands(name) {
  * Whether a property inherits.
  *
  * @param property - Longhand
- * @returns True for inherited properties (custom properties inherit)
+ * @param notInherited - Custom properties registered with `inherits: false`
+ * @returns True for inherited properties (custom properties inherit unless
+ *   registered otherwise)
+ */
+export function isInherited(property, notInherited) {
+    if (property.startsWith('--'))
+        return !notInherited?.has(property);
+    return INHERITED.has(property);
+}
+/**
+ * Custom properties registered not to inherit, with `@property` or
+ * `CSS.registerProperty`.
+ *
+ * @param matched - `CSS.getMatchedStylesForNode` response
+ * @returns Their names
  */
-export function isInherited(property) {
-    return INHERITED.has(property) || property.startsWith('--');
+function nonInheritingProperties(matched) {
+    const fromRules = (matched.cssPropertyRules ?? [])
+        .filter((rule) => rule.style.cssProperties.some((property) => property.name === 'inherits' && property.value.trim() === 'false'))
+        .map((rule) => rule.propertyName.text);
+    const fromScript = (matched.cssPropertyRegistrations ?? [])
+        .filter((registration) => !registration.inherits)
+        .map((registration) => registration.propertyName);
+    return new Set([...fromRules, ...fromScript]);
 }
 /**
  * The physical longhand a logical property sets.
@@ -211,23 +256,43 @@ function declarationsOf(style, source) {
     });
 }
 /**
- * Source of a matched rule: its matching selector, origin, stylesheet,
- * layer (nested ones as `outer.inner`), the media or container condition
- * it is under (`not all and (…)`, as Chrome writes `not (…)`, shortened) and
- * the selector's specificity.
+ * The selector of a rule's list that matched with the highest specificity
+ * (the one the cascade uses: `.title` of `h1, .title`).
+ *
+ * @param match - CDP rule match
+ * @returns Selector
+ */
+function strongestMatchingSelector(match) {
+    const weight = (value) => {
+        const s = value?.specificity;
+        return s ? s.a * 1e6 + s.b * 1e3 + s.c : -1;
+    };
+    const selectors = match.rule.selectorList.selectors;
+    const matching = match.matchingSelectors.map((index) => selectors[index]);
+    return (matching.reduce((best, value) => (weight(value) > weight(best) ? value : best), matching[0]) ??
+        selectors[0]);
+}
+/**
+ * Source of a matched rule: its matching selector (the strongest of a list),
+ * origin, stylesheet, layer (nested ones as `outer.inner`), the media,
+ * container, `@supports` and `@scope` conditions it is under (`not all and
+ * (…)`, as Chrome writes `not (…)`, shortened) and the selector's specificity.
  *
  * @param match - CDP rule match
  * @returns Declaration source
  */
 function ruleSource(match) {
     const { rule } = match;
-    const matching = rule.selectorList.selectors[match.matchingSelectors[0] ?? 0];
+    const matching = strongestMatchingSelector(match);
     const selector = matching?.text ?? rule.selectorList.text;
     const layer = rule.layers?.map((l) => l.text || '(anonymous)').join('.');
-    const condition = [...(rule.media ?? []), ...(rule.containerQueries ?? [])]
-        .map((c) => c.text.replace(/^not all and /, 'not '))
-        .join(' and ');
+    const condition = [
+        ...[...(rule.media ?? []), ...(rule.containerQueries ?? [])].map((c) => c.text.replace(/^not all and /, 'not ')),
+        ...(rule.supports ?? []).map((c) => `supports ${c.text}`),
+        ...(rule.scopes ?? []).map((c) => `scope ${c.text}`),
+    ].join(' and ');
     const specificity = matching?.specificity;
+    const declarations = rule.style.cssText;
     return {
         kind: 'rule',
         selector,
@@ -236,6 +301,9 @@ function ruleSource(match) {
         ...(rule.styleSheetId && { styleSheetId: rule.styleSheetId }),
         ...(layer && { layer }),
         ...(condition && { condition }),
+        ...(declarations && {
+            rule: { selector: collapse(rule.selectorList.text), declarations: collapse(declarations) },
+        }),
     };
 }
 /**
@@ -248,9 +316,23 @@ function orderedDeclarations(entry) {
     return [
         ...declarationsOf(entry.attributesStyle, { kind: 'attribute' }),
         ...(entry.matchedCSSRules ?? []).flatMap((match) => declarationsOf(match.rule.style, ruleSource(match))),
-        ...declarationsOf(entry.inlineStyle, { kind: 'inline' }),
+        ...declarationsOf(entry.inlineStyle, {
+            kind: 'inline',
+            ...(entry.inlineStyle?.cssText && {
+                rule: { declarations: collapse(entry.inlineStyle.cssText) },
+            }),
+        }),
     ];
 }
+/**
+ * Text with runs of whitespace collapsed to one space.
+ *
+ * @param text - CSS text
+ * @returns Collapsed, trimmed
+ */
+function collapse(text) {
+    return text.replace(/\s+/g, ' ').trim();
+}
 /**
  * Whether a declaration comes from the page's authors (not the browser's
  * own stylesheet or an extension's).
@@ -337,6 +419,7 @@ export function ownProperties(matched) {
 export function resolveCascade(matched, properties) {
     const own = orderedDeclarations(matched);
     const ancestors = (matched.inherited ?? []).map(orderedDeclarations);
+    const notInherited = nonInheritingProperties(matched);
     const resolved = new Map();
     for (const property of properties) {
         const ranked = byPrecedence(own.filter((d) => d.property === property));
@@ -345,7 +428,7 @@ export function resolveCascade(matched, properties) {
             resolved.set(property, { winner, overridden });
             continue;
         }
-        resolved.set(property, inheritedWinner(property, ancestors));
+        resolved.set(property, inheritedWinner(property, ancestors, notInherited));
     }
     return resolved;
 }
@@ -354,11 +437,12 @@ export function resolveCascade(matched, properties) {
  *
  * @param property - Longhand
  * @param ancestors - Declarations of each ancestor, nearest first
+ * @param notInherited - Custom properties registered not to inherit
  * @returns The winner and the declarations it beat on that ancestor (none for
  *   non-inherited properties or when no ancestor sets it)
  */
-function inheritedWinner(property, ancestors) {
-    if (!isInherited(property))
+function inheritedWinner(property, ancestors, notInherited) {
+    if (!isInherited(property, notInherited))
         return { overridden: [] };
     for (const [depth, declarations] of ancestors.entries()) {
         const ranked = byPrecedence(declarations.filter((d) => d.property === property)).map((declaration) => ({ ...declaration, ancestor: depth + 1 }));
@@ -368,4 +452,90 @@ function inheritedWinner(property, ancestors) {
     }
     return { overridden: [] };
 }
+/** Longest rule given whole; a longer one (minified CSS) is cut to the declaration */
+const RULE_TEXT_LENGTH = 300;
+/**
+ * The rule a declaration is in, as written: whole when short, else its
+ * selector and that declaration (`.btn { … background-color:var(--bs-btn-bg); … }`).
+ *
+ * @param declaration - Declaration
+ * @returns `{ rule }`, or nothing for a browser, extension or attribute style
+ */
+export function ruleField(declaration) {
+    const { rule } = declaration.source;
+    if (!rule || !isAuthor(declaration))
+        return {};
+    const whole = ruleText(rule.selector, rule.declarations);
+    if (whole.length <= RULE_TEXT_LENGTH)
+        return { rule: whole };
+    const own = lastDeclarationOf(rule.declarations, declaration.via ?? declaration.property);
+    if (!own)
+        return { rule: truncateByLength(whole, RULE_TEXT_LENGTH) };
+    const selector = rule.selector === undefined ? undefined : truncateByLength(rule.selector, 80);
+    return { rule: ruleText(selector, `… ${truncateByLength(own, RULE_TEXT_LENGTH - 100)}; …`) };
+}
+/**
+ * A rule's text: `selector { declarations }`, or `style="declarations"`.
+ *
+ * @param selector - Selector (absent: the style attribute)
+ * @param declarations - Declarations
+ * @returns Text
+ */
+function ruleText(selector, declarations) {
+    return selector === undefined
+        ? `style="${declarations.replaceAll('"', '\\"')}"`
+        : `${selector} { ${declarations} }`;
+}
+/**
+ * The last declaration of a property in a declaration block (the one that
+ * counts when it is repeated), split at semicolons outside strings and
+ * parentheses (`url(data:image/png;base64,…)` stays whole).
+ *
+ * @param declarations - Declaration block
+ * @param property - Property as written (custom properties are case-sensitive)
+ * @returns The declaration, without its semicolon
+ */
+function lastDeclarationOf(declarations, property) {
+    const name = (part) => {
+        const raw = part.slice(0, part.indexOf(':')).trim();
+        return raw.startsWith('--') ? raw : raw.toLowerCase();
+    };
+    const wanted = property.startsWith('--') ? property : property.toLowerCase();
+    return splitDeclarations(declarations)
+        .filter((part) => part.includes(':') && name(part) === wanted)
+        .at(-1);
+}
+/**
+ * Split a declaration block at its top-level semicolons.
+ *
+ * @param block - Declarations
+ * @returns Declarations, trimmed, empty ones dropped
+ */
+function splitDeclarations(block) {
+    const parts = [];
+    let depth = 0;
+    let quote;
+    let start = 0;
+    for (let i = 0; i < block.length; i++) {
+        const char = block[i];
+        if (quote) {
+            if (char === '\\')
+                i++;
+            else if (char === quote)
+                quote = undefined;
+        }
+        else if (char === '"' || char === "'")
+            quote = char;
+        else if (char === '(')
+            depth++;
+        else if (char === ')')
+            depth = Math.max(0, depth - 1);
+        else if (char === ';' && depth === 0) {
+            parts.push(block.slice(start, i));
+            start = i + 1;
+        }
+    }
+    parts.push(block.slice(start));
+    return parts.map((part) => part.trim()).filter(Boolean);
+}
 //# sourceMappingURL=inspectCascade.js.map

package/dist/runtime/dom/inspectCascadeModel.d.ts

@@ -8,6 +8,7 @@ import type { Protocol } from '../../connection/typed-cdp.js';
 import type { InspectResult } from '../../ipc/protocol/inspectTypes.js';
 import { type Declaration } from './inspectCascade.js';
 import type { StyleMap } from './inspectLayoutModel.js';
+import type { InactiveRule } from './inspectScripts.js';
 /** Longhands reported together, so a shorthand can stand for its sides */
 export interface PropertyGroup {
     shorthand?: string;
@@ -25,8 +26,15 @@ export interface CascadeInput {
     why?: string;
     /** `--props` names: `--rules` then covers only these */
     props?: string[];
+    /** Longhands of the `--why` shorthand as the browser expands it */
+    whyLonghands?: string[];
+    /** Computed value of the `--why` shorthand, as the page writes it */
+    whyComputed?: string;
+    /** Rules that set the `--why` property under a condition that does not apply now */
+    whyInactive?: InactiveRule[];
     /** Check for declarations that have no effect (default true) */
     hints?: boolean;
+    /** A form control that draws text (its font is checked against the parent's) */
     formControl?: boolean;
 }
 /**