add emmet-style completions

Author: Brad Cornes

packages/emmet-helper/package-lock.json

@@ -0,0 +1,13 @@
+{
+  "name": "emmet-helper",
+  "version": "0.0.1",
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "ncc build src/index.js -o dist --minify && replace-in-files --string='e(\"./format\")' --string='e(\"./edit\")' --replacement='undefined' dist/index.js"
+  },
+  "devDependencies": {
+    "@zeit/ncc": "^0.22.1",
+    "replace-in-files-cli": "^0.3.1",
+    "vscode-emmet-helper": "^1.2.17"
+  }
+}

packages/emmet-helper/package.json

@@ -0,0 +1 @@
+export * from 'vscode-emmet-helper'

packages/emmet-helper/src/index.js

@@ -21,6 +21,7 @@
     "@zeit/ncc": "^0.22.0",
     "css.escape": "^1.5.1",
     "dlv": "^1.1.3",
+    "emmet-helper": "0.0.1",
     "glob-exec": "^0.1.1",
     "tailwindcss-class-names": "0.0.1",
     "typescript": "^3.8.3",

packages/tailwindcss-language-server/package.json

@@ -15,6 +15,10 @@ import { isCssContext } from '../util/css'
 import { findLast, findJsxStrings, arrFindLast } from '../util/find'
 import { stringifyConfigValue, stringifyCss } from '../util/stringify'
 import isObject from '../util/isObject'
