feat: add vue file basic support

package.json

@@ -25,7 +25,8 @@
 		"Programming Languages"
 	],
 	"activationEvents": [
-		"onLanguage:scss"
+		"onLanguage:scss",
+		"onLanguage:vue"
 	],
 	"main": "./out/client.js",
 	"contributes": {

src/client.ts

@@ -38,7 +38,7 @@ export function activate(context: vscode.ExtensionContext) {
 	};
 
 	const clientOptions: LanguageClientOptions = {
-		documentSelector: ['scss'],
+		documentSelector: ['scss', 'vue'],
 		synchronize: {
 			configurationSection: ['scss'],
 			fileEvents: vscode.workspace.createFileSystemWatcher('**/*.scss')

src/server.ts

@@ -22,6 +22,7 @@ import { doSignatureHelp } from './providers/signatureHelp';
 import { goDefinition } from './providers/goDefinition';
 import { searchWorkspaceSymbol } from './providers/workspaceSymbol';
 import { findFiles } from './utils/fs';
+import { getSCSSRegionsDocument } from './utils/vue';
 
 let workspaceRoot: string;
 let settings: ISettings;
@@ -51,7 +52,7 @@ connection.onInitialize(
 		storageService = new StorageService();
 		scannerService = new ScannerService(storageService, settings);
 
-		const files = await findFiles('**/*.scss', {
+		const files = await findFiles('**/*.{scss,vue}', {
 			cwd: params.rootPath,
 			deep: settings.scannerDepth,
 			ignore: settings.scannerExclude
@@ -91,26 +92,46 @@ connection.onDidChangeWatchedFiles(event => {
 });
 
 connection.onCompletion(textDocumentPosition => {
-	const document = documents.get(textDocumentPosition.textDocument.uri);
-	const offset = document.offsetAt(textDocumentPosition.position);
+	const { document, offset } = getSCSSRegionsDocument(
+		documents.get(textDocumentPosition.textDocument.uri),
+		textDocumentPosition.position
+	);
+	if (!document) {
+		return null;
+	}
 	return doCompletion(document, offset, settings, storageService);
 });
 
 connection.onHover(textDocumentPosition => {
-	const document = documents.get(textDocumentPosition.textDocument.uri);
-	const offset = document.offsetAt(textDocumentPosition.position);
+	const { document, offset } = getSCSSRegionsDocument(
+		documents.get(textDocumentPosition.textDocument.uri),
+		textDocumentPosition.position
+	);
+	if (!document) {
+		return null;
+	}
 	return doHover(document, offset, storageService);
 });
 
 connection.onSignatureHelp(textDocumentPosition => {
-	const document = documents.get(textDocumentPosition.textDocument.uri);
-	const offset = document.offsetAt(textDocumentPosition.position);
+	const { document, offset } = getSCSSRegionsDocument(
+		documents.get(textDocumentPosition.textDocument.uri),
+		textDocumentPosition.position
+	);
+	if (!document) {
+		return null;
+	}
 	return doSignatureHelp(document, offset, storageService);
 });
 
 connection.onDefinition(textDocumentPosition => {
-	const document = documents.get(textDocumentPosition.textDocument.uri);
-	const offset = document.offsetAt(textDocumentPosition.position);
+	const { document, offset } = getSCSSRegionsDocument(
+		documents.get(textDocumentPosition.textDocument.uri),
+		textDocumentPosition.position
+	);
+	if (!document) {
+		return null;
+	}
 	return goDefinition(document, offset, storageService);
 });
 

src/services/scanner.ts

@@ -6,6 +6,7 @@ import { ISettings } from '../types/settings';
 import { readFile, fileExists } from '../utils/fs';
 import { parseDocument } from './parser';
 import StorageService from './storage';
+import { isVueFile, getVueSCSSContent } from '../utils/vue';
 
 export default class ScannerService {
 	constructor(private readonly _storage: StorageService, private readonly _settings: ISettings) {}
@@ -37,7 +38,12 @@ export default class ScannerService {
 			}
 
 			const content = await this._readFile(filepath);
-			const document = TextDocument.create(originalFilepath, 'scss', 1, content);
+			const document = TextDocument.create(
+				originalFilepath,
+				'scss',
+				1,
+				isVueFile(filepath) ? getVueSCSSContent(content) : content
+			);
 			const { symbols } = parseDocument(document, null);
 
 			this._storage.set(filepath, { ...symbols, filepath });

src/utils/vue.ts

@@ -0,0 +1,50 @@
+import { TextDocument, Position } from 'vscode-languageserver';
+
+export function isVueFile(path: string) {
+	return path.endsWith('.vue');
+}
+
+export function getVueSCSSRegions(content: string) {
+	const regions: Array<[number, number]> = [];
+	const startRe = /<style[\w=\"\' \n\t]{1,}lang=[\"\']scss[\"\'][\w=\"\' \n\t]{0,}>/g;
+	const endRe = /<\/style>/g;
+	/* tslint:disable:no-conditional-assignment */
+	let start: RegExpExecArray;
+	let end: RegExpExecArray;
+	while ((start = startRe.exec(content)) !== null && (end = endRe.exec(content)) !== null) {
+		regions.push([start.index + start[0].length, end.index]);
+	}
+	return regions;
+}
+
+export function getVueSCSSContent(content: string) {
+	const oldContent = content;
+
+	let newContent = oldContent
+		.split('\n')
+		.map(line => ' '.repeat(line.length))
+		.join('\n');
+
+	for (const r of getVueSCSSRegions(oldContent)) {
+		newContent = newContent.slice(0, r[0]) + oldContent.slice(r[0], r[1]) + newContent.slice(r[1]);
+	}
+
+	return newContent;
+}
+
+function convertVueTextDocument(document: TextDocument) {
+	return TextDocument.create(document.uri, 'scss', document.version, getVueSCSSContent(document.getText()));
+}
+
+export function getSCSSRegionsDocument(document: TextDocument, position: Position) {
+	const offset = document.offsetAt(position);
+	if (isVueFile(document.uri)) {
+		const vueSCSSRegions = getVueSCSSRegions(document.getText());
+		if (vueSCSSRegions.some(region => region[0] <= offset && region[1] >= offset)) {
+			return { document: convertVueTextDocument(document), offset };
+		}
+		return { document: null, offset };
+	}
+
+	return { document, offset };
+}