Suggest completions for source(…)

Author: thecrypticace

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,40 @@ async function provideFileDirectiveCompletions(
     return type.isDirectory || isAllowedFile(name)
   })
 
-  return withDefaults(
+  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,
+  }))
+
+  let sourceStart = suggest === 'directory'
+    ? text.lastIndexOf('source(') + 7
+    : -1
+
+  if (sourceStart !== -1) {
+    items.push({
+      filterText: '/',
+      label: '(none)',
+      kind: 15, // Snippet
+      textEdit: {
+        range: {
+          start: {
+            line: position.line,
+            character: sourceStart,
+          },
+          end: position,
+        },
+        newText: 'none',
+      },
+    })
+  }
+
+  let wip = 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: {
@@ -1664,6 +1691,10 @@ async function provideFileDirectiveCompletions(
     },
     state.editor.capabilities.itemDefaults,
   )
+
+  console.log(JSON.stringify(wip))
+
+  return wip
 }
 
 async function provideEmmetCompletions(

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 }
   }