fixed css for font family (#15119)

src/vs/editor/common/viewModel/viewModelImpl.ts

@@ -808,7 +808,23 @@ export class ViewModel extends Disposable implements IViewModel {
 
 		const fontInfo = this._configuration.options.get(EditorOption.fontInfo);
 		const colorMap = this._getColorMap();
-		const fontFamily = fontInfo.fontFamily === EDITOR_FONT_DEFAULTS.fontFamily ? fontInfo.fontFamily : `'${fontInfo.fontFamily}', ${EDITOR_FONT_DEFAULTS.fontFamily}`;
+		const hasBadChars = (/[:;\\\/<>]/.test(fontInfo.fontFamily));
+		const useDefaultFontFamily = (hasBadChars || fontInfo.fontFamily === EDITOR_FONT_DEFAULTS.fontFamily);
+		let fontFamily: string;
+		if (useDefaultFontFamily) {
+			fontFamily = EDITOR_FONT_DEFAULTS.fontFamily;
+		} else {
+			fontFamily = fontInfo.fontFamily;
+			fontFamily = fontFamily.replace(/"/g, '\'');
+			const hasQuotesOrIsList = /[,']/.test(fontFamily);
+			if (!hasQuotesOrIsList) {
+				const needsQuotes = /[+ ]/.test(fontFamily);
+				if (needsQuotes) {
+					fontFamily = `'${fontFamily}'`;
+				}
+			}
+			fontFamily = `${fontFamily}, ${EDITOR_FONT_DEFAULTS.fontFamily}`;
+		}
 
 		return {
 			mode: languageId.language,

src/vs/editor/contrib/codelens/codelensController.ts

@@ -98,14 +98,19 @@ export class CodeLensContribution implements IEditorContribution {
 		const fontFamily = this._editor.getOption(EditorOption.codeLensFontFamily);
 		const editorFontInfo = this._editor.getOption(EditorOption.fontInfo);
 
+		const fontFamilyVar = `--codelens-font-family${this._styleClassName}`;
+		const fontFeaturesVar = `--codelens-font-features${this._styleClassName}`;
+
 		let newStyle = `
-		.monaco-editor .codelens-decoration.${this._styleClassName} { line-height: ${codeLensHeight}px; font-size: ${fontSize}px; padding-right: ${Math.round(fontSize * 0.5)}px; font-feature-settings: ${editorFontInfo.fontFeatureSettings} }
+		.monaco-editor .codelens-decoration.${this._styleClassName} { line-height: ${codeLensHeight}px; font-size: ${fontSize}px; padding-right: ${Math.round(fontSize * 0.5)}px; font-feature-settings: var(${fontFeaturesVar}) }
 		.monaco-editor .codelens-decoration.${this._styleClassName} span.codicon { line-height: ${codeLensHeight}px; font-size: ${fontSize}px; }
 		`;
 		if (fontFamily) {
 			newStyle += `.monaco-editor .codelens-decoration.${this._styleClassName} { font-family: ${fontFamily}}`;
 		}
 		this._styleElement.textContent = newStyle;
+		this._editor.getContainerDomNode().style.setProperty(fontFamilyVar, fontFamily ?? 'inherit');
+		this._editor.getContainerDomNode().style.setProperty(fontFeaturesVar, editorFontInfo.fontFeatureSettings);
 
 		//
 		this._editor.changeViewZones(accessor => {

src/vs/workbench/contrib/comments/browser/commentThreadWidget.ts

@@ -950,10 +950,17 @@ export class ReviewZoneWidget extends ZoneWidget implements ICommentThreadWidget
 		}
 
 		const fontInfo = this.editor.getOption(EditorOption.fontInfo);
+		const fontFamilyVar = '--comment-thread-editor-font-family';
+		const fontSizeVar = '--comment-thread-editor-font-size';
+		const fontWeightVar = '--comment-thread-editor-font-weight';
+		this.container?.style.setProperty(fontFamilyVar, fontInfo.fontFamily);
+		this.container?.style.setProperty(fontSizeVar, `${fontInfo.fontSize}px`);
+		this.container?.style.setProperty(fontWeightVar, fontInfo.fontWeight);
+
 		content.push(`.monaco-editor .review-widget .body code {
-			font-family: ${fontInfo.fontFamily};
+			font-family: var(${fontFamilyVar});
-			font-size: ${fontInfo.fontSize}px;
+			font-weight: var(${fontWeightVar});
-			font-weight: ${fontInfo.fontWeight};
+			font-size: var(${fontSizeVar});
 		}`);
 
 		this._styleElement.textContent = content.join('\n');

src/vs/workbench/contrib/debug/browser/media/repl.css

@@ -17,6 +17,16 @@
 	white-space: pre;
 }
 
+.monaco-workbench .repl .repl-tree .monaco-tl-contents .expression {
+	font-family: var(--vscode-repl-font-family);
+	font-size: var(--vscode-repl-font-size);
+	line-height: var(--vscode-repl-line-height);
+}
+
+.monaco-workbench .repl .repl-tree .monaco-tl-twistie {
+	background-position-y: calc(100% - (var(--vscode-repl-font-size-for-twistie)));
+}
+
 .monaco-workbench .repl .repl-tree.word-wrap .monaco-tl-contents {
 	/* Wrap words but also do not trim whitespace #6275 */
 	word-wrap: break-word;

src/vs/workbench/contrib/debug/browser/repl.ts

@@ -319,19 +319,6 @@ export class Repl extends ViewPane implements IHistoryNavigationWidget {
 
 			// Set the font size, font family, line height and align the twistie to be centered, and input theme color
 			this.styleElement.textContent = `
-				.repl .repl-tree .expression {
-					font-size: ${fontSize}px;
-					font-family: ${fontFamily};
-				}
-
-				.repl .repl-tree .expression {
-					line-height: ${lineHeight};
-				}
-
-				.repl .repl-tree .monaco-tl-twistie {
-					background-position-y: calc(100% - ${fontSize * 1.4 / 2 - 8}px);
-				}
-
 				.repl .repl-input-wrapper .repl-input-chevron {
 					line-height: ${replInputLineHeight}px
 				}
@@ -340,6 +327,10 @@ export class Repl extends ViewPane implements IHistoryNavigationWidget {
 					background-color: ${backgroundColor};
 				}
 			`;
+			this.container.style.setProperty(`--vscode-repl-font-family`, fontFamily);
+			this.container.style.setProperty(`--vscode-repl-font-size`, `${fontSize}px`);
+			this.container.style.setProperty(`--vscode-repl-font-size-for-twistie`, `${fontSize * 1.4 / 2 - 8}px`);
+			this.container.style.setProperty(`--vscode-repl-line-height`, lineHeight);
 
 			this.tree.rerender();
 

src/vs/workbench/contrib/notebook/browser/view/renderers/cellRenderer.ts

@@ -18,7 +18,7 @@ import { deepClone } from 'vs/base/common/objects';
 import * as platform from 'vs/base/common/platform';
 import { ICodeEditor } from 'vs/editor/browser/editorBrowser';
 import { CodeEditorWidget } from 'vs/editor/browser/widget/codeEditorWidget';
-import { EditorOption, EDITOR_FONT_DEFAULTS, IEditorOptions } from 'vs/editor/common/config/editorOptions';
+import { EditorOption, IEditorOptions } from 'vs/editor/common/config/editorOptions';
 import { BareFontInfo } from 'vs/editor/common/config/fontInfo';
 import { Range } from 'vs/editor/common/core/range';
 import { EditorContextKeys } from 'vs/editor/common/editorContextKeys';
@@ -579,20 +579,29 @@ class EditorTextRenderer {
 
 		const colorMap = this.getDefaultColorMap();
 		const fontInfo = editor.getOptions().get(EditorOption.fontInfo);
-		const fontFamily = fontInfo.fontFamily === EDITOR_FONT_DEFAULTS.fontFamily ? fontInfo.fontFamily : `'${fontInfo.fontFamily}', ${EDITOR_FONT_DEFAULTS.fontFamily}`;
+
+		const fontFamilyVar = '--notebook-editor-font-family';
+		const fontSizeVar = '--notebook-editor-font-size';
+		const fontWeightVar = '--notebook-editor-font-weight';
 
 
 		const style = ``
 			+ `color: ${colorMap[modes.ColorId.DefaultForeground]};`
 			+ `background-color: ${colorMap[modes.ColorId.DefaultBackground]};`
-			+ `font-family: ${fontFamily};`
+			+ `font-family: var(${fontFamilyVar});`
-			+ `font-weight: ${fontInfo.fontWeight};`
+			+ `font-weight: var(${fontWeightVar});`
-			+ `font-size: ${fontInfo.fontSize}px;`
+			+ `font-size: var(${fontSizeVar});`
 			+ `line-height: ${fontInfo.lineHeight}px;`
 			+ `white-space: pre;`;
 
 		const element = DOM.$('div', { style });
 
+		const fontSize = fontInfo.fontSize;
+		const fontWeight = fontInfo.fontWeight;
+		element.style.setProperty(fontFamilyVar, fontInfo.fontFamily);
+		element.style.setProperty(fontSizeVar, `${fontSize}px`);
+		element.style.setProperty(fontWeightVar, fontWeight);
+
 		const linesHtml = this.getRichTextLinesAsHtml(model, modelRange, colorMap);
 		element.innerHTML = linesHtml as unknown as string;
 		return element;