add includeLanguages setting

Author: Brad Cornes

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

@@ -190,13 +190,13 @@ function provideClassNameCompletions(
   let doc = state.editor.documents.get(params.textDocument.uri)
 
   if (
-    isHtmlContext(doc, params.position) ||
-    isJsContext(doc, params.position)
+    isHtmlContext(state, doc, params.position) ||
+    isJsContext(state, doc, params.position)
   ) {
     return provideClassAttributeCompletions(state, params)
   }
 
-  if (isCssContext(doc, params.position)) {
+  if (isCssContext(state, doc, params.position)) {
     return provideAtApplyCompletions(state, params)
   }
 
@@ -209,7 +209,7 @@ function provideCssHelperCompletions(
 ): CompletionList {
   let doc = state.editor.documents.get(textDocument.uri)
 
-  if (!isCssContext(doc, position)) {
+  if (!isCssContext(state, doc, position)) {
     return null
   }
 
@@ -317,7 +317,7 @@ function provideTailwindDirectiveCompletions(
 ): CompletionList {
   let doc = state.editor.documents.get(textDocument.uri)
 
-  if (!isCssContext(doc, position)) {
+  if (!isCssContext(state, doc, position)) {
     return null
   }
 
@@ -408,7 +408,7 @@ function provideVariantsDirectiveCompletions(
 ): CompletionList {
   let doc = state.editor.documents.get(textDocument.uri)
 
-  if (!isCssContext(doc, position)) {
+  if (!isCssContext(state, doc, position)) {
     return null
   }
 
@@ -456,7 +456,7 @@ function provideScreenDirectiveCompletions(
 ): CompletionList {
   let doc = state.editor.documents.get(textDocument.uri)
 
-  if (!isCssContext(doc, position)) {
+  if (!isCssContext(state, doc, position)) {
     return null
   }
 
@@ -504,7 +504,7 @@ function provideCssDirectiveCompletions(
 ): CompletionList {
   let doc = state.editor.documents.get(textDocument.uri)
 
-  if (!isCssContext(doc, position)) {
+  if (!isCssContext(state, doc, position)) {
     return null
   }
 
@@ -599,9 +599,9 @@ async function provideEmmetCompletions(
 
   let doc = state.editor.documents.get(textDocument.uri)
 
-  const syntax = isHtmlContext(doc, position)
+  const syntax = isHtmlContext(state, doc, position)
     ? 'html'
-    : isJsContext(doc, position)
+    : isJsContext(state, doc, position)
     ? 'jsx'
     : null
 

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

@@ -27,7 +27,7 @@ function provideCssHelperHover(
 ): Hover {
   let doc = state.editor.documents.get(textDocument.uri)
 
-  if (!isCssContext(doc, position)) return null
+  if (!isCssContext(state, doc, position)) return null
 
   const line = doc.getText({
     start: { line: position.line, character: 0 },
@@ -81,7 +81,11 @@ function provideClassAttributeHover(
 ): Hover {
   let doc = state.editor.documents.get(textDocument.uri)
 
-  if (!isHtmlContext(doc, position) && !isJsContext(doc, position)) return null
+  if (
+    !isHtmlContext(state, doc, position) &&
+    !isJsContext(state, doc, position)
+  )
+    return null
 
   let hovered = getClassNameAtPosition(doc, position)
   if (!hovered) return null
@@ -111,7 +115,7 @@ function provideAtApplyHover(
 ): Hover {
   let doc = state.editor.documents.get(textDocument.uri)
 
-  if (!isCssContext(doc, position)) return null
+  if (!isCssContext(state, doc, position)) return null
 
   const classNames = findClassNamesInRange(doc, {
     start: { line: Math.max(position.line - 10, 0), character: 0 },

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

@@ -32,7 +32,10 @@ let connection = createConnection(ProposedFeatures.all)
 let documents = new TextDocuments()
 let workspaceFolder: string | null
 
-const defaultSettings: Settings = { emmetCompletions: false }
+const defaultSettings: Settings = {
+  emmetCompletions: false,
+  includeLanguages: {},
+}
 let globalSettings: Settings = defaultSettings
 let documentSettings: Map<string, Settings> = new Map()
 
@@ -53,6 +56,11 @@ connection.onInitialize(
       documents,
       documentSettings,
       globalSettings,
+      userLanguages:
+        params.initializationOptions &&
+        params.initializationOptions.userLanguages
+          ? params.initializationOptions.userLanguages
+          : {},
       capabilities: {
         configuration:
           capabilities.workspace && !!capabilities.workspace.configuration,

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

@@ -1,5 +1,6 @@
 import { TextDocument, Position } from 'vscode-languageserver'
 import { isInsideTag, isVueDoc, isSvelteDoc } from './html'
+import { State } from './state'
 
 export const CSS_LANGUAGES = [
   'css',
@@ -10,12 +11,20 @@ export const CSS_LANGUAGES = [
   'stylus',
 ]
 
-function isCssDoc(doc: TextDocument): boolean {
-  return CSS_LANGUAGES.indexOf(doc.languageId) !== -1
+function isCssDoc(state: State, doc: TextDocument): boolean {
+  const userCssLanguages = Object.keys(
+    state.editor.userLanguages
+  ).filter((lang) => CSS_LANGUAGES.includes(state.editor.userLanguages[lang]))
+
+  return [...CSS_LANGUAGES, ...userCssLanguages].indexOf(doc.languageId) !== -1
 }
 
-export function isCssContext(doc: TextDocument, position: Position): boolean {
-  if (isCssDoc(doc)) {
+export function isCssContext(
+  state: State,
+  doc: TextDocument,
+  position: Position
+): boolean {
+  if (isCssDoc(state, doc)) {
     return true
   }
 

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

@@ -1,4 +1,5 @@
 import { TextDocument, Position } from 'vscode-languageserver'
+import { State } from './state'
 
 export const HTML_LANGUAGES = [
   'aspnetcorerazor',
@@ -26,8 +27,14 @@ export const HTML_LANGUAGES = [
   'twig',
 ]
 
-export function isHtmlDoc(doc: TextDocument): boolean {
-  return HTML_LANGUAGES.indexOf(doc.languageId) !== -1
+export function isHtmlDoc(state: State, doc: TextDocument): boolean {
+  const userHtmlLanguages = Object.keys(
+    state.editor.userLanguages
+  ).filter((lang) => HTML_LANGUAGES.includes(state.editor.userLanguages[lang]))
+
+  return (
+    [...HTML_LANGUAGES, ...userHtmlLanguages].indexOf(doc.languageId) !== -1
+  )
 }
 
 export function isVueDoc(doc: TextDocument): boolean {
@@ -38,13 +45,17 @@ export function isSvelteDoc(doc: TextDocument): boolean {
   return doc.languageId === 'svelte'
 }
 
-export function isHtmlContext(doc: TextDocument, position: Position): boolean {
+export function isHtmlContext(
+  state: State,
+  doc: TextDocument,
+  position: Position
+): boolean {
   let str = doc.getText({
     start: { line: 0, character: 0 },
     end: position,
   })
 
-  if (isHtmlDoc(doc) && !isInsideTag(str, ['script', 'style'])) {
+  if (isHtmlDoc(state, doc) && !isInsideTag(str, ['script', 'style'])) {
     return true
   }
 

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

@@ -1,5 +1,6 @@
 import { TextDocument, Position } from 'vscode-languageserver'
 import { isHtmlDoc, isInsideTag, isVueDoc, isSvelteDoc } from './html'
+import { State } from './state'
 
 export const JS_LANGUAGES = [
   'javascript',
@@ -8,12 +9,20 @@ export const JS_LANGUAGES = [
   'typescriptreact',
 ]
 
-export function isJsDoc(doc: TextDocument): boolean {
-  return JS_LANGUAGES.indexOf(doc.languageId) !== -1
+export function isJsDoc(state: State, doc: TextDocument): boolean {
+  const userJsLanguages = Object.keys(
+    state.editor.userLanguages
+  ).filter((lang) => JS_LANGUAGES.includes(state.editor.userLanguages[lang]))
+
+  return [...JS_LANGUAGES, ...userJsLanguages].indexOf(doc.languageId) !== -1
 }
 
-export function isJsContext(doc: TextDocument, position: Position): boolean {
-  if (isJsDoc(doc)) {
+export function isJsContext(
+  state: State,
+  doc: TextDocument,
+  position: Position
+): boolean {
+  if (isJsDoc(state, doc)) {
     return true
   }
 
@@ -22,7 +31,7 @@ export function isJsContext(doc: TextDocument, position: Position): boolean {
     end: position,
   })
 
-  if (isHtmlDoc(doc) && isInsideTag(str, ['script'])) {
+  if (isHtmlDoc(state, doc) && isInsideTag(str, ['script'])) {
     return true
   }
 

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

@@ -18,13 +18,15 @@ export type EditorState = {
   documents: TextDocuments
   documentSettings: Map<string, Settings>
   globalSettings: Settings
+  userLanguages: Record<string, string>
   capabilities: {
     configuration: boolean
   }
 }
 
 export type Settings = {
   emmetCompletions: boolean
+  includeLanguages: Record<string, string>
 }
 
 export type State = null | {

packages/tailwindcss-vscode/package.json

@@ -55,6 +55,10 @@
           "type": "boolean",
           "default": false,
           "description": ""
+        },
+        "tailwindCSS.includeLanguages": {
+          "type": "object",
+          "default": {}
         }
       }
     }