Merge pull request #103 from yoyo930021/add-vue-support

feat: add vue file basic support

fixtures/e2e/completion/AppButton.vue

@@ -0,0 +1,31 @@
+<template>
+	<p class="foo"></p>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+$color: blue;
+$fonts: -apple-system;
+
+.foo {
+  color: $;
+}
+
+@import '~foo/bar.scss';
+
+.foo {
+  color: $;
+}
+
+@import './partial';
+
+.foo {
+  color: $;
+}
+
+</style>

fixtures/e2e/definition/AppButton.vue

@@ -0,0 +1,18 @@
+<template>
+	<p class="foo"></p>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+.test {
+  content: $variable + function();
+
+  @include mixin();
+}
+
+</style>

fixtures/e2e/hover/AppButton.vue

@@ -0,0 +1,18 @@
+<template>
+	<p class="foo"></p>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+.test {
+  content: $variable + function();
+
+  @include mixin();
+}
+
+</style>

fixtures/e2e/signature/AppButton.vue

@@ -0,0 +1,19 @@
+<template>
+	<p class="foo"></p>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+.test {
+  @include square();
+  @include square(1,);
+
+  content: pow() + pow(1,);
+}
+
+</style>

package.json

@@ -25,7 +25,8 @@
 		"Programming Languages"
 	],
 	"activationEvents": [
-		"onLanguage:scss"
+		"onLanguage:scss",
+		"onLanguage:vue"
 	],
 	"main": "./out/client.js",
 	"contributes": {
@@ -130,7 +131,7 @@
 		"clean": "rimraf out",
 		"lint": "tslint src/**/*.ts --project ./tsconfig.json",
 		"compile": "tsc",
-		"test": "mocha out/**/*.spec.js",
+		"test": "mocha \"out/**/*.spec.js\"",
 		"test:e2e": "node ./out/test/e2e/runTest.js",
 		"build": "npm run clean && npm run lint && npm run compile && npm test",
 		"watch": "npm run clean && npm run lint && tsc --watch"

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;
@@ -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/test/e2e/runTest.ts

@@ -1,6 +1,7 @@
 import * as path from 'path';
+import * as cp from 'child_process';
 
-import { runTests } from 'vscode-test';
+import { runTests, downloadAndUnzipVSCode, resolveCliPathFromVSCodeExecutablePath } from 'vscode-test';
 
 async function main() {
 	try {
@@ -15,11 +16,20 @@ async function main() {
 		const workspaceDir = path.resolve(__dirname, '../../../fixtures/e2e');
 
 		// Download VS Code, unzip it and run the integration test
+		const vscodeExecutablePath = await downloadAndUnzipVSCode('1.40.0');
+
+		const cliPath = resolveCliPathFromVSCodeExecutablePath(vscodeExecutablePath);
+		cp.spawnSync(cliPath, ['--install-extension', 'octref.vetur'], {
+			encoding: 'utf-8',
+			stdio: 'inherit'
+		});
+
 		await runTests({
+			vscodeExecutablePath,
 			version: '1.40.0',
 			extensionDevelopmentPath,
 			extensionTestsPath,
-			launchArgs: [workspaceDir, '--disable-extensions']
+			launchArgs: [workspaceDir]
 		});
 	} catch (err) {
 		console.error('Failed to run tests');

src/test/e2e/suite/completion/completion.test.ts

@@ -3,9 +3,11 @@ import { testCompletion } from './helper';
 
 describe('SCSS Completion Test', () => {
 	const docUri = getDocUri('completion/main.scss');
+	const vueDocUri = getDocUri('completion/AppButton.vue');
 
 	before(async () => {
 		await showFile(docUri);
+		await showFile(vueDocUri);
 		await sleep(2000);
 	});
 
@@ -20,4 +22,21 @@ describe('SCSS Completion Test', () => {
 	it('Offers completions from partial file', async () => {
 		await testCompletion(docUri, position(17, 11), [{ label: '$partial', detail: '_partial.scss' }]);
 	});
+
+	it('no completions on vue file outside scss regions', async () => {
+		await testCompletion(vueDocUri, position(2, 9), []);
+		await testCompletion(vueDocUri, position(6, 8), []);
+	});
+
+	it('Offers variable completions on vue file', async () => {
+		await testCompletion(vueDocUri, position(16, 11), ['$color', '$fonts']);
+	});
+
+	it('Offers completions from tilde imports on vue file', async () => {
+		await testCompletion(vueDocUri, position(22, 11), [{ label: '$tilde', detail: 'node_modules/foo/bar.scss' }]);
+	});
+
+	it('Offers completions from partial file on vue file', async () => {
+		await testCompletion(vueDocUri, position(28, 11), [{ label: '$partial', detail: '_partial.scss' }]);
+	});
 });

src/test/e2e/suite/definition/definitions.test.ts

@@ -3,9 +3,11 @@ import { testDefinition } from './helper';
 
 describe('SCSS Definition Test', () => {
 	const docUri = getDocUri('definition/main.scss');
+	const vueDocUri = getDocUri('definition/AppButton.vue');
 
 	before(async () => {
 		await showFile(docUri);
+		await showFile(vueDocUri);
 		await sleep(2000);
 	});
 
@@ -29,4 +31,25 @@ describe('SCSS Definition Test', () => {
 
 		await testDefinition(docUri, position(4, 12), expectedLocation);
 	});
+
+	it('should find definition for variables on vue file', async () => {
+		const expectedDocumentUri = getDocUri('_variables.scss');
+		const expectedLocation = sameLineLocation(expectedDocumentUri, 1, 1, 10);
+
+		await testDefinition(vueDocUri, position(13, 13), expectedLocation);
+	});
+
+	it('should find definition for functions on vue file', async () => {
+		const expectedDocumentUri = getDocUri('_functions.scss');
+		const expectedLocation = sameLineLocation(expectedDocumentUri, 1, 1, 9);
+
+		await testDefinition(vueDocUri, position(13, 24), expectedLocation);
+	});
+
+	it('should find definition for mixins on vue file', async () => {
+		const expectedDocumentUri = getDocUri('_mixins.scss');
+		const expectedLocation = sameLineLocation(expectedDocumentUri, 1, 1, 6);
+
+		await testDefinition(vueDocUri, position(15, 12), expectedLocation);
+	});
 });

src/test/e2e/suite/hover/hover.test.ts

@@ -3,9 +3,11 @@ import { testHover } from './helper';
 
 describe('SCSS Hover Test', () => {
 	const docUri = getDocUri('hover/main.scss');
+	const vueDocUri = getDocUri('hover/AppButton.vue');
 
 	before(async () => {
 		await showFile(docUri);
+		await showFile(vueDocUri);
 		await sleep(2000);
 	});
 
@@ -26,4 +28,28 @@ describe('SCSS Hover Test', () => {
 			contents: ['\n```scss\n@mixin mixin() {…}\n@import "../_mixins.scss" (implicitly)\n```\n']
 		});
 	});
+
+	it('shows hover for variables on vue file', async () => {
+		await testHover(vueDocUri, position(13, 13), {
+			contents: [
+				'Determines which page\\-based occurrence of a given element is applied to a counter or string value\\.',
+				'\n```scss\n$variable: \'value\';\n@import "../_variables.scss" (implicitly)\n```\n'
+			]
+		});
+	});
+
+	it('shows hover for functions on vue file', async () => {
+		await testHover(vueDocUri, position(13, 24), {
+			contents: [
+				'Determines which page\\-based occurrence of a given element is applied to a counter or string value\\.',
+				'\n```scss\n@function function() {…}\n@import "../_functions.scss" (implicitly)\n```\n'
+			]
+		});
+	});
+
+	it('shows hover for mixins on vue file', async () => {
+		await testHover(vueDocUri, position(15, 12), {
+			contents: ['\n```scss\n@mixin mixin() {…}\n@import "../_mixins.scss" (implicitly)\n```\n']
+		});
+	});
 });