Add folding support

Fixes microsoft#61

Author: mjbvz

e2e/tests/outliningSpans.js

@@ -0,0 +1,44 @@
+//@ts-check
+const path = require('path');
+const assert = require('chai').assert;
+const createServer = require('../server-fixture');
+const { openMockFile, getFirstResponseOfType } = require('./_helpers');
+
+const mockFileName = path.join(__dirname, '..', 'project-fixture', 'main.ts');
+
+describe('OutliningSpans', () => {
+    it('should return basic css outlining spans', async () => {
+        const spans = await getOutlingSpansForMockFile([
+            'const q = css`',
+            'a {',
+            'color: red;',
+            '}',
+            'div {',
+            '',
+            '}',
+            '`'
+        ].join('\n'));
+
+        assert.strictEqual(spans.length, 2);
+
+        const [span1, span2] = spans;
+        assertPosition(span1.textSpan.start, 2, 1);
+        assertPosition(span1.textSpan.end, 3, 1);
+
+        assertPosition(span2.textSpan.start, 5, 1);
+        assertPosition(span2.textSpan.end, 6, 1);
+    });
+});
+
+function getOutlingSpansForMockFile(contents) {
+    const server = createServer();
+    openMockFile(server, mockFileName, contents);
+    server.sendCommand('getOutliningSpans', { file: mockFileName });
+
+    return server.close().then(() => getFirstResponseOfType('getOutliningSpans', server).body);
+}
+
+function assertPosition(pos, line, offset) {
+    assert.strictEqual(pos.line, line);
+    assert.strictEqual(pos.offset, offset);
+}

package-lock.json

@@ -20,7 +20,7 @@
     "url": "https://github.com/Microsoft/typescript-styled-plugin/issues"
   },
   "dependencies": {
-    "typescript-template-language-service-decorator": "^1.5.0",
+    "typescript-template-language-service-decorator": "^1.7.0",
     "vscode-css-languageservice": "^3.0.9-next.19",
     "vscode-languageserver-types": "^3.8.2",
     "vscode-emmet-helper": "1.2.10"

package.json

@@ -5,7 +5,7 @@
 
 import { Logger, TemplateContext, TemplateLanguageService } from 'typescript-template-language-service-decorator';
 import * as ts from 'typescript/lib/tsserverlibrary';
-import { getCSSLanguageService, getSCSSLanguageService, LanguageService } from 'vscode-css-languageservice';
+import { getCSSLanguageService, getSCSSLanguageService, LanguageService, FoldingRange } from 'vscode-css-languageservice';
 import { getEmmetCompletionParticipants } from 'vscode-emmet-helper';
 import * as vscode from 'vscode-languageserver-types';
 import * as config from './_config';
@@ -175,6 +175,23 @@ export class StyledTemplateLanguageService implements TemplateLanguageService {
             this.scssLanguageService.doCodeActions(doc, range, { diagnostics }, stylesheet));
     }
 
+    public getOutliningSpans(
+        context: TemplateContext
+    ): ts.OutliningSpan[] {
+        const doc = this.virtualDocumentFactory.createVirtualDocument(context);
+        const ranges = this.scssLanguageService.getFoldingRanges(doc);
+        return ranges
+            .filter(range => {
+                // Filter out ranges outside on last line
+                const end = context.toOffset({
+                    line: range.endLine,
+                    character: range.endCharacter || 0,
+                });
+                return end < context.text.length;
+            })
+            .map(range => this.translateOutliningSpan(context, range));
+    }
+
     private toVsRange(
         context: TemplateContext,
         start: number,
@@ -325,6 +342,26 @@ export class StyledTemplateLanguageService implements TemplateLanguageService {
             }],
         };
     }
+
+    private translateOutliningSpan(
+        context: TemplateContext,
+        range: FoldingRange
+    ): ts.OutliningSpan {
+        const startOffset = context.toOffset(this.virtualDocumentFactory.fromVirtualDocPosition({ line: range.startLine, character: range.startCharacter || 0 }));
+        const endOffset = context.toOffset(this.virtualDocumentFactory.fromVirtualDocPosition({ line: range.endLine, character: range.endCharacter || 0 }));
+        const span = {
+            start: startOffset,
+            length: endOffset - startOffset,
+        };
+
+        return {
+            autoCollapse: false,
+            kind: this.typescript.OutliningSpanKind.Code,
+            bannerText: '',
+            textSpan: span,
+            hintSpan: span,
+        };
+    }
 }
 
 function filterScssCompletionItems(