Move into monaco-css folder

monaco-css/src/css.worker.ts

@@ -0,0 +1,14 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import * as worker from 'monaco-editor-core/esm/vs/editor/editor.worker';
+import { CSSWorker } from './cssWorker';
+
+self.onmessage = () => {
+	// ignore the first message
+	worker.initialize((ctx, createData) => {
+		return new CSSWorker(ctx, createData);
+	});
+};

monaco-css/src/cssMode.ts

@@ -0,0 +1,122 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { WorkerManager } from './workerManager';
+import type { CSSWorker } from './cssWorker';
+import { LanguageServiceDefaults } from './monaco.contribution';
+import * as languageFeatures from './languageFeatures';
+import { Uri, IDisposable, languages } from './fillers/monaco-editor-core';
+
+export function setupMode(defaults: LanguageServiceDefaults): IDisposable {
+	const disposables: IDisposable[] = [];
+	const providers: IDisposable[] = [];
+
+	const client = new WorkerManager(defaults);
+	disposables.push(client);
+
+	const worker: languageFeatures.WorkerAccessor = (...uris: Uri[]): Promise<CSSWorker> => {
+		return client.getLanguageServiceWorker(...uris);
+	};
+
+	function registerProviders(): void {
+		const { languageId, modeConfiguration } = defaults;
+
+		disposeAll(providers);
+
+		if (modeConfiguration.completionItems) {
+			providers.push(
+				languages.registerCompletionItemProvider(
+					languageId,
+					new languageFeatures.CompletionAdapter(worker)
+				)
+			);
+		}
+		if (modeConfiguration.hovers) {
+			providers.push(
+				languages.registerHoverProvider(languageId, new languageFeatures.HoverAdapter(worker))
+			);
+		}
+		if (modeConfiguration.documentHighlights) {
+			providers.push(
+				languages.registerDocumentHighlightProvider(
+					languageId,
+					new languageFeatures.DocumentHighlightAdapter(worker)
+				)
+			);
+		}
+		if (modeConfiguration.definitions) {
+			providers.push(
+				languages.registerDefinitionProvider(
+					languageId,
+					new languageFeatures.DefinitionAdapter(worker)
+				)
+			);
+		}
+		if (modeConfiguration.references) {
+			providers.push(
+				languages.registerReferenceProvider(
+					languageId,
+					new languageFeatures.ReferenceAdapter(worker)
+				)
+			);
+		}
+		if (modeConfiguration.documentSymbols) {
+			providers.push(
+				languages.registerDocumentSymbolProvider(
+					languageId,
+					new languageFeatures.DocumentSymbolAdapter(worker)
+				)
+			);
+		}
+		if (modeConfiguration.rename) {
+			providers.push(
+				languages.registerRenameProvider(languageId, new languageFeatures.RenameAdapter(worker))
+			);
+		}
+		if (modeConfiguration.colors) {
+			providers.push(
+				languages.registerColorProvider(
+					languageId,
+					new languageFeatures.DocumentColorAdapter(worker)
+				)
+			);
+		}
+		if (modeConfiguration.foldingRanges) {
+			providers.push(
+				languages.registerFoldingRangeProvider(
+					languageId,
+					new languageFeatures.FoldingRangeAdapter(worker)
+				)
+			);
+		}
+		if (modeConfiguration.diagnostics) {
+			providers.push(new languageFeatures.DiagnosticsAdapter(languageId, worker, defaults));
+		}
+		if (modeConfiguration.selectionRanges) {
+			providers.push(
+				languages.registerSelectionRangeProvider(
+					languageId,
+					new languageFeatures.SelectionRangeAdapter(worker)
+				)
+			);
+		}
+	}
+
+	registerProviders();
+
+	disposables.push(asDisposable(providers));
+
+	return asDisposable(disposables);
+}
+
+function asDisposable(disposables: IDisposable[]): IDisposable {
+	return { dispose: () => disposeAll(disposables) };
+}
+
+function disposeAll(disposables: IDisposable[]) {
+	while (disposables.length) {
+		disposables.pop().dispose();
+	}
+}

monaco-css/src/cssWorker.ts

