Merge user languages from initialization options and include languages

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

@@ -169,18 +169,26 @@ export class TW {
   }
 
   private async _initFolder(baseUri: URI): Promise<void> {
+    let initUserLanguages = this.initializeParams.initializationOptions?.userLanguages ?? {}
+
+    if (Object.keys(initUserLanguages).length > 0) {
+      console.warn(
+        'Language mappings are currently set via initialization options (`userLanguages`). This is deprecated and will be removed in a future release. Please use the `tailwindCSS.includeLanguages` setting instead.',
+      )
+    }
+
     let base = baseUri.fsPath
     let workspaceFolders: Array<ProjectConfig> = []
     let globalSettings = await this.settingsCache.get()
     let ignore = globalSettings.tailwindCSS.files.exclude
 
     // Get user languages for the given workspace folder
     let folderSettings = await this.settingsCache.get(baseUri.toString())
-    let userLanguages = folderSettings.tailwindCSS.includeLanguages
 
-    // Fall back to settings defined in `initializationOptions` if invalid
-    if (!isObject(userLanguages)) {
-      userLanguages = this.initializeParams.initializationOptions?.userLanguages ?? {}
+    // Merge the languages from the global settings with the languages from the workspace folder
+    let userLanguages = {
+      ...initUserLanguages,
+      ...(folderSettings.tailwindCSS.includeLanguages ?? {}),
     }
 
     let cssFileConfigMap: Map<string, string> = new Map()

packages/tailwindcss-language-server/tests/common.ts

@@ -15,6 +15,7 @@ import {
 } from 'vscode-languageserver-protocol'
 import type { ClientCapabilities, ProtocolConnection } from 'vscode-languageclient'
 import type { Feature } from '@tailwindcss/language-service/src/features'
+import { clearLanguageBoundariesCache } from '@tailwindcss/language-service/src/util/getLanguageBoundaries'
 import { CacheMap } from '../src/cache-map'
 
 type Settings = any
@@ -42,7 +43,10 @@ interface FixtureContext
   }
 }
 
-async function init(fixture: string | string[]): Promise<FixtureContext> {
+export async function init(
+  fixture: string | string[],
+  options: Record<string, any> = {},
+): Promise<FixtureContext> {
   let settings = {}
   let docSettings = new Map<string, Settings>()
 
@@ -158,6 +162,7 @@ async function init(fixture: string | string[]): Promise<FixtureContext> {
     workspaceFolders,
     initializationOptions: {
       testMode: true,
+      ...options,
     },
   } as InitializeParams)
 
@@ -200,6 +205,9 @@ async function init(fixture: string | string[]): Promise<FixtureContext> {
     openingDocuments.get(params.uri)?.resolve()
   })
 
