gradio

1
let supports_adopted_stylesheets = false;
2

3
if (
4
	"attachShadow" in Element.prototype &&
5
	"adoptedStyleSheets" in Document.prototype
6
) {
7
	// Both Shadow DOM and adoptedStyleSheets are supported
8
	const shadow_root_test = document
9
		.createElement("div")
10
		.attachShadow({ mode: "open" });
11
	supports_adopted_stylesheets = "adoptedStyleSheets" in shadow_root_test;
12
}
13

14
export function mount_css(url: string, target: HTMLElement): Promise<void> {
15
	const base = new URL(import.meta.url).origin;
16
	const _url = new URL(url, base).href;
17
	const existing_link = document.querySelector(`link[href='${_url}']`);
18

19
	if (existing_link) return Promise.resolve();
20

21
	const link = document.createElement("link");
22
	link.rel = "stylesheet";
23
	link.href = _url;
24

25
	return new Promise((res, rej) => {
26
		link.addEventListener("load", () => res());
27
		link.addEventListener("error", () => {
28
			console.error(`Unable to preload CSS for ${_url}`);
29
			res();
30
		});
31
		target.appendChild(link);
32
	});
33
}
34

35
export function prefix_css(
36
	string: string,
37
	version: string,
38
	style_element = document.createElement("style")
39
): HTMLStyleElement | null {
40
	if (!supports_adopted_stylesheets) return null;
41
	style_element.remove();
42

43
	const stylesheet = new CSSStyleSheet();
44
	stylesheet.replaceSync(string);
45

46
	let importString = "";
47
	string = string.replace(/@import\s+url\((.*?)\);\s*/g, (match, url) => {
48
		importString += `@import url(${url});\n`;
49
		return ""; // remove and store any @import statements from the CSS
50
	});
51

52
	const rules = stylesheet.cssRules;
53

54
	let css_string = "";
55
	let gradio_css_infix = `gradio-app .gradio-container.gradio-container-${version} .contain `;
56

57
	for (let i = 0; i < rules.length; i++) {
58
		const rule = rules[i];
59

60
		let is_dark_rule = rule.cssText.includes(".dark");
61
		if (rule instanceof CSSStyleRule) {
62
			const selector = rule.selectorText;
63
			if (selector) {
64
				const new_selector = selector
65
					.replace(".dark", "")
66
					.split(",")
67
					.map(
68
						(s) =>
69
							`${is_dark_rule ? ".dark" : ""} ${gradio_css_infix} ${s.trim()} `
70
					)
71
					.join(",");
72

73
				css_string += rule.cssText;
74
				css_string += rule.cssText.replace(selector, new_selector);
75
			}
76
		} else if (rule instanceof CSSMediaRule) {
77
			let mediaCssString = `@media ${rule.media.mediaText} {`;
78
			for (let j = 0; j < rule.cssRules.length; j++) {
79
				const innerRule = rule.cssRules[j];
80
				if (innerRule instanceof CSSStyleRule) {
81
					let is_dark_rule = innerRule.cssText.includes(".dark ");
82
					const selector = innerRule.selectorText;
83
					const new_selector = selector
84
						.replace(".dark", "")
85
						.split(",")
86
						.map(
87
							(s) =>
88
								`${
89
									is_dark_rule ? ".dark" : ""
90
								} ${gradio_css_infix} ${s.trim()} `
91
						)
92
						.join(",");
93
					mediaCssString += innerRule.cssText.replace(selector, new_selector);
94
				}
95
			}
96
			mediaCssString += "}";
97
			css_string += mediaCssString;
98
		} else if (rule instanceof CSSKeyframesRule) {
99
			css_string += `@keyframes ${rule.name} {`;
100
			for (let j = 0; j < rule.cssRules.length; j++) {
101
				const innerRule = rule.cssRules[j];
102
				if (innerRule instanceof CSSKeyframeRule) {
103
					css_string += `${innerRule.keyText} { ${innerRule.style.cssText} }`;
104
				}
105
			}
106
			css_string += "}";
107
		} else if (rule instanceof CSSFontFaceRule) {
108
			css_string += `@font-face { ${rule.style.cssText} }`;
109
		}
110
	}
111
	css_string = importString + css_string;
112
	style_element.textContent = css_string;
113

114
	document.head.appendChild(style_element);
115
	return style_element;
116
}
117