[css] adopt languageserver colorProvider.proposed protocol

extensions/css/client/src/colorDecorators.ts

@@ -1,43 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- *  Copyright (c) Microsoft Corporation. All rights reserved.
- *  Licensed under the MIT License. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
-'use strict';
-
-import * as parse from 'parse-color';
-import { Range, TextDocument, DocumentColorProvider, Color, ColorRange } from 'vscode';
-
-const CSSColorFormats = {
-	Hex: '#{red:X}{green:X}{blue:X}',
-	RGB: {
-		opaque: 'rgb({red:d[0-255]}, {green:d[0-255]}, {blue:d[0-255]})',
-		transparent: 'rgba({red:d[0-255]}, {green:d[0-255]}, {blue:d[0-255]}, {alpha})'
-	},
-	HSL: {
-		opaque: 'hsl({hue:d[0-360]}, {saturation:d[0-100]}%, {luminance:d[0-100]}%)',
-		transparent: 'hsla({hue:d[0-360]}, {saturation:d[0-100]}%, {luminance:d[0-100]}%, {alpha})'
-	}
-};
-
-export class ColorProvider implements DocumentColorProvider {
-	constructor(private decoratorProvider: (uri: string) => Thenable<Range[]>) { }
-
-	async provideDocumentColors(document: TextDocument): Promise<ColorRange[]> {
-		const ranges = await this.decoratorProvider(document.uri.toString());
-		const result = [];
-		for (let range of ranges) {
-			let color;
-			const value = document.getText(range);
-			const parsedColor = parse(value);
-			if (parsedColor && parsedColor.rgba) {
-				const [red, green, blue, alpha] = parsedColor.rgba;
-				color = new Color(red, green, blue, alpha);
-			}
-
-			if (color) {
-				result.push(new ColorRange(range, color, [CSSColorFormats.Hex, CSSColorFormats.RGB, CSSColorFormats.HSL]));
-			}
-		}
-		return result;
-	}
-}

extensions/css/client/src/cssMain.ts

@@ -6,17 +6,26 @@
 
 import * as path from 'path';
 
-import { languages, window, commands, ExtensionContext } from 'vscode';
-import { LanguageClient, LanguageClientOptions, ServerOptions, TransportKind, RequestType, Range, TextEdit } from 'vscode-languageclient';
+import { languages, window, commands, ExtensionContext, TextDocument, ColorRange, Color } from 'vscode';
+import { LanguageClient, LanguageClientOptions, ServerOptions, TransportKind, TextEdit } from 'vscode-languageclient';
+
 import { ConfigurationFeature } from 'vscode-languageclient/lib/proposed';
-import { ColorProvider } from './colorDecorators';
+import { DocumentColorRequest } from 'vscode-languageserver-protocol/lib/protocol.colorProvider.proposed';
 
 import * as nls from 'vscode-nls';
 let localize = nls.loadMessageBundle();
 
-namespace ColorSymbolRequest {
-	export const type: RequestType<string, Range[], any, any> = new RequestType('css/colorSymbols');
-}
+const CSSColorFormats = {
+	Hex: '#{red:X}{green:X}{blue:X}',
+	RGB: {
+		opaque: 'rgb({red:d[0-255]}, {green:d[0-255]}, {blue:d[0-255]})',
+		transparent: 'rgba({red:d[0-255]}, {green:d[0-255]}, {blue:d[0-255]}, {alpha})'
+	},
+	HSL: {
+		opaque: 'hsl({hue:d[0-360]}, {saturation:d[0-100]}%, {luminance:d[0-100]}%)',
+		transparent: 'hsla({hue:d[0-360]}, {saturation:d[0-100]}%, {luminance:d[0-100]}%, {alpha})'
+	}
+};
 
 // this method is called when vs code is activated
 export function activate(context: ExtensionContext) {
@@ -33,9 +42,11 @@ export function activate(context: ExtensionContext) {
 		debug: { module: serverModule, transport: TransportKind.ipc, options: debugOptions }
 	};
 
+	let documentSelector = ['css', 'scss', 'less'];
+
 	// Options to control the language client
 	let clientOptions: LanguageClientOptions = {
-		documentSelector: ['css', 'scss', 'less'],
+		documentSelector,
 		synchronize: {
 			configurationSection: ['css', 'scss', 'less']
 		},
@@ -53,11 +64,19 @@ export function activate(context: ExtensionContext) {
 	context.subscriptions.push(disposable);
 
 	client.onReady().then(_ => {
-		let colorRequestor = (uri: string) => {
-			return client.sendRequest(ColorSymbolRequest.type, uri).then(ranges => ranges.map(client.protocol2CodeConverter.asRange));
-		};
-
-		context.subscriptions.push(languages.registerColorProvider(['css', 'scss', 'less'], new ColorProvider(colorRequestor)));
+		// register color provider
+		context.subscriptions.push(languages.registerColorProvider(documentSelector, {
+			provideDocumentColors(document: TextDocument): Thenable<ColorRange[]> {
+				let params = client.code2ProtocolConverter.asDocumentSymbolParams(document);
+				return client.sendRequest(DocumentColorRequest.type, params).then(symbols => {
+					return symbols.map(symbol => {
+						let range = client.protocol2CodeConverter.asRange(symbol.range);
+						let color = new Color(symbol.color.red * 255, symbol.color.green * 255, symbol.color.blue * 255, symbol.color.alpha);
+						return new ColorRange(range, color, [CSSColorFormats.Hex, CSSColorFormats.RGB, CSSColorFormats.HSL]);
+					});
+				});
+			}
+		}));
 	});
 
 	let indentationRules = {

extensions/css/client/src/typings/parse-color.d.ts

@@ -1,21 +0,0 @@
-declare module "parse-color" {
-
-	interface Color {
-		rgb: [number, number, number],
-		hsl: [number, number, number],
-		hsv: [number, number, number],
-		cmyk: [number, number, number, number],
-		keyword: string,
-		hex: string,
-		rgba: [number, number, number, number],
-		hsla: [number, number, number, number],
-		hsva: [number, number, number, number],
-		cmyka: [number, number, number, number, number]
-	}
-
-	function parse(value: string): Color;
-
-	module parse { }
-
-	export = parse;
-}