Use adopted stylesheets for notebook codeblock theming (microsoft#185616)

mjbvz · web-flow · commit 97f3d5b8503c · 2023-06-19T16:03:47.000-07:00
Fixes microsoft#185251
diff --git a/src/vs/workbench/contrib/notebook/browser/view/renderers/backLayerWebView.ts b/src/vs/workbench/contrib/notebook/browser/view/renderers/backLayerWebView.ts
@@ -285,7 +285,10 @@ export class BackLayerWebView<T extends ICommonCellInfo> extends Themable {
 			outputWordWrap: this.options.outputWordWrap
 		};
 		const preloadScript = preloadsScriptStr(
-			this.options,
+			{
+				...this.options,
+				tokenizationCss: getTokenizationCss(),
+			},
 			{ dragAndDropEnabled: this.options.dragAndDropEnabled },
 			renderOptions,
 			renderersData,
@@ -447,7 +450,6 @@ export class BackLayerWebView<T extends ICommonCellInfo> extends Themable {
 						background-color: var(--vscode-editor-findMatchBackground);
 					}
 				</style>
-				<style id="vscode-tokenization-styles" nonce="${this.nonce}">${getTokenizationCss()}</style>
 			</head>
 			<body style="overflow: hidden;">
 				<div id='findStart' tabIndex=-1></div>
diff --git a/src/vs/workbench/contrib/notebook/browser/view/renderers/webviewPreloads.ts b/src/vs/workbench/contrib/notebook/browser/view/renderers/webviewPreloads.ts
@@ -58,6 +58,7 @@ interface EmitterLike<T> {
 interface PreloadStyles {
 	readonly outputNodePadding: number;
 	readonly outputNodeLeftPadding: number;
+	readonly tokenizationCss: string;
 }
 
 export interface PreloadOptions {
@@ -98,7 +99,9 @@ async function webviewPreloads(ctx: PreloadContext) {
 	const vscode = acquireVsCodeApi();
 	delete (globalThis as any).acquireVsCodeApi;
 
-	const tokenizationStyleElement = document.querySelector('style#vscode-tokenization-styles');
+	const tokenizationStyle = new CSSStyleSheet();
+	tokenizationStyle.replaceSync(ctx.style.tokenizationCss);
+
 	const runWhenIdle: (callback: (idle: IdleDeadline) => void, timeout?: number) => IDisposable = (typeof requestIdleCallback !== 'function' || typeof cancelIdleCallback !== 'function')
 		? (runner) => {
 			setTimeout(() => {
@@ -1441,9 +1444,7 @@ async function webviewPreloads(ctx: PreloadContext) {
 				break;
 			}
 			case 'tokenizedStylesChanged': {
-				if (tokenizationStyleElement) {
-					tokenizationStyleElement.textContent = event.data.css;
-				}
+				tokenizationStyle.replaceSync(event.data.css);
 				break;
 			}
 			case 'find': {
@@ -2059,8 +2060,11 @@ async function webviewPreloads(ctx: PreloadContext) {
 			}
 			const trustedHtml = ttPolicy?.createHTML(html) ?? html;
 			el.innerHTML = trustedHtml as string;
-			if (tokenizationStyleElement) {
-				el.insertAdjacentElement('beforebegin', tokenizationStyleElement.cloneNode(true) as HTMLElement);
+			const root = el.getRootNode();
+			if (root instanceof ShadowRoot) {
+				if (!root.adoptedStyleSheets.includes(tokenizationStyle)) {
+					root.adoptedStyleSheets.push(tokenizationStyle);
+				}
 			}
 		}
 
