1
>
/*---------------------------------------------------------------------------------------------
cssHelpers.ts
2
>
* Copyright (c) Microsoft Corporation. All rights reserved.
3
>
* Licensed under the MIT License. See License.txt in the project root for license information.
4
>
*--------------------------------------------------------------------------------------------*/
5
>
6
>
// -- CDP matched-styles types (subset used by formatAuthorStyles) --
7
>
8
>
export interface ICSSStyle {
9
>
cssText?: string;
10
>
cssProperties: Array<{ name: string; value: string; disabled?: boolean }>;
11
>
}
12
>
13
>
interface ISelectorList {
14
>
selectors: Array<{ text: string }>;
15
>
}
16
>
17
>
interface ICSSRule {
18
>
selectorList: ISelectorList;
19
>
origin: string;
20
>
style: ICSSStyle;
21
>
}
22
>
23
>
interface IRuleMatch {
24
>
rule: ICSSRule;
25
>
}
26
>
27
>
interface IInheritedStyleEntry {
28
>
inlineStyle?: ICSSStyle;
29
>
matchedCSSRules: IRuleMatch[];
30
>
}
31
>
32
>
interface IPseudoElementMatches {
33
>
pseudoType: string;
34
>
matches: IRuleMatch[];
35
>
}
36
>
37
>
export interface IMatchedStyles {
38
>
inlineStyle?: ICSSStyle;
39
>
matchedCSSRules?: IRuleMatch[];
40
>
inherited?: IInheritedStyleEntry[];
41
>
pseudoElements?: IPseudoElementMatches[];
42
>
}
43
>
44
>
export interface IFormattedStyles {
45
>
/** Compact CSS text for the agent prompt (rules only, without resolved values). */
46
>
rulesText: string;
47
>
/** Set of CSS variable names referenced by the element's rules. */
48
>
referencedVars: Set<string>;
49
>
/** Set of CSS property names that were explicitly set by author rules. */
50
>
authorPropertyNames: Set<string>;
51
>
/** Set of CSS property names that were set by user-agent rules. */
52
>
userAgentPropertyNames: Set<string>;
53
>
}
54
>
55
>
// -- Constants --
56
>
57
>
/**
58
>
* CSS properties that are inherited by child elements.
59
>
*/
60
>
const inheritableCSSProperties = new Set([
61
>
'color', 'cursor', 'direction', 'font', 'font-family', 'font-feature-settings',
62
>
'font-kerning', 'font-size', 'font-size-adjust', 'font-stretch', 'font-style',
63
>
'font-variant', 'font-weight', 'letter-spacing', 'line-height', 'list-style',
64
>
'list-style-image', 'list-style-position', 'list-style-type', 'orphans',
65
>
'overflow-wrap', 'quotes', 'tab-size', 'text-align', 'text-align-last',
66
>
'text-indent', 'text-transform', 'visibility', 'white-space', 'widows',
67
>
'word-break', 'word-spacing', 'writing-mode',
68
>
]);
69
>
70
>
const varReferenceRegex = /var\(\s*(--[a-zA-Z0-9_-]+)/g;
71
>
72
>
/**
73
>
* Key computed properties included for hover display in the UI.
74
>
*/
75
>
export const keyComputedProperties = new Set([
76
>
'display', 'position', 'margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left',
77
>
'padding', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left',
78
>
'font-size', 'font-family', 'color', 'background-color',
79
>
]);
80
>
81
>
/**
82
>
* Properties always included in resolved values even if only set by user-agent rules,
83
>
* matching Chrome DevTools' `alwaysShownComputedProperties`.
84
>
*/
85
>
const alwaysResolvedProperties = new Set(['display', 'height', 'width']);
86
>
87
>
// -- Helper functions --
88
>
89
>
/**
90
>
* Collects var(--name) references from a CSS value string.
91
>
*/
92
function collectVarReferences(value: string, into: Set<string>): void {
93
for (const m of value.matchAll(varReferenceRegex)) {