Emmet in typescript styled plugin

README.md

@@ -340,6 +340,31 @@ Avoid using 'float'. Floats lead to fragile CSS that is easy to break if one asp
 
 Selectors should not contain IDs because these rules are too tightly coupled with the HTML. Default is `"ignore"`.
 
+### Emmet in completion list
+
+You can now see your Emmet abbreviations expanded and included in the completion list. 
+An [upstream issue](https://github.com/Microsoft/TypeScript/issues/21999) with typescript blocks the Emmet entry in the completion list to get updated as you type. 
+So for now you will have to press `Ctrl+Space` after typing out the abbreviation.
+
+The below settings which are in sync with general Emmet settings in VS Code control the expanded Emmet abbreviations in the auto-completion list. 
+
+#### showExpandedAbbreviation
+```
+"always" | "never"
+```
+
+Controls whether or not expanded Emmet abbreviations should show up in the completion list
+
+#### showSuggestionsAsSnippets
+```
+`true` | `false`
+```
+If true, then Emmet suggestions will show up as snippets allowing you to order them as per editor.snippetSuggestions setting.
+
+#### preferences
+
+Preferences used to modify behavior of some actions and resolvers of Emmet.
+
 
 ## Contributing
 

e2e/disabled-emmet-project-fixture/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "typescript.tsdk": "node_modules/typescript/lib"
+}

e2e/disabled-emmet-project-fixture/index.ts

@@ -0,0 +1,3 @@
+css`
+
+`

e2e/disabled-emmet-project-fixture/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "target": "es2015",
+    "module": "commonjs",
+    "plugins": [
+      { "name": "../../../lib", "tags": ["css"], "emmet": { "showExpandedAbbreviation": "never"} }
+    ]
+  }
+}

e2e/server-fixture/index.js

