Add support for @source not and @source inline(…)

packages/tailwindcss-language-server/package.json

@@ -42,6 +42,7 @@
     "@tailwindcss/line-clamp": "0.4.2",
     "@tailwindcss/oxide": "^4.0.0-alpha.19",
     "@tailwindcss/typography": "0.5.7",
+    "@types/braces": "3.0.1",
     "@types/color-name": "^1.1.3",
     "@types/culori": "^2.1.0",
     "@types/debounce": "1.2.0",

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

@@ -15,6 +15,8 @@ import type {
   Disposable,
   DocumentLinkParams,
   DocumentLink,
+  CodeLensParams,
+  CodeLens,
 } from 'vscode-languageserver/node'
 import { FileChangeType } from 'vscode-languageserver/node'
 import type { TextDocument } from 'vscode-languageserver-textdocument'
@@ -35,6 +37,7 @@ import stackTrace from 'stack-trace'
 import extractClassNames from './lib/extractClassNames'
 import { klona } from 'klona/full'
 import { doHover } from '@tailwindcss/language-service/src/hoverProvider'
+import { getCodeLens } from '@tailwindcss/language-service/src/codeLensProvider'
 import { Resolver } from './resolver'
 import {
   doComplete,
@@ -110,6 +113,7 @@ export interface ProjectService {
   onColorPresentation(params: ColorPresentationParams): Promise<ColorPresentation[]>
   onCodeAction(params: CodeActionParams): Promise<CodeAction[]>
   onDocumentLinks(params: DocumentLinkParams): Promise<DocumentLink[]>
+  onCodeLens(params: CodeLensParams): Promise<CodeLens[]>
   sortClassLists(classLists: string[]): string[]
 
   dependencies(): Iterable<string>
@@ -212,6 +216,7 @@ export async function createProjectService(
 
   let state: State = {
     enabled: false,
+    features: [],
     completionItemData: {
       _projectKey: projectKey,
     },
@@ -462,6 +467,14 @@ export async function createProjectService(
       // and this should be determined there and passed in instead
       let features = supportedFeatures(tailwindcssVersion, tailwindcss)
       log(`supported features: ${JSON.stringify(features)}`)
+      state.features = features
+
+      if (params.initializationOptions?.testMode) {
+        state.features = [
+          ...state.features,
+          ...(params.initializationOptions.additionalFeatures ?? []),
+        ]
+      }
 
       if (!features.includes('css-at-theme')) {
         tailwindcss = tailwindcss.default ?? tailwindcss
@@ -688,6 +701,15 @@ export async function createProjectService(
         state.v4 = true
         state.v4Fallback = true
         state.jit = true
+        state.features = features
+
+        if (params.initializationOptions?.testMode) {
+          state.features = [
+            ...state.features,
+            ...(params.initializationOptions.additionalFeatures ?? []),
+          ]
+        }
+
         state.modules = {
           tailwindcss: { version: tailwindcssVersion, module: tailwindcss },
           postcss: { version: null, module: null },
@@ -1150,7 +1172,7 @@ export async function createProjectService(
     },
     tryInit,
     async dispose() {
-      state = { enabled: false }
+      state = { enabled: false, features: [] }
       for (let disposable of disposables) {
         ;(await disposable).dispose()
       }
@@ -1177,6 +1199,17 @@ export async function createProjectService(
         return doHover(state, document, params.position)
       }, null)
     },
+    async onCodeLens(params: CodeLensParams): Promise<CodeLens[]> {
+      return withFallback(async () => {
+        if (!state.enabled) return null
+        let document = documentService.getDocument(params.textDocument.uri)
+        if (!document) return null
+        let settings = await state.editor.getConfiguration(document.uri)
+        if (!settings.tailwindCSS.codeLens) return null
+        if (await isExcluded(state, document)) return null
+        return getCodeLens(state, document)
+      }, null)
+    },
     async onCompletion(params: CompletionParams): Promise<CompletionList> {
       return withFallback(async () => {
         if (!state.enabled) return null

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

@@ -19,6 +19,8 @@ import type {
   DocumentLink,
   InitializeResult,
   WorkspaceFolder,
+  CodeLensParams,
+  CodeLens,
 } from 'vscode-languageserver/node'
 import {
   CompletionRequest,
@@ -30,6 +32,7 @@ import {
   FileChangeType,
   DocumentLinkRequest,
   TextDocumentSyncKind,
+  CodeLensRequest,
 } from 'vscode-languageserver/node'
 import { URI } from 'vscode-uri'
 import normalizePath from 'normalize-path'
@@ -757,6 +760,7 @@ export class TW {
     this.connection.onDocumentColor(this.onDocumentColor.bind(this))
     this.connection.onColorPresentation(this.onColorPresentation.bind(this))
     this.connection.onCodeAction(this.onCodeAction.bind(this))
+    this.connection.onCodeLens(this.onCodeLens.bind(this))
     this.connection.onDocumentLinks(this.onDocumentLinks.bind(this))
     this.connection.onRequest(this.onRequest.bind(this))
   }
@@ -809,6 +813,7 @@ export class TW {
     capabilities.add(HoverRequest.type, { documentSelector: null })
     capabilities.add(DocumentColorRequest.type, { documentSelector: null })
     capabilities.add(CodeActionRequest.type, { documentSelector: null })
+    capabilities.add(CodeLensRequest.type, { documentSelector: null })
     capabilities.add(DocumentLinkRequest.type, { documentSelector: null })
 
     capabilities.add(CompletionRequest.type, {
@@ -931,6 +936,11 @@ export class TW {
     return this.getProject(params.textDocument)?.onCodeAction(params) ?? null
   }
 
+  async onCodeLens(params: CodeLensParams): Promise<CodeLens[]> {
+    await this.init()
+    return this.getProject(params.textDocument)?.onCodeLens(params) ?? null
+  }
+
   async onDocumentLinks(params: DocumentLinkParams): Promise<DocumentLink[]> {
     await this.init()
     return this.getProject(params.textDocument)?.onDocumentLinks(params) ?? null
@@ -961,6 +971,9 @@ export class TW {
           hoverProvider: true,
           colorProvider: true,
           codeActionProvider: true,
+          codeLensProvider: {
+            resolveProvider: false,
+          },
           documentLinkProvider: {},
           completionProvider: {
             resolveProvider: true,

packages/tailwindcss-language-server/tests/code-lens/source-inline.test.ts

@@ -0,0 +1,101 @@
+import { expect } from 'vitest'
+import { css, defineTest } from '../../src/testing'
+import { createClient } from '../utils/client'
+
+defineTest({
+  name: 'Code lenses are displayed for @source inline(…)',
+  fs: {
+    'app.css': css`
+      @import 'tailwindcss';
+    `,
+  },
+  prepare: async ({ root }) => ({
+    client: await createClient({
+      root,
+      features: ['source-inline'],
+    }),
+  }),
+  handle: async ({ client }) => {
+    let document = await client.open({
+      lang: 'css',
+      text: css`
+        @import 'tailwindcss';
+        @source inline("{,{hover,focus}:}{flex,underline,bg-red-{50,{100..900.100},950}}");
+      `,
+    })
+
+    let lenses = await document.codeLenses()
+
+    expect(lenses).toEqual([
+      {
+        range: {
+          start: { line: 1, character: 15 },
+          end: { line: 1, character: 81 },
+        },
+        command: {
+          title: 'Generates 15 classes',
+          command: '',
+        },
+      },
+    ])
+  },
+})
+
+defineTest({
+  name: 'The user is warned when @source inline(…) generates a lerge amount of CSS',
+  fs: {
+    'app.css': css`
+      @import 'tailwindcss';
+    `,
+  },
+  prepare: async ({ root }) => ({
+    client: await createClient({
+      root,
+      features: ['source-inline'],
+    }),
+  }),
+  handle: async ({ client }) => {
+    let document = await client.open({
+      lang: 'css',
+      text: css`
+        @import 'tailwindcss';
+        @source inline("{,dark:}{,{sm,md,lg,xl,2xl}:}{,{hover,focus,active}:}{flex,underline,bg-red-{50,{100..900.100},950}{,/{0..100}}}");
+      `,
+    })
+
+    let lenses = await document.codeLenses()
+
+    expect(lenses).toEqual([
+      {
+        range: {
+          start: { line: 1, character: 15 },
+          end: { line: 1, character: 129 },
+        },
+        command: {
+          title: 'Generates 14,784 classes',
+          command: '',
+        },
+      },
+      {
+        range: {
+          start: { line: 1, character: 15 },
+          end: { line: 1, character: 129 },
+        },
+        command: {
+          title: 'At least 3MB of CSS',
+          command: '',
+        },
+      },
+      {
+        range: {
+          start: { line: 1, character: 15 },
+          end: { line: 1, character: 129 },
+        },
+        command: {
+          title: 'This may slow down your bundler/browser',
+          command: '',
+        },
+      },
+    ])
+  },
+})

packages/tailwindcss-language-server/tests/completions/at-config.test.js

@@ -271,6 +271,51 @@ withFixture('v4/dependencies', (c) => {
     })
   })
 
+  test.concurrent('@source not', async ({ expect }) => {
+    let result = await completion({
+      text: '@source not "',
+      lang: 'css',
+      position: {
+        line: 0,
+        character: 13,
+      },
+    })
+
+    expect(result).toEqual({
+      isIncomplete: false,
+      items: [
+        {
+          label: 'index.html',
+          kind: 17,
+          data: expect.anything(),
+          textEdit: {
+            newText: 'index.html',
+            range: { start: { line: 0, character: 13 }, end: { line: 0, character: 13 } },
+          },
+        },
+        {
+          label: 'sub-dir/',
+          kind: 19,
+          command: { command: 'editor.action.triggerSuggest', title: '' },
+          data: expect.anything(),
+          textEdit: {
+            newText: 'sub-dir/',
+            range: { start: { line: 0, character: 13 }, end: { line: 0, character: 13 } },
+          },
+        },
+        {
+          label: 'tailwind.config.js',
+          kind: 17,
+          data: expect.anything(),
+          textEdit: {
+            newText: 'tailwind.config.js',
+            range: { start: { line: 0, character: 13 }, end: { line: 0, character: 13 } },
+          },
+        },
+      ],
+    })
+  })
+
   test.concurrent('@source directory', async ({ expect }) => {
     let result = await completion({
       text: '@source "./sub-dir/',
@@ -297,6 +342,58 @@ withFixture('v4/dependencies', (c) => {
     })
   })
 
+  test.concurrent('@source not directory', async ({ expect }) => {
+    let result = await completion({
+      text: '@source not "./sub-dir/',
+      lang: 'css',
+      position: {
+        line: 0,
+        character: 23,
+      },
+    })
+
+    expect(result).toEqual({
+      isIncomplete: false,
+      items: [
+        {
+          label: 'colors.js',
+          kind: 17,
+          data: expect.anything(),
+          textEdit: {
+            newText: 'colors.js',
+            range: { start: { line: 0, character: 23 }, end: { line: 0, character: 23 } },
+          },
+        },
+      ],
+    })
+  })
+
+  test.concurrent('@source inline(…)', async ({ expect }) => {
+    let result = await completion({
+      text: '@source inline("',
+      lang: 'css',
+      position: {
+        line: 0,
+        character: 16,
+      },
+    })
+
+    expect(result).toEqual(null)
+  })
+
+  test.concurrent('@source not inline(…)', async ({ expect }) => {
+    let result = await completion({
+      text: '@source not inline("',
+      lang: 'css',
+      position: {
+        line: 0,
+        character: 20,
+      },
+    })
+
+    expect(result).toEqual(null)
+  })
+
   test.concurrent('@import "…" source(…)', async ({ expect }) => {
     let result = await completion({
       text: '@import "tailwindcss" source("',