+  // This is a global cache that must be reset between tests for accurate results
+  clearLanguageBoundariesCache()
+
   let counter = 0
 
   return {

packages/tailwindcss-language-server/tests/connection.ts

@@ -5,16 +5,16 @@ import type { ProtocolConnection } from 'vscode-languageclient/node'
 import { Duplex } from 'node:stream'
 import { TW } from '../src/tw'
 
-export async function connect() {
-  class TestStream extends Duplex {
-    _write(chunk: string, _encoding: string, done: () => void) {
-      this.emit('data', chunk)
-      done()
-    }
-
-    _read(_size: number) {}
+class TestStream extends Duplex {
+  _write(chunk: string, _encoding: string, done: () => void) {
+    this.emit('data', chunk)
+    done()
   }
 
+  _read(_size: number) {}
+}
+
+export async function connect() {
   let input = new TestStream()
   let output = new TestStream()
 

packages/tailwindcss-language-server/tests/env/custom-languages.test.js

@@ -0,0 +1,166 @@
+import { test } from 'vitest'
+import { init } from '../common'
+import { HoverRequest } from 'vscode-languageserver'
+
+test('Unknown languages do not provide completions', async ({ expect }) => {
+  let c = await init('basic')
+
+  let textDocument = await c.openDocument({
+    lang: 'some-lang',
+    text: '<div class="bg-[#000]">',
+  })
+
+  let res = await c.sendRequest(HoverRequest.type, {
+    textDocument,
+    position: { line: 0, character: 13 },
+  })
+
+  expect(res).toEqual(null)
+})
+
+test('Custom languages may be specified via init options (deprecated)', async ({ expect }) => {
+  let c = await init('basic', {
+    userLanguages: {
+      'some-lang': 'html',
+    },
+  })
+
+  let textDocument = await c.openDocument({
+    lang: 'some-lang',
+    text: '<div class="bg-[#000]">',
+  })
+
+  let res = await c.sendRequest(HoverRequest.type, {
+    textDocument,
+    position: { line: 0, character: 13 },
+  })
+
+  expect(res).toEqual({
+    contents: {
+      language: 'css',
+      value:
+        '.bg-\\[\\#000\\] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(0 0 0 / var(--tw-bg-opacity)) /* #000000 */;\n}',
+    },
+    range: { start: { line: 0, character: 12 }, end: { line: 0, character: 21 } },
+  })
+})
+
+test('Custom languages may be specified via settings', async ({ expect }) => {
+  let c = await init('basic')
+
+  await c.updateSettings({
+    tailwindCSS: {
+      includeLanguages: {
+        'some-lang': 'html',
+      },
+    },
+  })
+
+  let textDocument = await c.openDocument({
+    lang: 'some-lang',
+    text: '<div class="bg-[#000]">',
+  })
+
+  let res = await c.sendRequest(HoverRequest.type, {
+    textDocument,
+    position: { line: 0, character: 13 },
+  })
+
+  expect(res).toEqual({
+    contents: {
+      language: 'css',
+      value:
+        '.bg-\\[\\#000\\] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(0 0 0 / var(--tw-bg-opacity)) /* #000000 */;\n}',
+    },
+    range: { start: { line: 0, character: 12 }, end: { line: 0, character: 21 } },
+  })
+})
+
+test('Custom languages are merged from init options and settings', async ({ expect }) => {
+  let c = await init('basic', {
+    userLanguages: {
+      'some-lang': 'html',
+    },
+  })
+
+  await c.updateSettings({
+    tailwindCSS: {
+      includeLanguages: {
+        'other-lang': 'html',
+      },
+    },
+  })
+
+  let textDocument = await c.openDocument({
+    lang: 'some-lang',
+    text: '<div class="bg-[#000]">',
+  })
+
+  let res = await c.sendRequest(HoverRequest.type, {
+    textDocument,
+    position: { line: 0, character: 13 },
+  })
+
+  textDocument = await c.openDocument({
+    lang: 'other-lang',
+    text: '<div class="bg-[#000]">',
+  })
+
+  let res2 = await c.sendRequest(HoverRequest.type, {
+    textDocument,
+    position: { line: 0, character: 13 },
+  })
+
+  expect(res).toEqual({
+    contents: {
+      language: 'css',
+      value:
+        '.bg-\\[\\#000\\] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(0 0 0 / var(--tw-bg-opacity)) /* #000000 */;\n}',
+    },
+    range: { start: { line: 0, character: 12 }, end: { line: 0, character: 21 } },
+  })
+
+  expect(res2).toEqual({
+    contents: {
+      language: 'css',
+      value:
+        '.bg-\\[\\#000\\] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(0 0 0 / var(--tw-bg-opacity)) /* #000000 */;\n}',
+    },
+    range: { start: { line: 0, character: 12 }, end: { line: 0, character: 21 } },
+  })
+})
+
+test('Language mappings from settings take precedence', async ({ expect }) => {
+  let c = await init('basic', {
+    userLanguages: {
+      'some-lang': 'css',
+    },
+  })
+
+  await c.updateSettings({
+    tailwindCSS: {
+      includeLanguages: {
+        'some-lang': 'html',
+      },
+    },
+  })
+
+  let textDocument = await c.openDocument({
+    lang: 'some-lang',
+    text: '<div class="bg-[#000]">',
+  })
+
+  let res = await c.sendRequest(HoverRequest.type, {
+    textDocument,
+    position: { line: 0, character: 13 },
+  })
+
+  expect(res).toEqual({
+    contents: {
+      language: 'css',
+      value:
+        '.bg-\\[\\#000\\] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(0 0 0 / var(--tw-bg-opacity)) /* #000000 */;\n}',
+    },
+    range: { start: { line: 0, character: 12 }, end: { line: 0, character: 21 } },
+  })
+})

packages/tailwindcss-language-service/src/util/getLanguageBoundaries.ts

@@ -139,6 +139,10 @@ let vueLexer = moo.states(vueStates)
 
 let cache = new Cache<string, LanguageBoundary[] | null>({ max: 25, maxAge: 1000 })
 
+export function clearLanguageBoundariesCache() {
+  cache.clear()
+}
+
 export function getLanguageBoundaries(
   state: State,
   doc: TextDocument,