Improve file path completions

Author: thecrypticace

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

@@ -37,6 +37,7 @@ import {
   addPixelEquivalentsToValue,
 } from './util/pixelEquivalents'
 import { customClassesIn } from './util/classes'
+import { IS_SCRIPT_SOURCE, IS_TEMPLATE_SOURCE } from './metadata/extensions'
 import * as postcss from 'postcss'
 
 let isUtil = (className) =>
@@ -1537,30 +1538,38 @@ async function provideFileDirectiveCompletions(
   }
 
   let pattern = state.v4
-    ? /@(config|plugin|source)\s*(?<partial>'[^']*|"[^"]*)$/
-    : /@config\s*(?<partial>'[^']*|"[^"]*)$/
+    ? /@(?<directive>config|plugin|source)\s*(?<partial>'[^']*|"[^"]*)$/
+    : /@(?<directive>config)\s*(?<partial>'[^']*|"[^"]*)$/
 
   let text = document.getText({ start: { line: position.line, character: 0 }, end: position })
   let match = text.match(pattern)
   if (!match) {
     return null
   }
+  let directive = match.groups.directive
   let partial = match.groups.partial.slice(1) // remove quote
   let valueBeforeLastSlash = partial.substring(0, partial.lastIndexOf('/'))
   let valueAfterLastSlash = partial.substring(partial.lastIndexOf('/') + 1)
 
+  let entries = await state.editor.readDirectory(document, valueBeforeLastSlash || '.')
+
+  let isAllowedFile = directive === 'source' ? IS_TEMPLATE_SOURCE : IS_SCRIPT_SOURCE
+
+  // Only show directories and JavaScript/TypeScript files
+  entries = entries.filter(([name, type]) => {
+    return type.isDirectory || isAllowedFile.test(name)
+  })
+
   return withDefaults(
     {
       isIncomplete: false,
-      items: (await state.editor.readDirectory(document, valueBeforeLastSlash || '.'))
-        .filter(([name, type]) => type.isDirectory || /\.c?js$/.test(name))
-        .map(([name, type]) => ({
-          label: type.isDirectory ? name + '/' : name,
-          kind: type.isDirectory ? 19 : 17,
-          command: type.isDirectory
-            ? { command: 'editor.action.triggerSuggest', title: '' }
-            : undefined,
-        })),
+      items: entries.map(([name, type]) => ({
+        label: type.isDirectory ? name + '/' : name,
+        kind: type.isDirectory ? 19 : 17,
+        command: type.isDirectory
+          ? { command: 'editor.action.triggerSuggest', title: '' }
+          : undefined,
+      })),
     },
     {
       data: {

packages/tailwindcss-language-service/src/metadata/extensions.ts

@@ -0,0 +1,76 @@
+let scriptExtensions = [
+  // JS
+  'js',
+  'cjs',
+  'mjs',
+  'ts',
+  'mts',
+  'cts',
+]
+
+let templateExtensions = [
+  // HTML
+  'html',
+  'pug',
+
+  // Glimmer
+  'gjs',
+  'gts',
+
+  // JS
+  'astro',
+  'cjs',
+  'cts',
+  'jade',
+  'js',
+  'jsx',
+  'mjs',
+  'mts',
+  'svelte',
+  'ts',
+  'tsx',
+  'vue',
+
+  // Markdown
+  'md',
+  'mdx',
+
+  // ASP
+  'aspx',
+  'razor',
+
+  // Handlebars
+  'handlebars',
+  'hbs',
+  'mustache',
+
+  // PHP
+  'php',
+  'twig',
+
+  // Ruby
+  'erb',
+  'haml',
+  'liquid',
+  'rb',
+  'rhtml',
+  'slim',
+
+  // Elixir / Phoenix
+  'eex',
+  'heex',
+
+  // Nunjucks
+  'njk',
+  'nunjucks',
+
+  // Python
+  'py',
+  'tpl',
+
+  // Rust
+  'rs',
+]
+
+export const IS_SCRIPT_SOURCE = new RegExp(`\\.(${scriptExtensions.join('|')})$`)
+export const IS_TEMPLATE_SOURCE = new RegExp(`\\.(${templateExtensions.join('|')})$`)