+import * as emmetHelper from 'emmet-helper'
+import { isValidLocationForEmmetAbbreviation } from '../util/isValidLocationForEmmetAbbreviation'
+import { getDocumentSettings } from '../util/getDocumentSettings'
+import { isJsContext } from '../util/js'
 
 function completionsFromClassList(
   state: State,
@@ -174,7 +178,10 @@ function provideClassNameCompletions(
 ): CompletionList {
   let doc = state.editor.documents.get(params.textDocument.uri)
 
-  if (isHtmlContext(doc, params.position)) {
+  if (
+    isHtmlContext(doc, params.position) ||
+    isJsContext(doc, params.position)
+  ) {
     return provideClassAttributeCompletions(state, params)
   }
 
@@ -490,19 +497,88 @@ function provideCssDirectiveCompletions(
   }
 }
 
-export function provideCompletions(
+async function provideEmmetCompletions(
+  state: State,
+  { position, textDocument }: CompletionParams
+): Promise<CompletionList> {
+  let settings = await getDocumentSettings(state, textDocument.uri)
+  if (settings.emmetCompletions !== true) return null
+
+  let doc = state.editor.documents.get(textDocument.uri)
+
+  const syntax = isHtmlContext(doc, position)
+    ? 'html'
+    : isJsContext(doc, position)
+    ? 'jsx'
+    : null
+
+  if (syntax === null) {
+    return null
+  }
+
+  const extractAbbreviationResults = emmetHelper.extractAbbreviation(
+    doc,
+    position,
+    true
+  )
+  if (
+    !extractAbbreviationResults ||
+    !emmetHelper.isAbbreviationValid(
+      syntax,
+      extractAbbreviationResults.abbreviation
+    )
+  ) {
+    return null
+  }
+
+  if (
+    !isValidLocationForEmmetAbbreviation(
+      doc,
+      extractAbbreviationResults.abbreviationRange
+    )
+  ) {
+    return null
+  }
+
+  const emmetItems = emmetHelper.doComplete(doc, position, syntax, {})
+
+  if (!emmetItems || !emmetItems.items || emmetItems.items.length !== 1) {
+    return null
+  }
+
+  // https://github.com/microsoft/vscode/issues/86941
+  if (emmetItems.items[0].label === 'widows: ;') {
+    return null
+  }
+
+  const parts = emmetItems.items[0].label.split('.')
+  if (parts.length < 2) return null
+
+  return completionsFromClassList(state, parts[parts.length - 1], {
+    start: {
+      line: position.line,
+      character: position.character - parts[parts.length - 1].length,
+    },
+    end: position,
+  })
+}
+
+export async function provideCompletions(
   state: State,
   params: CompletionParams
-): CompletionList {
+): Promise<CompletionList> {
   if (state === null) return { items: [], isIncomplete: false }
 
-  return (
+  const result =
     provideClassNameCompletions(state, params) ||
     provideCssHelperCompletions(state, params) ||
     provideCssDirectiveCompletions(state, params) ||
     provideScreenDirectiveCompletions(state, params) ||
     provideVariantsDirectiveCompletions(state, params)
-  )
+
+  if (result) return result
+
+  return provideEmmetCompletions(state, params)
 }
 
 export function resolveCompletionItem(

packages/tailwindcss-language-server/src/providers/completionProvider.ts

@@ -8,6 +8,7 @@ import { stringifyCss, stringifyConfigValue } from '../util/stringify'
 const dlv = require('dlv')
 import { isHtmlContext } from '../util/html'
 import { isCssContext } from '../util/css'
+import { isJsContext } from '../util/js'
 
 export function provideHover(
   state: State,
@@ -78,7 +79,7 @@ function provideClassNameHover(
 ): Hover {
   let doc = state.editor.documents.get(textDocument.uri)
 
-  if (!isHtmlContext(doc, position)) return null
+  if (!isHtmlContext(doc, position) && !isJsContext(doc, position)) return null
 
   let hovered = getClassNameAtPosition(doc, position)
   if (!hovered) return null

packages/tailwindcss-language-server/src/providers/hoverProvider.ts

@@ -15,25 +15,32 @@ import {
   CompletionList,
   Hover,
   TextDocumentPositionParams,
+  DidChangeConfigurationNotification,
 } from 'vscode-languageserver'
 import getTailwindState from 'tailwindcss-class-names'
-import { State } from './util/state'
+import { State, Settings } from './util/state'
 import {
   provideCompletions,
   resolveCompletionItem,
 } from './providers/completionProvider'
 import { provideHover } from './providers/hoverProvider'
 import { URI } from 'vscode-uri'
+import { getDocumentSettings } from './util/getDocumentSettings'
 
 let state: State = null
 let connection = createConnection(ProposedFeatures.all)
 let documents = new TextDocuments()
 let workspaceFolder: string | null
 
+const defaultSettings: Settings = { emmetCompletions: false }
+let globalSettings: Settings = defaultSettings
+let documentSettings: Map<string, Settings> = new Map()
+
 documents.onDidOpen((event) => {
-  connection.console.log(
-    `[Server(${process.pid}) ${workspaceFolder}] Document opened: ${event.document.uri}`
-  )
+  getDocumentSettings(state, event.document.uri)
+})
+documents.onDidClose((event) => {
+  documentSettings.delete(event.document.uri)
 })
 documents.listen(connection)
 
@@ -52,7 +59,16 @@ connection.onInitialize(
         },
       }
     )
-    state.editor = { connection, documents }
+
+    const capabilities = params.capabilities
+
+    state.editor = {
+      connection,
+      documents,
+      documentSettings,
+      globalSettings,
+      capabilities: { configuration: capabilities.workspace && !!capabilities.workspace.configuration },
+    }
 
     return {
       capabilities: {
@@ -73,15 +89,37 @@ connection.onInitialize(
 
 connection.onInitialized &&
   connection.onInitialized(async () => {
+    if (state.editor.capabilities.configuration) {
+      connection.client.register(
+        DidChangeConfigurationNotification.type,
+        undefined
+      )
+    }
+
     connection.sendNotification('tailwindcss/configUpdated', [
       state.dependencies[0],
       state.config,
       state.plugins,
     ])
   })
 
+connection.onDidChangeConfiguration((change) => {
+  if (state.editor.capabilities.configuration) {
+    // Reset all cached document settings
+    state.editor.documentSettings.clear()
+  } else {
+    state.editor.globalSettings = <Settings>(
+      (change.settings.tailwindCSS || defaultSettings)
+    )
+  }
+
+  state.editor.documents
+    .all()
+    .forEach((doc) => getDocumentSettings(state, doc.uri))
+})
+
 connection.onCompletion(
-  (params: CompletionParams): CompletionList => {
+  (params: CompletionParams): Promise<CompletionList> => {
     return provideCompletions(state, params)
   }
 )

packages/tailwindcss-language-server/src/server.ts

@@ -1,5 +1,5 @@
 import { TextDocument, Position } from 'vscode-languageserver'
-import { isMixedDoc, isInsideTag } from './html'
+import { isInsideTag, isVueDoc, isSvelteDoc } from './html'
 
 export const CSS_LANGUAGES = [
   'css',
@@ -19,7 +19,7 @@ export function isCssContext(doc: TextDocument, position: Position): boolean {
     return true
   }
 
-  if (isMixedDoc(doc)) {
+  if (isVueDoc(doc) || isSvelteDoc(doc)) {
     let str = doc.getText({
       start: { line: 0, character: 0 },
       end: position,

packages/tailwindcss-language-server/src/util/css.ts

@@ -0,0 +1,19 @@
+import { State, Settings } from './state'
+
+export async function getDocumentSettings(
+  state: State,
+  resource: string
+): Promise<Settings> {
+  if (!state.editor.capabilities.configuration) {
+    return Promise.resolve(state.editor.globalSettings)
+  }
+  let result = state.editor.documentSettings.get(resource)
+  if (!result) {
+    result = await state.editor.connection.workspace.getConfiguration({
+      scopeUri: resource,
+      section: 'tailwindCSS',
+    })
+    state.editor.documentSettings.set(resource, result)
+  }
+  return result
+}

packages/tailwindcss-language-server/src/util/getDocumentSettings.ts

@@ -1,5 +1,4 @@
 import { TextDocument, Position } from 'vscode-languageserver'
-import { JS_LANGUAGES } from './js'
 
 export const HTML_LANGUAGES = [
   'blade',
@@ -20,43 +19,36 @@ export const HTML_LANGUAGES = [
   'razor',
   'slim',
   'twig',
-  ...JS_LANGUAGES,
 ]
 
-function isHtmlDoc(doc: TextDocument): boolean {
+export function isHtmlDoc(doc: TextDocument): boolean {
   return HTML_LANGUAGES.indexOf(doc.languageId) !== -1
 }
 
-function isVueDoc(doc: TextDocument): boolean {
+export function isVueDoc(doc: TextDocument): boolean {
   return doc.languageId === 'vue'
 }
 
-function isSvelteDoc(doc: TextDocument): boolean {
+export function isSvelteDoc(doc: TextDocument): boolean {
   return doc.languageId === 'svelte'
 }
 
-export function isMixedDoc(doc: TextDocument): boolean {
-  return isVueDoc(doc) || isSvelteDoc(doc)
-}
-
 export function isHtmlContext(doc: TextDocument, position: Position): boolean {
-  if (isHtmlDoc(doc)) {
+  let str = doc.getText({
+    start: { line: 0, character: 0 },
+    end: position,
+  })
+
+  if (isHtmlDoc(doc) && !isInsideTag(str, ['script', 'style'])) {
     return true
   }
 
-  if (isMixedDoc(doc)) {
-    let str = doc.getText({
-      start: { line: 0, character: 0 },
-      end: position,
-    })
-
-    if (isVueDoc(doc)) {
-      return isInsideTag(str, ['template', 'script'])
-    }
+  if (isVueDoc(doc)) {
+    return isInsideTag(str, ['template'])
+  }
 
-    if (isSvelteDoc(doc)) {
-      return !isInsideTag(str, ['style'])
-    }
+  if (isSvelteDoc(doc)) {
+    return !isInsideTag(str, ['script', 'style'])
   }
 
   return false