@@ -0,0 +1,181 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import type { worker } from './fillers/monaco-editor-core';
+import * as cssService from 'vscode-css-languageservice';
+import { Options } from './monaco.contribution';
+
+export class CSSWorker {
+	// --- model sync -----------------------
+
+	private _ctx: worker.IWorkerContext;
+	private _languageService: cssService.LanguageService;
+	private _languageSettings: cssService.LanguageSettings;
+	private _languageId: string;
+
+	constructor(ctx: worker.IWorkerContext, createData: ICreateData) {
+		this._ctx = ctx;
+		this._languageSettings = createData.options;
+		this._languageId = createData.languageId;
+
+		const data = createData.options.data;
+
+		const useDefaultDataProvider = data?.useDefaultDataProvider;
+		const customDataProviders: cssService.ICSSDataProvider[] = [];
+		if (data?.dataProviders) {
+			for (const id in data.dataProviders) {
+				customDataProviders.push(cssService.newCSSDataProvider(data.dataProviders[id]));
+			}
+		}
+		const lsOptions: cssService.LanguageServiceOptions = { customDataProviders, useDefaultDataProvider };
+
+		switch (this._languageId) {
+			case 'css':
+				this._languageService = cssService.getCSSLanguageService(lsOptions);
+				break;
+			case 'less':
+				this._languageService = cssService.getLESSLanguageService(lsOptions);
+				break;
+			case 'scss':
+				this._languageService = cssService.getSCSSLanguageService(lsOptions);
+				break;
+			default:
+				throw new Error('Invalid language id: ' + this._languageId);
+		}
+		this._languageService.configure(this._languageSettings);
+	}
+
+	// --- language service host ---------------
+
+	async doValidation(uri: string): Promise<cssService.Diagnostic[]> {
+		let document = this._getTextDocument(uri);
+		if (document) {
+			let stylesheet = this._languageService.parseStylesheet(document);
+			let diagnostics = this._languageService.doValidation(document, stylesheet);
+			return Promise.resolve(diagnostics);
+		}
+		return Promise.resolve([]);
+	}
+	async doComplete(uri: string, position: cssService.Position): Promise<cssService.CompletionList> {
+		let document = this._getTextDocument(uri);
+		let stylesheet = this._languageService.parseStylesheet(document);
+		let completions = this._languageService.doComplete(document, position, stylesheet);
+		return Promise.resolve(completions);
+	}
+	async doHover(uri: string, position: cssService.Position): Promise<cssService.Hover> {
+		let document = this._getTextDocument(uri);
+		let stylesheet = this._languageService.parseStylesheet(document);
+		let hover = this._languageService.doHover(document, position, stylesheet);
+		return Promise.resolve(hover);
+	}
+	async findDefinition(uri: string, position: cssService.Position): Promise<cssService.Location> {
+		let document = this._getTextDocument(uri);
+		let stylesheet = this._languageService.parseStylesheet(document);
+		let definition = this._languageService.findDefinition(document, position, stylesheet);
+		return Promise.resolve(definition);
+	}
+	async findReferences(uri: string, position: cssService.Position): Promise<cssService.Location[]> {
+		let document = this._getTextDocument(uri);
+		let stylesheet = this._languageService.parseStylesheet(document);
+		let references = this._languageService.findReferences(document, position, stylesheet);
+		return Promise.resolve(references);
+	}
+	async findDocumentHighlights(
+		uri: string,
+		position: cssService.Position
+	): Promise<cssService.DocumentHighlight[]> {
+		let document = this._getTextDocument(uri);
+		let stylesheet = this._languageService.parseStylesheet(document);
+		let highlights = this._languageService.findDocumentHighlights(document, position, stylesheet);
+		return Promise.resolve(highlights);
+	}
+	async findDocumentSymbols(uri: string): Promise<cssService.SymbolInformation[]> {
+		let document = this._getTextDocument(uri);
+		let stylesheet = this._languageService.parseStylesheet(document);
+		let symbols = this._languageService.findDocumentSymbols(document, stylesheet);
+		return Promise.resolve(symbols);
+	}
+	async doCodeActions(
+		uri: string,
+		range: cssService.Range,
+		context: cssService.CodeActionContext
+	): Promise<cssService.Command[]> {
+		let document = this._getTextDocument(uri);
+		let stylesheet = this._languageService.parseStylesheet(document);
+		let actions = this._languageService.doCodeActions(document, range, context, stylesheet);
+		return Promise.resolve(actions);
+	}
+	async findDocumentColors(uri: string): Promise<cssService.ColorInformation[]> {
+		let document = this._getTextDocument(uri);
+		let stylesheet = this._languageService.parseStylesheet(document);
+		let colorSymbols = this._languageService.findDocumentColors(document, stylesheet);
+		return Promise.resolve(colorSymbols);
+	}
+	async getColorPresentations(
+		uri: string,
+		color: cssService.Color,
+		range: cssService.Range
+	): Promise<cssService.ColorPresentation[]> {
+		let document = this._getTextDocument(uri);
+		let stylesheet = this._languageService.parseStylesheet(document);
+		let colorPresentations = this._languageService.getColorPresentations(
+			document,
+			stylesheet,
+			color,
+			range
+		);
+		return Promise.resolve(colorPresentations);
+	}
+	async getFoldingRanges(
+		uri: string,
+		context?: { rangeLimit?: number }
+	): Promise<cssService.FoldingRange[]> {
+		let document = this._getTextDocument(uri);
+		let ranges = this._languageService.getFoldingRanges(document, context);
+		return Promise.resolve(ranges);
+	}
+	async getSelectionRanges(
+		uri: string,
+		positions: cssService.Position[]
+	): Promise<cssService.SelectionRange[]> {
+		let document = this._getTextDocument(uri);
+		let stylesheet = this._languageService.parseStylesheet(document);
+		let ranges = this._languageService.getSelectionRanges(document, positions, stylesheet);
+		return Promise.resolve(ranges);
+	}
+	async doRename(
+		uri: string,
+		position: cssService.Position,
+		newName: string
+	): Promise<cssService.WorkspaceEdit> {
+		let document = this._getTextDocument(uri);
+		let stylesheet = this._languageService.parseStylesheet(document);
+		let renames = this._languageService.doRename(document, position, newName, stylesheet);
+		return Promise.resolve(renames);
+	}
+	private _getTextDocument(uri: string): cssService.TextDocument {
+		let models = this._ctx.getMirrorModels();
+		for (let model of models) {
+			if (model.uri.toString() === uri) {
+				return cssService.TextDocument.create(
+					uri,
+					this._languageId,
+					model.version,
+					model.getValue()
+				);
+			}
+		}
+		return null;
+	}
+}
+
+export interface ICreateData {
+	languageId: string;
+	options: Options
+}
+
+export function create(ctx: worker.IWorkerContext, createData: ICreateData): CSSWorker {
+	return new CSSWorker(ctx, createData);
+}

monaco-css/src/fillers/monaco-editor-core-amd.ts

@@ -0,0 +1,12 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+// Resolves with the global monaco API
+
+declare var define;
+
+define([], function () {
+	return (<any>self).monaco;
+});

monaco-css/src/fillers/monaco-editor-core.ts

@@ -0,0 +1,6 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+export * from 'monaco-editor-core';

monaco-css/src/fillers/vscode-nls.ts

@@ -0,0 +1,46 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+export interface Options {
+	locale?: string;
+	cacheLanguageResolution?: boolean;
+}
+export interface LocalizeInfo {
+	key: string;
+	comment: string[];
+}
+export interface LocalizeFunc {
+	(info: LocalizeInfo, message: string, ...args: any[]): string;
+	(key: string, message: string, ...args: any[]): string;
+}
+export interface LoadFunc {
+	(file?: string): LocalizeFunc;
+}
+
+function format(message: string, args: any[]): string {
+	let result: string;
+
+	if (args.length === 0) {
+		result = message;
+	} else {
+		result = message.replace(/\{(\d+)\}/g, (match, rest) => {
+			let index = rest[0];
+			return typeof args[index] !== 'undefined' ? args[index] : match;
+		});
+	}
+	return result;
+}
+
+function localize(key: string | LocalizeInfo, message: string, ...args: any[]): string {
+	return format(message, args);
+}
+
+export function loadMessageBundle(file?: string): LocalizeFunc {
+	return localize;
+}
+
+export function config(opt?: Options | string): LoadFunc {
+	return loadMessageBundle;
+}

