Suggest completions for source(…)

Author: thecrypticace

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

@@ -296,4 +296,90 @@ withFixture('v4/dependencies', (c) => {
       ],
     })
   })
+
+  test.concurrent('@import "…" source(…)', async ({ expect }) => {
+    let result = await completion({
+      text: '@import "tailwindcss" source("',
+      lang: 'css',
+      position: {
+        line: 0,
+        character: 30,
+      },
+    })
+
+    expect(result).toEqual({
+      isIncomplete: false,
+      items: [
+        {
+          label: 'sub-dir/',
+          kind: 19,
+          command: { command: 'editor.action.triggerSuggest', title: '' },
+          data: expect.anything(),
+          textEdit: {
+            newText: 'sub-dir/',
+            range: { start: { line: 0, character: 30 }, end: { line: 0, character: 30 } },
+          },
+        },
+      ],
+    })
+  })
+
+  test.concurrent('@tailwind utilities source(…)', async ({ expect }) => {
+    let result = await completion({
+      text: '@tailwind utilities source("',
+      lang: 'css',
+      position: {
+        line: 0,
+        character: 28,
+      },
+    })
+
+    expect(result).toEqual({
+      isIncomplete: false,
+      items: [
+        {
+          label: 'sub-dir/',
+          kind: 19,
+          command: { command: 'editor.action.triggerSuggest', title: '' },
+          data: expect.anything(),
+          textEdit: {
+            newText: 'sub-dir/',
+            range: { start: { line: 0, character: 28 }, end: { line: 0, character: 28 } },
+          },
+        },
+      ],
+    })
+  })
+
+  test.concurrent('@import "…" source(…) directory', async ({ expect }) => {
+    let result = await completion({
+      text: '@import "tailwindcss" source("sub-dir/',
+      lang: 'css',
+      position: {
+        line: 0,
+        character: 38,
+      },
+    })
+
+    expect(result).toEqual({
+      isIncomplete: false,
+      items: [],
+    })
+  })
+
+  test.concurrent('@tailwind utilities source(…) directory', async ({ expect }) => {
+    let result = await completion({
+      text: '@tailwind utilities source("sub-dir/',
+      lang: 'css',
+      position: {
+        line: 0,
+        character: 36,
+      },
+    })
+
+    expect(result).toEqual({
+      isIncomplete: false,
+      items: [],
+    })
+  })
 })

packages/tailwindcss-language-service/src/completionProvider.ts

@@ -1626,6 +1626,9 @@ async function provideFileDirectiveCompletions(
 
     if (suggest === 'source') return IS_TEMPLATE_SOURCE.test(name)
 
+    // Files are not allowed but directories are
+    if (suggest === 'directory') return false
+
     return false
   }
 
@@ -1638,16 +1641,16 @@ async function provideFileDirectiveCompletions(
     return type.isDirectory || isAllowedFile(name)
   })
 
+  let items: CompletionItem[] = entries.map(([name, type]) => ({
+    label: type.isDirectory ? name + '/' : name,
+    kind: type.isDirectory ? 19 : 17,
+    command: type.isDirectory ? { command: 'editor.action.triggerSuggest', title: '' } : undefined,
+  }))
+
   return withDefaults(
     {
       isIncomplete: false,
-      items: entries.map(([name, type]) => ({
-        label: type.isDirectory ? name + '/' : name,
-        kind: type.isDirectory ? 19 : 17,
-        command: type.isDirectory
-          ? { command: 'editor.action.triggerSuggest', title: '' }
-          : undefined,
-      })),
+      items,
     },
     {
       data: {

packages/tailwindcss-language-service/src/completions/file-paths.test.ts

@@ -0,0 +1,13 @@
+import { expect, test } from 'vitest'
+import { findFileDirective } from './file-paths'
+
+let findV3 = (text: string) => findFileDirective({ enabled: true, v4: false }, text)
+let findV4 = (text: string) => findFileDirective({ enabled: true, v4: true }, text)
+
+test('…', async () => {
+  await expect(findV4('@import "tailwindcss" source("./')).resolves.toEqual({
+    directive: 'import',
+    partial: './',
+    suggest: 'directory',
+  })
+})

packages/tailwindcss-language-service/src/completions/file-paths.ts

@@ -4,20 +4,27 @@ import type { State } from '../util/state'
 const PATTERN_CUSTOM_V4 = /@(?<directive>config|plugin|source)\s*(?<partial>'[^']*|"[^"]*)$/
 const PATTERN_CUSTOM_V3 = /@(?<directive>config)\s*(?<partial>'[^']*|"[^"]*)$/
 
+// @import … source('…')
+// @tailwind utilities source('…')
+const PATTERN_IMPORT_SOURCE = /@(?<directive>import)\s*(?<path>'[^']*'|"[^"]*")\s*source\((?<partial>'[^']*|"[^"]*)$/
+const PATTERN_UTIL_SOURCE = /@(?<directive>tailwind)\s+utilities\s+source\((?<partial>'[^']*|"[^"]*)?$/
+
 export type FileDirective = {
   directive: string
   partial: string
-  suggest: 'script' | 'source'
+  suggest: 'script' | 'source' | 'directory'
 }
 
 export async function findFileDirective(state: State, text: string): Promise<FileDirective | null> {
   if (state.v4) {
     let match = text.match(PATTERN_CUSTOM_V4)
+      ?? text.match(PATTERN_IMPORT_SOURCE)
+      ?? text.match(PATTERN_UTIL_SOURCE)
 
     if (!match) return null
 
     let directive = match.groups.directive
-    let partial = match.groups.partial.slice(1) // remove leading quote
+    let partial = match.groups.partial?.slice(1) ?? "" // remove leading quote
 
     // Most suggestions are for JS files so we'll default to that
     let suggest: FileDirective['suggest'] = 'script'
@@ -27,6 +34,12 @@ export async function findFileDirective(state: State, text: string): Promise<Fil
       suggest = 'source'
     }
 
+    // If we're looking at @import … source('…') or @tailwind … source('…') then
+    // we want to list directories instead of files
+    else if (directive === 'import' || directive === 'tailwind') {
+      suggest = 'directory'
+    }
+
     return { directive, partial, suggest }
   }