@@ -4,14 +4,14 @@ const fs = require('fs');
 const readline = require('readline');
 
 class TSServer {
-    constructor() {
+    constructor(project) {
         const logfile = path.join(__dirname, 'log.txt');
         const tsserverPath = path.join(__dirname, '..', 'node_modules', 'typescript', 'lib', 'tsserver');
         const server = fork(tsserverPath, [
             '--logVerbosity', 'verbose',
             '--logFile', logfile
         ], {
-                cwd: path.join(__dirname, '..', 'project-fixture'),
+                cwd: path.join(__dirname, '..', project),
                 stdio: ['pipe', 'pipe', 'pipe', 'ipc'],
             });
         this._exitPromise = new Promise((resolve, reject) => {
@@ -48,8 +48,8 @@ class TSServer {
     }
 }
 
-function createServer() {
-    return new TSServer();
+function createServer(project) {
+    return new TSServer(project || 'project-fixture');
 }
 
 module.exports = createServer;

e2e/tests/emmetCompletions.js

@@ -0,0 +1,159 @@
+const assert = require('chai').assert;
+const createServer = require('../server-fixture');
+const { openMockFile, getFirstResponseOfType } = require('./_helpers');
+
+const mockFileName = 'main.ts';
+
+describe('Emmet Completions', () => {
+    it('shouldnt return emmet property completions when disabled', () => {
+        const server = createServer('disabled-emmet-project-fixture');
+        openMockFile(server, mockFileName, 'const q = css`m10-20`');
+        server.send({ command: 'completions', arguments: { file: mockFileName, offset: 21, line: 1 } });
+
+        return server.close().then(() => {
+            const completionsResponse = getFirstResponseOfType('completions', server);
+            assert.isTrue(completionsResponse.body.every(item => item.name !== 'margin: 10px 20px;'));
+        });
+    });
+
+    it('should return emmet property completions for single line string', () => {
+        const server = createServer();
+        openMockFile(server, mockFileName, 'const q = css`m10-20`');
+        server.send({ command: 'completions', arguments: { file: mockFileName, offset: 21, line: 1 } });
+
+        return server.close().then(() => {
+            const completionsResponse = getFirstResponseOfType('completions', server);
+            assert.isTrue(completionsResponse.body.some(item => item.name === 'margin: 10px 20px;'));
+        });
+    });
+
+
+    it('should return emmet property completions for multiline string', () => {
+        const server = createServer();
+        openMockFile(server, mockFileName, [
+            'const q = css`',
+            'm10-20',
+            '`'
+        ].join('\n'));
+        server.send({ command: 'completions', arguments: { file: mockFileName, offset: 7, line: 2 } });
+
+        return server.close().then(() => {
+            const completionsResponse = getFirstResponseOfType('completions', server);
+            assert.isTrue(completionsResponse.body.some(item => item.name === 'margin: 10px 20px;'));
+        });
+    });
+
+    it('should return emmet property completions for nested selector', () => {
+        const server = createServer();
+        openMockFile(server, mockFileName, 'const q = css`position: relative; &:hover { m10-20 }`');
+        server.send({ command: 'completions', arguments: { file: mockFileName, offset: 51, line: 1 } });
+
+        return server.close().then(() => {
+            const completionsResponse = getFirstResponseOfType('completions', server);
+            assert.isTrue(completionsResponse.body.some(item => item.name === 'margin: 10px 20px;'));
+        });
+    });
+
+    it('should return emmet completions when placeholder is used as property', () => {
+        const server = createServer();
+        openMockFile(server, mockFileName, 'css`m10-20 ; boarder: 1px solid ${"red"};`');
+        server.send({ command: 'completions', arguments: { file: mockFileName, offset: 11, line: 1 } });
+
+        return server.close().then(() => {
+            const completionsResponse = getFirstResponseOfType('completions', server);
+            assert.isTrue(completionsResponse.body.some(item => item.name === 'margin: 10px 20px;'));
+        });
+    });
+
+    it('should return emmet completions after where placeholder is used as property', () => {
+        const server = createServer();
+        openMockFile(server, mockFileName, 'css`border: 1px solid ${"red"}; m10-20`');
+        server.send({ command: 'completions', arguments: { file: mockFileName, offset: 39, line: 1 } });
+
+        return server.close().then(() => {
+            const completionsResponse = getFirstResponseOfType('completions', server);
+            assert.isTrue(completionsResponse.body.some(item => item.name === 'margin: 10px 20px;'));
+        });
+    });
+
+    it('should return emmet completions between were placeholders are used as properties', () => {
+        const server = createServer();
+        openMockFile(server, mockFileName, 'css`boarder: 1px solid ${"red"}; color: #12; margin: ${20}; `')
+        server.send({ command: 'completions', arguments: { file: mockFileName, offset: 44, line: 1 } });
+
+        return server.close().then(() => {
+            const completionsResponse = getFirstResponseOfType('completions', server);
+            assert.isTrue(completionsResponse.body.some(item => item.name === '#121212'));
+        });
+    });
+
+    it('should return emmet completions on tagged template string with placeholder using dotted tag', () => {
+        const server = createServer();
+        openMockFile(server, mockFileName, 'css.x`color: #12 ; boarder: 1px solid ${"red"};`');
+        server.send({ command: 'completions', arguments: { file: mockFileName, offset: 17, line: 1 } });
+
+        return server.close().then(() => {
+            const completionsResponse = getFirstResponseOfType('completions', server);
+            assert.isTrue(completionsResponse.success);
+            assert.isTrue(completionsResponse.body.some(item => item.name === '#121212'));
+        });
+    });
+
+    it('should return styled emmet completions inside of nested placeholder', () => {
+        const server = createServer();
+        openMockFile(server, mockFileName, 'styled`background: red; ${(() => css`color: #12`)()}`;');
+        server.send({ command: 'completions', arguments: { file: mockFileName, offset: 48, line: 1 } });
+
+        return server.close().then(() => {
+            const completionsResponse = getFirstResponseOfType('completions', server);
+            assert.isTrue(completionsResponse.body.some(item => item.name === '#121212')); 
+        });
+    });
+
+    it('should handle emmet completions in multiline value placeholder correctly ', () => {
+        const server = createServer();
+        openMockFile(server, mockFileName, [
+            'css`margin: ${',
+            '0',
+            "}; color: #12`"].join('\n'));
+        server.send({ command: 'completions', arguments: { file: mockFileName, offset: 14, line: 3 } });
+
+        return server.close().then(() => {
+            const completionsResponse = getFirstResponseOfType('completions', server);
+            assert.isTrue(completionsResponse.body.some(item => item.name === '#121212'));
+        });
+    });
+
+    it('should handle emmet completions in multiline rule placeholder correctly ', () => {
+        const server = createServer();
+        openMockFile(server, mockFileName, [
+            'css`',
+            '${',
+            'css`margin: 0;`',
+            '}',
+            'color: #12`'].join('\n'));
+        server.send({ command: 'completions', arguments: { file: mockFileName, offset: 11, line: 5 } });
+
+        return server.close().then(() => {
+            const completionsResponse = getFirstResponseOfType('completions', server);
+            assert.isTrue(completionsResponse.body.some(item => item.name === '#121212'));
+        });
+    });
+
+    it('should return emmet completions inside of nested selector xx', () => {
+        const server = createServer();
+        openMockFile(server, mockFileName, [
+            'css`',
+            '    color: red;',
+            '    &:hover {',
+            '        color: #12  ',
+            '    }',
+            '`'].join('\n'));
+        server.send({ command: 'completions', arguments: { file: mockFileName, line: 4, offset: 19 } });
+
+        return server.close().then(() => {
+            const completionsResponse = getFirstResponseOfType('completions', server);
+            assert.isTrue(completionsResponse.body.some(item => item.name === '#121212')); 
+        });
+    });
+})

package.json

@@ -22,7 +22,8 @@
   "dependencies": {
     "typescript-template-language-service-decorator": "^1.2.0",
     "vscode-css-languageservice": "^3.0.5",
-    "vscode-languageserver-types": "^3.5.0"
+    "vscode-languageserver-types": "^3.6.0-next.1",
+    "vscode-emmet-helper": "1.1.36"
   },
   "files": [
     "lib"

src/configuration.ts

@@ -5,6 +5,7 @@ export interface TsStyledPluginConfiguration {
     tags: string[];
     validate: boolean;
     lint: { [key: string]: any };
+    emmet: { [key: string]: any };
 }
 
 export const defaultConfiguration: TsStyledPluginConfiguration = {
@@ -13,6 +14,7 @@ export const defaultConfiguration: TsStyledPluginConfiguration = {
     lint: {
         emptyRules: 'ignore',
     },
+    emmet: {}
 };
 
 export const loadConfiguration = (config: any): TsStyledPluginConfiguration => {
@@ -21,5 +23,6 @@ export const loadConfiguration = (config: any): TsStyledPluginConfiguration => {
         tags: config.tags || defaultConfiguration.tags,
         validate: typeof config.validate !== 'undefined' ? config.validate : defaultConfiguration.validate,
         lint,
+        emmet: config.emmet || defaultConfiguration.emmet
     };
 };