monaco-css/src/languageFeatures.ts

@@ -0,0 +1,725 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { LanguageServiceDefaults } from './monaco.contribution';
+import type { CSSWorker } from './cssWorker';
+import * as cssService from 'vscode-css-languageservice';
+import {
+	languages,
+	editor,
+	IMarkdownString,
+	Uri,
+	Position,
+	IRange,
+	Range,
+	CancellationToken,
+	IDisposable,
+	MarkerSeverity
+} from './fillers/monaco-editor-core';
+import { TextEdit } from 'vscode-css-languageservice';
+import { InsertReplaceEdit } from 'vscode-languageserver-types';
+
+export interface WorkerAccessor {
+	(first: Uri, ...more: Uri[]): Promise<CSSWorker>;
+}
+
+// --- diagnostics --- ---
+
+export class DiagnosticsAdapter {
+	private _disposables: IDisposable[] = [];
+	private _listener: { [uri: string]: IDisposable } = Object.create(null);
+
+	constructor(
+		private _languageId: string,
+		private _worker: WorkerAccessor,
+		defaults: LanguageServiceDefaults
+	) {
+		const onModelAdd = (model: editor.IModel): void => {
+			let modeId = model.getLanguageId();
+			if (modeId !== this._languageId) {
+				return;
+			}
+
+			let handle: number;
+			this._listener[model.uri.toString()] = model.onDidChangeContent(() => {
+				window.clearTimeout(handle);
+				handle = window.setTimeout(() => this._doValidate(model.uri, modeId), 500);
+			});
+
+			this._doValidate(model.uri, modeId);
+		};
+
+		const onModelRemoved = (model: editor.IModel): void => {
+			editor.setModelMarkers(model, this._languageId, []);
+
+			let uriStr = model.uri.toString();
+			let listener = this._listener[uriStr];
+			if (listener) {
+				listener.dispose();
+				delete this._listener[uriStr];
+			}
+		};
+
+		this._disposables.push(editor.onDidCreateModel(onModelAdd));
+		this._disposables.push(editor.onWillDisposeModel(onModelRemoved));
+		this._disposables.push(
+			editor.onDidChangeModelLanguage((event) => {
+				onModelRemoved(event.model);
+				onModelAdd(event.model);
+			})
+		);
+
+		defaults.onDidChange((_) => {
+			editor.getModels().forEach((model) => {
+				if (model.getLanguageId() === this._languageId) {
+					onModelRemoved(model);
+					onModelAdd(model);
+				}
+			});
+		});
+
+		this._disposables.push({
+			dispose: () => {
+				for (let key in this._listener) {
+					this._listener[key].dispose();
+				}
+			}
+		});
+
+		editor.getModels().forEach(onModelAdd);
+	}
+
+	public dispose(): void {
+		this._disposables.forEach((d) => d && d.dispose());
+		this._disposables = [];
+	}
+
+	private _doValidate(resource: Uri, languageId: string): void {
+		this._worker(resource)
+			.then((worker) => {
+				return worker.doValidation(resource.toString());
+			})
+			.then((diagnostics) => {
+				const markers = diagnostics.map((d) => toDiagnostics(resource, d));
+				let model = editor.getModel(resource);
+				if (model && model.getLanguageId() === languageId) {
+					editor.setModelMarkers(model, languageId, markers);
+				}
+			})
+			.then(undefined, (err) => {
+				console.error(err);
+			});
+	}
+}
+
+function toSeverity(lsSeverity: number): MarkerSeverity {
+	switch (lsSeverity) {
+		case cssService.DiagnosticSeverity.Error:
+			return MarkerSeverity.Error;
+		case cssService.DiagnosticSeverity.Warning:
+			return MarkerSeverity.Warning;
+		case cssService.DiagnosticSeverity.Information:
+			return MarkerSeverity.Info;
+		case cssService.DiagnosticSeverity.Hint:
+			return MarkerSeverity.Hint;
+		default:
+			return MarkerSeverity.Info;
+	}
+}
+
+function toDiagnostics(resource: Uri, diag: cssService.Diagnostic): editor.IMarkerData {
+	let code = typeof diag.code === 'number' ? String(diag.code) : <string>diag.code;
+
+	return {
+		severity: toSeverity(diag.severity),
+		startLineNumber: diag.range.start.line + 1,
+		startColumn: diag.range.start.character + 1,
+		endLineNumber: diag.range.end.line + 1,
+		endColumn: diag.range.end.character + 1,
+		message: diag.message,
+		code: code,
+		source: diag.source
+	};
+}
+
+// --- completion ------
+
+function fromPosition(position: Position): cssService.Position {
+	if (!position) {
+		return void 0;
+	}
+	return { character: position.column - 1, line: position.lineNumber - 1 };
+}
+
+function fromRange(range: IRange): cssService.Range {
+	if (!range) {
+		return void 0;
+	}
+	return {
+		start: {
+			line: range.startLineNumber - 1,
+			character: range.startColumn - 1
+		},
+		end: { line: range.endLineNumber - 1, character: range.endColumn - 1 }
+	};
+}
+
+function toRange(range: cssService.Range): Range {
+	if (!range) {
+		return void 0;
+	}
+	return new Range(
+		range.start.line + 1,
+		range.start.character + 1,
+		range.end.line + 1,
+		range.end.character + 1
+	);
+}
+
+function isInsertReplaceEdit(edit: TextEdit | InsertReplaceEdit): edit is InsertReplaceEdit {
+	return (
+		typeof (<InsertReplaceEdit>edit).insert !== 'undefined' &&
+		typeof (<InsertReplaceEdit>edit).replace !== 'undefined'
+	);
+}
+
+function toCompletionItemKind(kind: number): languages.CompletionItemKind {
+	let mItemKind = languages.CompletionItemKind;
+
+	switch (kind) {
+		case cssService.CompletionItemKind.Text:
+			return mItemKind.Text;
+		case cssService.CompletionItemKind.Method:
+			return mItemKind.Method;
+		case cssService.CompletionItemKind.Function:
+			return mItemKind.Function;
+		case cssService.CompletionItemKind.Constructor:
+			return mItemKind.Constructor;
+		case cssService.CompletionItemKind.Field:
+			return mItemKind.Field;
+		case cssService.CompletionItemKind.Variable:
+			return mItemKind.Variable;
+		case cssService.CompletionItemKind.Class:
+			return mItemKind.Class;
+		case cssService.CompletionItemKind.Interface:
+			return mItemKind.Interface;
+		case cssService.CompletionItemKind.Module:
+			return mItemKind.Module;
+		case cssService.CompletionItemKind.Property:
+			return mItemKind.Property;
+		case cssService.CompletionItemKind.Unit:
+			return mItemKind.Unit;
+		case cssService.CompletionItemKind.Value:
+			return mItemKind.Value;
+		case cssService.CompletionItemKind.Enum:
+			return mItemKind.Enum;
+		case cssService.CompletionItemKind.Keyword:
+			return mItemKind.Keyword;
+		case cssService.CompletionItemKind.Snippet:
+			return mItemKind.Snippet;
+		case cssService.CompletionItemKind.Color:
+			return mItemKind.Color;
+		case cssService.CompletionItemKind.File:
+			return mItemKind.File;
+		case cssService.CompletionItemKind.Reference:
+			return mItemKind.Reference;
+	}
+	return mItemKind.Property;
+}
+
+function toTextEdit(textEdit: cssService.TextEdit): editor.ISingleEditOperation {
+	if (!textEdit) {
+		return void 0;
+	}
+	return {
+		range: toRange(textEdit.range),
+		text: textEdit.newText
+	};
+}
+
+function toCommand(c: cssService.Command | undefined): languages.Command {
+	return c && c.command === 'editor.action.triggerSuggest' ? { id: c.command, title: c.title, arguments: c.arguments } : undefined
+}
+
+export class CompletionAdapter implements languages.CompletionItemProvider {
+	constructor(private _worker: WorkerAccessor) {}
+
+	public get triggerCharacters(): string[] {
+		return ['/', '-', ':'];
+	}
+
+	provideCompletionItems(
+		model: editor.IReadOnlyModel,
+		position: Position,
+		context: languages.CompletionContext,
+		token: CancellationToken
+	): Promise<languages.CompletionList> {
+		const resource = model.uri;
+
+		return this._worker(resource)
+			.then((worker) => {
+				return worker.doComplete(resource.toString(), fromPosition(position));
+			})
+			.then((info) => {
+				if (!info) {
+					return;
+				}
+				const wordInfo = model.getWordUntilPosition(position);
+				const wordRange = new Range(
+					position.lineNumber,
+					wordInfo.startColumn,
+					position.lineNumber,
+					wordInfo.endColumn
+				);
+
+				let items: languages.CompletionItem[] = info.items.map((entry) => {
+					let item: languages.CompletionItem = {
+						label: entry.label,
+						insertText: entry.insertText || entry.label,
+						sortText: entry.sortText,
+						filterText: entry.filterText,
+						documentation: entry.documentation,
+						detail: entry.detail,
+						command: toCommand(entry.command),
+						range: wordRange,
+						kind: toCompletionItemKind(entry.kind)
+					};
+					if (entry.textEdit) {
+						if (isInsertReplaceEdit(entry.textEdit)) {
+							item.range = {
+								insert: toRange(entry.textEdit.insert),
+								replace: toRange(entry.textEdit.replace)
+							};
+						} else {
+							item.range = toRange(entry.textEdit.range);
+						}
+						item.insertText = entry.textEdit.newText;
+					}
+					if (entry.additionalTextEdits) {
+						item.additionalTextEdits = entry.additionalTextEdits.map(toTextEdit);
+					}
+					if (entry.insertTextFormat === cssService.InsertTextFormat.Snippet) {
+						item.insertTextRules = languages.CompletionItemInsertTextRule.InsertAsSnippet;
+					}
+					return item;
+				});
+
+				return {
+					isIncomplete: info.isIncomplete,
+					suggestions: items
+				};
+			});
+	}
+}
+
+function isMarkupContent(thing: any): thing is cssService.MarkupContent {
+	return (
+		thing && typeof thing === 'object' && typeof (<cssService.MarkupContent>thing).kind === 'string'
+	);
+}
+
+function toMarkdownString(
+	entry: cssService.MarkupContent | cssService.MarkedString
+): IMarkdownString {
+	if (typeof entry === 'string') {
+		return {
+			value: entry
+		};
+	}
+	if (isMarkupContent(entry)) {
+		if (entry.kind === 'plaintext') {
+			return {
+				value: entry.value.replace(/[\\`*_{}[\]()#+\-.!]/g, '\\$&')
+			};
+		}
+		return {
+			value: entry.value
+		};
+	}
+
+	return { value: '```' + entry.language + '\n' + entry.value + '\n```\n' };
+}
+
+function toMarkedStringArray(
+	contents: cssService.MarkupContent | cssService.MarkedString | cssService.MarkedString[]
+): IMarkdownString[] {
+	if (!contents) {
+		return void 0;
+	}
+	if (Array.isArray(contents)) {
+		return contents.map(toMarkdownString);
+	}
+	return [toMarkdownString(contents)];
+}
+
+// --- hover ------
+
+export class HoverAdapter implements languages.HoverProvider {
+	constructor(private _worker: WorkerAccessor) {}
+
+	provideHover(
+		model: editor.IReadOnlyModel,
+		position: Position,
+		token: CancellationToken
+	): Promise<languages.Hover> {
+		let resource = model.uri;
+
+		return this._worker(resource)
+			.then((worker) => {
+				return worker.doHover(resource.toString(), fromPosition(position));
+			})
+			.then((info) => {
+				if (!info) {
+					return;
+				}
+				return <languages.Hover>{
+					range: toRange(info.range),
+					contents: toMarkedStringArray(info.contents)
+				};
+			});
+	}
+}
+
+// --- document highlights ------
+
+function toDocumentHighlightKind(kind: number): languages.DocumentHighlightKind {
+	switch (kind) {
+		case cssService.DocumentHighlightKind.Read:
+			return languages.DocumentHighlightKind.Read;
+		case cssService.DocumentHighlightKind.Write:
+			return languages.DocumentHighlightKind.Write;
+		case cssService.DocumentHighlightKind.Text:
+			return languages.DocumentHighlightKind.Text;
+	}
+	return languages.DocumentHighlightKind.Text;
+}
+
+export class DocumentHighlightAdapter implements languages.DocumentHighlightProvider {
+	constructor(private _worker: WorkerAccessor) {}
+
+	public provideDocumentHighlights(
+		model: editor.IReadOnlyModel,
+		position: Position,
+		token: CancellationToken
+	): Promise<languages.DocumentHighlight[]> {
+		const resource = model.uri;
+
+		return this._worker(resource)
+			.then((worker) => {
+				return worker.findDocumentHighlights(resource.toString(), fromPosition(position));
+			})
+			.then((entries) => {
+				if (!entries) {
+					return;
+				}
+				return entries.map((entry) => {
+					return <languages.DocumentHighlight>{
+						range: toRange(entry.range),
+						kind: toDocumentHighlightKind(entry.kind)
+					};
+				});
+			});
+	}
+}
+
+// --- definition ------
+
+function toLocation(location: cssService.Location): languages.Location {
+	return {
+		uri: Uri.parse(location.uri),
+		range: toRange(location.range)
+	};
+}
+
+export class DefinitionAdapter {
+	constructor(private _worker: WorkerAccessor) {}
+
+	public provideDefinition(
+		model: editor.IReadOnlyModel,
+		position: Position,
+		token: CancellationToken
+	): Promise<languages.Definition> {
+		const resource = model.uri;
+
+		return this._worker(resource)
+			.then((worker) => {
+				return worker.findDefinition(resource.toString(), fromPosition(position));
+			})
+			.then((definition) => {
+				if (!definition) {
+					return;
+				}
+				return [toLocation(definition)];
+			});
+	}
+}
+
+// --- references ------
+
+export class ReferenceAdapter implements languages.ReferenceProvider {
+	constructor(private _worker: WorkerAccessor) {}
+
+	provideReferences(
+		model: editor.IReadOnlyModel,
+		position: Position,
+		context: languages.ReferenceContext,
+		token: CancellationToken
+	): Promise<languages.Location[]> {
+		const resource = model.uri;
+
+		return this._worker(resource)
+			.then((worker) => {
+				return worker.findReferences(resource.toString(), fromPosition(position));
+			})
+			.then((entries) => {
+				if (!entries) {
+					return;
+				}
+				return entries.map(toLocation);
+			});
+	}
+}
+
+// --- rename ------
+
+function toWorkspaceEdit(edit: cssService.WorkspaceEdit): languages.WorkspaceEdit {
+	if (!edit || !edit.changes) {
+		return void 0;
+	}
+	let resourceEdits: languages.WorkspaceTextEdit[] = [];
+	for (let uri in edit.changes) {
+		const _uri = Uri.parse(uri);
+		// let edits: languages.TextEdit[] = [];
+		for (let e of edit.changes[uri]) {
+			resourceEdits.push({
+				resource: _uri,
+				edit: {
+					range: toRange(e.range),
+					text: e.newText
+				}
+			});
+		}
+	}
+	return {
+		edits: resourceEdits
+	};
+}
+
+export class RenameAdapter implements languages.RenameProvider {
+	constructor(private _worker: WorkerAccessor) {}
+
+	provideRenameEdits(
+		model: editor.IReadOnlyModel,
+		position: Position,
+		newName: string,
+		token: CancellationToken
+	): Promise<languages.WorkspaceEdit> {
+		const resource = model.uri;
+
+		return this._worker(resource)
+			.then((worker) => {
+				return worker.doRename(resource.toString(), fromPosition(position), newName);
+			})
+			.then((edit) => {
+				return toWorkspaceEdit(edit);
+			});
+	}
+}
+
+// --- document symbols ------
+
+function toSymbolKind(kind: cssService.SymbolKind): languages.SymbolKind {
+	let mKind = languages.SymbolKind;
+
+	switch (kind) {
+		case cssService.SymbolKind.File:
+			return mKind.Array;
+		case cssService.SymbolKind.Module:
+			return mKind.Module;
+		case cssService.SymbolKind.Namespace:
+			return mKind.Namespace;
+		case cssService.SymbolKind.Package:
+			return mKind.Package;
+		case cssService.SymbolKind.Class:
+			return mKind.Class;
+		case cssService.SymbolKind.Method:
+			return mKind.Method;
+		case cssService.SymbolKind.Property:
+			return mKind.Property;
+		case cssService.SymbolKind.Field:
+			return mKind.Field;
+		case cssService.SymbolKind.Constructor:
+			return mKind.Constructor;
+		case cssService.SymbolKind.Enum:
+			return mKind.Enum;
+		case cssService.SymbolKind.Interface:
+			return mKind.Interface;
+		case cssService.SymbolKind.Function:
+			return mKind.Function;
+		case cssService.SymbolKind.Variable:
+			return mKind.Variable;
+		case cssService.SymbolKind.Constant:
+			return mKind.Constant;
+		case cssService.SymbolKind.String:
+			return mKind.String;
+		case cssService.SymbolKind.Number:
+			return mKind.Number;
+		case cssService.SymbolKind.Boolean:
+			return mKind.Boolean;
+		case cssService.SymbolKind.Array:
+			return mKind.Array;
+	}
+	return mKind.Function;
+}
+
+export class DocumentSymbolAdapter implements languages.DocumentSymbolProvider {
+	constructor(private _worker: WorkerAccessor) {}
+
+	public provideDocumentSymbols(
+		model: editor.IReadOnlyModel,
+		token: CancellationToken
+	): Promise<languages.DocumentSymbol[]> {
+		const resource = model.uri;
+
+		return this._worker(resource)
+			.then((worker) => worker.findDocumentSymbols(resource.toString()))
+			.then((items) => {
+				if (!items) {
+					return;
+				}
+				return items.map((item) => ({
+					name: item.name,
+					detail: '',
+					containerName: item.containerName,
+					kind: toSymbolKind(item.kind),
+					tags: [],
+					range: toRange(item.location.range),
+					selectionRange: toRange(item.location.range)
+				}));
+			});
+	}
+}
+
+export class DocumentColorAdapter implements languages.DocumentColorProvider {
+	constructor(private _worker: WorkerAccessor) {}
+
+	public provideDocumentColors(
+		model: editor.IReadOnlyModel,
+		token: CancellationToken
+	): Promise<languages.IColorInformation[]> {
+		const resource = model.uri;
+
+		return this._worker(resource)
+			.then((worker) => worker.findDocumentColors(resource.toString()))
+			.then((infos) => {
+				if (!infos) {
+					return;
+				}
+				return infos.map((item) => ({
+					color: item.color,
+					range: toRange(item.range)
+				}));
+			});
+	}
+
+	public provideColorPresentations(
+		model: editor.IReadOnlyModel,
+		info: languages.IColorInformation,
+		token: CancellationToken
+	): Promise<languages.IColorPresentation[]> {
+		const resource = model.uri;
+
+		return this._worker(resource)
+			.then((worker) =>
+				worker.getColorPresentations(resource.toString(), info.color, fromRange(info.range))
+			)
+			.then((presentations) => {
+				if (!presentations) {
+					return;
+				}
+				return presentations.map((presentation) => {
+					let item: languages.IColorPresentation = {
+						label: presentation.label
+					};
+					if (presentation.textEdit) {
+						item.textEdit = toTextEdit(presentation.textEdit);
+					}
+					if (presentation.additionalTextEdits) {
+						item.additionalTextEdits = presentation.additionalTextEdits.map(toTextEdit);
+					}
+					return item;
+				});
+			});
+	}
+}
+
+export class FoldingRangeAdapter implements languages.FoldingRangeProvider {
+	constructor(private _worker: WorkerAccessor) {}
+
+	public provideFoldingRanges(
+		model: editor.IReadOnlyModel,
+		context: languages.FoldingContext,
+		token: CancellationToken
+	): Promise<languages.FoldingRange[]> {
+		const resource = model.uri;
+
+		return this._worker(resource)
+			.then((worker) => worker.getFoldingRanges(resource.toString(), context))
+			.then((ranges) => {
+				if (!ranges) {
+					return;
+				}
+				return ranges.map((range) => {
+					let result: languages.FoldingRange = {
+						start: range.startLine + 1,
+						end: range.endLine + 1
+					};
+					if (typeof range.kind !== 'undefined') {
+						result.kind = toFoldingRangeKind(<cssService.FoldingRangeKind>range.kind);
+					}
+					return result;
+				});
+			});
+	}
+}
+
+function toFoldingRangeKind(kind: cssService.FoldingRangeKind): languages.FoldingRangeKind {
+	switch (kind) {
+		case cssService.FoldingRangeKind.Comment:
+			return languages.FoldingRangeKind.Comment;
+		case cssService.FoldingRangeKind.Imports:
+			return languages.FoldingRangeKind.Imports;
+		case cssService.FoldingRangeKind.Region:
+			return languages.FoldingRangeKind.Region;
+	}
+}
+
+export class SelectionRangeAdapter implements languages.SelectionRangeProvider {
+	constructor(private _worker: WorkerAccessor) {}
+
+	public provideSelectionRanges(
+		model: editor.IReadOnlyModel,
+		positions: Position[],
+		token: CancellationToken
+	): Promise<languages.SelectionRange[][]> {
+		const resource = model.uri;
+
+		return this._worker(resource)
+			.then((worker) => worker.getSelectionRanges(resource.toString(), positions.map(fromPosition)))
+			.then((selectionRanges) => {
+				if (!selectionRanges) {
+					return;
+				}
+				return selectionRanges.map((selectionRange) => {
+					const result: languages.SelectionRange[] = [];
+					while (selectionRange) {
+						result.push({ range: toRange(selectionRange.range) });
+						selectionRange = selectionRange.parent;
+					}
+					return result;
+				});
+			});
+	}
+}

monaco-css/src/monaco.contribution.ts

@@ -0,0 +1,318 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import * as mode from './cssMode';
+import { languages, Emitter, IEvent } from './fillers/monaco-editor-core';
+
+export interface Options {
+	readonly validate?: boolean;
+	readonly lint?: {
+		readonly compatibleVendorPrefixes?: 'ignore' | 'warning' | 'error';
+		readonly vendorPrefix?: 'ignore' | 'warning' | 'error';
+		readonly duplicateProperties?: 'ignore' | 'warning' | 'error';
+		readonly emptyRules?: 'ignore' | 'warning' | 'error';
+		readonly importStatement?: 'ignore' | 'warning' | 'error';
+		readonly boxModel?: 'ignore' | 'warning' | 'error';
+		readonly universalSelector?: 'ignore' | 'warning' | 'error';
+		readonly zeroUnits?: 'ignore' | 'warning' | 'error';
+		readonly fontFaceProperties?: 'ignore' | 'warning' | 'error';
+		readonly hexColorLength?: 'ignore' | 'warning' | 'error';
+		readonly argumentsInColorFunction?: 'ignore' | 'warning' | 'error';
+		readonly unknownProperties?: 'ignore' | 'warning' | 'error';
+		readonly ieHack?: 'ignore' | 'warning' | 'error';
+		readonly unknownVendorSpecificProperties?: 'ignore' | 'warning' | 'error';
+		readonly propertyIgnoredDueToDisplay?: 'ignore' | 'warning' | 'error';
+		readonly important?: 'ignore' | 'warning' | 'error';
+		readonly float?: 'ignore' | 'warning' | 'error';
+		readonly idSelector?: 'ignore' | 'warning' | 'error';
+	};
+	/**
+	 * Configures the CSS data types known by the langauge service.
+	 */
+	readonly data?: CSSDataConfiguration;
+}
+
+export interface ModeConfiguration {
+	/**
+	 * Defines whether the built-in completionItemProvider is enabled.
+	 */
+	readonly completionItems?: boolean;
+
+	/**
+	 * Defines whether the built-in hoverProvider is enabled.
+	 */
+	readonly hovers?: boolean;
+
+	/**
+	 * Defines whether the built-in documentSymbolProvider is enabled.
+	 */
+	readonly documentSymbols?: boolean;
+
+	/**
+	 * Defines whether the built-in definitions provider is enabled.
+	 */
+	readonly definitions?: boolean;
+
+	/**
+	 * Defines whether the built-in references provider is enabled.
+	 */
+	readonly references?: boolean;
+
+	/**
+	 * Defines whether the built-in references provider is enabled.
+	 */
+	readonly documentHighlights?: boolean;
+
+	/**
+	 * Defines whether the built-in rename provider is enabled.
+	 */
+	readonly rename?: boolean;
+
+	/**
+	 * Defines whether the built-in color provider is enabled.
+	 */
+	readonly colors?: boolean;
+
+	/**
+	 * Defines whether the built-in foldingRange provider is enabled.
+	 */
+	readonly foldingRanges?: boolean;
+
+	/**
+	 * Defines whether the built-in diagnostic provider is enabled.
+	 */
+	readonly diagnostics?: boolean;
+
+	/**
+	 * Defines whether the built-in selection range provider is enabled.
+	 */
+	readonly selectionRanges?: boolean;
+}
+
+export interface LanguageServiceDefaults {
+	readonly languageId: string;
+	readonly onDidChange: IEvent<LanguageServiceDefaults>;
+
+	readonly modeConfiguration: ModeConfiguration;
+	readonly options: Options;
+	setOptions(options: Options): void;
+	setModeConfiguration(modeConfiguration: ModeConfiguration): void;
+
+	/** @deprecated Use options instead */
+	readonly diagnosticsOptions: DiagnosticsOptions;
+	/** @deprecated Use setOptions instead */
+	setDiagnosticsOptions(options: DiagnosticsOptions): void;
+}
+
+/** @deprecated Use Options instead */
+export type DiagnosticsOptions = Options;
+
+// --- CSS configuration and defaults ---------
+
+class LanguageServiceDefaultsImpl implements LanguageServiceDefaults {
+	private _onDidChange = new Emitter<LanguageServiceDefaults>();
+	private _options: Options;
+	private _modeConfiguration: ModeConfiguration;
+	private _languageId: string;
+
+	constructor(
+		languageId: string,
+		options: Options,
+		modeConfiguration: ModeConfiguration
+	) {
+		this._languageId = languageId;
+		this.setOptions(options);
+		this.setModeConfiguration(modeConfiguration);
+	}
+
+	get onDidChange(): IEvent<LanguageServiceDefaults> {
+		return this._onDidChange.event;
+	}
+
+	get languageId(): string {
+		return this._languageId;
+	}
+
+	get modeConfiguration(): ModeConfiguration {
+		return this._modeConfiguration;
+	}
+
+	get diagnosticsOptions(): Options {
+		return this.options;
+	}
+
+	get options(): Options {
+		return this._options;
+	}
+
+	setOptions(options: Options): void {
+		this._options = options || Object.create(null);
+		this._onDidChange.fire(this);
+	}
+
+	setDiagnosticsOptions(options: Options): void {
+		this.setOptions(options);
+	}
+
+	setModeConfiguration(modeConfiguration: ModeConfiguration): void {
+		this._modeConfiguration = modeConfiguration || Object.create(null);
+		this._onDidChange.fire(this);
+	}
+}
+
+const optionsDefault: Required<Options> = {
+	validate: true,
+	lint: {
+		compatibleVendorPrefixes: 'ignore',
+		vendorPrefix: 'warning',
+		duplicateProperties: 'warning',
+		emptyRules: 'warning',
+		importStatement: 'ignore',
+		boxModel: 'ignore',
+		universalSelector: 'ignore',
+		zeroUnits: 'ignore',
+		fontFaceProperties: 'warning',
+		hexColorLength: 'error',
+		argumentsInColorFunction: 'error',
+		unknownProperties: 'warning',
+		ieHack: 'ignore',
+		unknownVendorSpecificProperties: 'ignore',
+		propertyIgnoredDueToDisplay: 'warning',
+		important: 'ignore',
+		float: 'ignore',
+		idSelector: 'ignore'
+	},
+	data: { useDefaultDataProvider: true }
+};
+
+const modeConfigurationDefault: Required<ModeConfiguration> = {
+	completionItems: true,
+	hovers: true,
+	documentSymbols: true,
+	definitions: true,
+	references: true,
+	documentHighlights: true,
+	rename: true,
+	colors: true,
+	foldingRanges: true,
+	diagnostics: true,
+	selectionRanges: true
+};
+
+export const cssDefaults: LanguageServiceDefaults = new LanguageServiceDefaultsImpl(
+	'css',
+	optionsDefault,
+	modeConfigurationDefault
+);
+export const scssDefaults: LanguageServiceDefaults = new LanguageServiceDefaultsImpl(
+	'scss',
+	optionsDefault,
+	modeConfigurationDefault
+);
+export const lessDefaults: LanguageServiceDefaults = new LanguageServiceDefaultsImpl(
+	'less',
+	optionsDefault,
+	modeConfigurationDefault
+);
+
+// export to the global based API
+(<any>languages).css = { cssDefaults, lessDefaults, scssDefaults };
+
+// --- Registration to monaco editor ---
+
+function getMode(): Promise<typeof mode> {
+	return import('./cssMode');
+}
+
+languages.onLanguage('less', () => {
+	getMode().then((mode) => mode.setupMode(lessDefaults));
+});
+
+languages.onLanguage('scss', () => {
+	getMode().then((mode) => mode.setupMode(scssDefaults));
+});
+
+languages.onLanguage('css', () => {
+	getMode().then((mode) => mode.setupMode(cssDefaults));
+});
+
+
+// CSS Data
+
+export interface CSSDataConfiguration {
+	/**
+	 * Defines whether the standard CSS properties, at-directives, pseudoClasses and pseudoElements are shown.
+	 */
+	useDefaultDataProvider?: boolean;
+	/**
+	 * Provides a set of custom data providers.
+	 */
+	dataProviders?: { [providerId: string]: CSSDataV1 };
+}
+
+/**
+ * Custom CSS properties, at-directives, pseudoClasses and pseudoElements
+ * https://github.com/microsoft/vscode-css-languageservice/blob/main/docs/customData.md
+ */
+export interface CSSDataV1 {
+	version: 1 | 1.1;
+	properties?: IPropertyData[];
+	atDirectives?: IAtDirectiveData[];
+	pseudoClasses?: IPseudoClassData[];
+	pseudoElements?: IPseudoElementData[];
+}
+
+export type EntryStatus = 'standard' | 'experimental' | 'nonstandard' | 'obsolete';
+
+export interface IReference {
+	name: string;
+	url: string;
+}
+
+export interface IPropertyData {
+	name: string;
+	description?: string | MarkupContent;
+	browsers?: string[];
+	restrictions?: string[];
+	status?: EntryStatus;
+	syntax?: string;
+	values?: IValueData[];
+	references?: IReference[];
+	relevance?: number;
+}
+export interface IAtDirectiveData {
+	name: string;
+	description?: string | MarkupContent;
+	browsers?: string[];
+	status?: EntryStatus;
+	references?: IReference[];
+}
+export interface IPseudoClassData {
+	name: string;
+	description?: string | MarkupContent;
+	browsers?: string[];
+	status?: EntryStatus;
+	references?: IReference[];
+}
+export interface IPseudoElementData {
+	name: string;
+	description?: string | MarkupContent;
+	browsers?: string[];
+	status?: EntryStatus;
+	references?: IReference[];
+}
+
+export interface IValueData {
+	name: string;
+	description?: string | MarkupContent;
+	browsers?: string[];
+	status?: EntryStatus;
+	references?: IReference[];
+}
+export interface MarkupContent {
+    kind: MarkupKind;
+    value: string;
+}
+export declare type MarkupKind = 'plaintext' | 'markdown';

monaco-css/src/tsconfig.esm.json

@@ -0,0 +1,10 @@
+{
+	"compilerOptions": {
+		"module": "esnext",
+		"moduleResolution": "node",
+		"outDir": "../out/esm",
+		"declaration": true,
+		"target": "es5",
+		"lib": ["dom", "es5", "es2015.collection", "es2015.promise", "es2015.iterable"]
+	}
+}

monaco-css/src/tsconfig.json

@@ -0,0 +1,10 @@
+{
+	"compilerOptions": {
+		"module": "amd",
+		"moduleResolution": "node",
+		"outDir": "../out/amd",
+		"declaration": true,
+		"target": "es5",
+		"lib": ["dom", "es5", "es2015.collection", "es2015.promise", "es2015.iterable"]
+	}
+}

monaco-css/src/workerManager.ts

@@ -0,0 +1,87 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { LanguageServiceDefaults } from './monaco.contribution';
+import type { CSSWorker } from './cssWorker';
+import { editor, IDisposable, Uri } from './fillers/monaco-editor-core';
+
+const STOP_WHEN_IDLE_FOR = 2 * 60 * 1000; // 2min
+
+export class WorkerManager {
+	private _defaults: LanguageServiceDefaults;
+	private _idleCheckInterval: number;
+	private _lastUsedTime: number;
+	private _configChangeListener: IDisposable;
+
+	private _worker: editor.MonacoWebWorker<CSSWorker>;
+	private _client: Promise<CSSWorker>;
+
+	constructor(defaults: LanguageServiceDefaults) {
+		this._defaults = defaults;
+		this._worker = null;
+		this._idleCheckInterval = window.setInterval(() => this._checkIfIdle(), 30 * 1000);
+		this._lastUsedTime = 0;
+		this._configChangeListener = this._defaults.onDidChange(() => this._stopWorker());
+	}
+
+	private _stopWorker(): void {
+		if (this._worker) {
+			this._worker.dispose();
+			this._worker = null;
+		}
+		this._client = null;
+	}
+
+	dispose(): void {
+		clearInterval(this._idleCheckInterval);
+		this._configChangeListener.dispose();
+		this._stopWorker();
+	}
+
+	private _checkIfIdle(): void {
+		if (!this._worker) {
+			return;
+		}
+		let timePassedSinceLastUsed = Date.now() - this._lastUsedTime;
+		if (timePassedSinceLastUsed > STOP_WHEN_IDLE_FOR) {
+			this._stopWorker();
+		}
+	}
+
+	private _getClient(): Promise<CSSWorker> {
+		this._lastUsedTime = Date.now();
+
+		if (!this._client) {
+			this._worker = editor.createWebWorker<CSSWorker>({
+				// module that exports the create() method and returns a `CSSWorker` instance
+				moduleId: 'vs/language/css/cssWorker',
+
+				label: this._defaults.languageId,
+
+				// passed in to the create() method
+				createData: {
+					options: this._defaults.options,
+					languageId: this._defaults.languageId
+				}
+			});
+
+			this._client = <Promise<CSSWorker>>(<any>this._worker.getProxy());
+		}
+
+		return this._client;
+	}
+
+	getLanguageServiceWorker(...resources: Uri[]): Promise<CSSWorker> {
+		let _client: CSSWorker;
+		return this._getClient()
+			.then((client) => {
+				_client = client;
+			})
+			.then((_) => {
+				return this._worker.withSyncedResources(resources);
+			})
+			.then((_) => _client);
+	}
+}