Add document links and completions for @plugin

Author: thecrypticace

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

@@ -163,4 +163,66 @@ withFixture('v4/dependencies', (c) => {
       ],
     })
   })
+
+  test.concurrent('@plugin', async ({ expect }) => {
+    let result = await completion({
+      text: '@plugin "',
+      lang: 'css',
+      position: {
+        line: 0,
+        character: 9,
+      },
+    })
+
+    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: 9 }, end: { line: 0, character: 9 } },
+          },
+        },
+        {
+          label: 'tailwind.config.js',
+          kind: 17,
+          data: expect.anything(),
+          textEdit: {
+            newText: 'tailwind.config.js',
+            range: { start: { line: 0, character: 9 }, end: { line: 0, character: 9 } },
+          },
+        },
+      ],
+    })
+  })
+
+  test.concurrent('@plugin directory', async ({ expect }) => {
+    let result = await completion({
+      text: '@plugin "./sub-dir/',
+      lang: 'css',
+      position: {
+        line: 0,
+        character: 19,
+      },
+    })
+
+    expect(result).toEqual({
+      isIncomplete: false,
+      items: [
+        {
+          label: 'colors.js',
+          kind: 17,
+          data: expect.anything(),
+          textEdit: {
+            newText: 'colors.js',
+            range: { start: { line: 0, character: 19 }, end: { line: 0, character: 19 } },
+          },
+        },
+      ],
+    })
+  })
 })

packages/tailwindcss-language-server/tests/document-links/document-links.test.js

@@ -78,4 +78,30 @@ withFixture('v4/basic', (c) => {
       },
     ],
   })
+
+  testDocumentLinks('plugin: file exists', {
+    text: '@plugin "plugin.js";',
+    lang: 'css',
+    expected: [
+      {
+        target: `file://${path
+          .resolve('./tests/fixtures/v4/basic/plugin.js')
+          .replace(/@/g, '%40')}`,
+        range: { start: { line: 0, character: 8 }, end: { line: 0, character: 19 } },
+      },
+    ],
+  })
+
+  testDocumentLinks('plugin: file does not exist', {
+    text: '@plugin "does-not-exist.js";',
+    lang: 'css',
+    expected: [
+      {
+        target: `file://${path
+          .resolve('./tests/fixtures/v4/basic/does-not-exist.js')
+          .replace(/@/g, '%40')}`,
+        range: { start: { line: 0, character: 8 }, end: { line: 0, character: 27 } },
+      },
+    ],
+  })
 })

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

@@ -1536,7 +1536,9 @@ async function provideFileDirectiveCompletions(
     return null
   }
 
-  let pattern = /@config\s*(?<partial>'[^']*|"[^"]*)$/
+  let pattern = state.v4
+    ? /@(config|plugin)\s*(?<partial>'[^']*|"[^"]*)$/
+    : /@config\s*(?<partial>'[^']*|"[^"]*)$/
 
   let text = document.getText({ start: { line: position.line, character: 0 }, end: position })
   let match = text.match(pattern)

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

@@ -17,6 +17,12 @@ export function getDocumentLinks(
     /@config\s*(?<path>'[^']+'|"[^"]+")/g,
   ]
 
+  if (state.v4) {
+    patterns.push(
+      /@plugin\s*(?<path>'[^']+'|"[^"]+")/g,
+    )
+  }
+
   return getDirectiveLinks(state, document, patterns, resolveTarget)
 }