Improve support for new v4 at rules

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

@@ -381,7 +381,7 @@ async function validateTextDocument(textDocument: TextDocument): Promise<void> {
     .filter((diagnostic) => {
       if (
         diagnostic.code === 'unknownAtRules' &&
-        /Unknown at rule @(tailwind|apply|config|theme|plugin|source)/.test(diagnostic.message)
+        /Unknown at rule @(tailwind|apply|config|theme|plugin|source|utility|variant)/.test(diagnostic.message)
       ) {
         return false
       }

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

@@ -223,18 +223,22 @@ export async function createProjectService(
         try {
           directory = path.resolve(path.dirname(getFileFsPath(document.uri)), directory)
           let dirents = await fs.promises.readdir(directory, { withFileTypes: true })
+
           let result: Array<[string, { isDirectory: boolean }] | null> = await Promise.all(
             dirents.map(async (dirent) => {
               let isDirectory = dirent.isDirectory()
-              return (await isExcluded(
+              let shouldRemove = await isExcluded(
                 state,
                 document,
                 path.join(directory, dirent.name, isDirectory ? '/' : ''),
-              ))
-                ? null
-                : [dirent.name, { isDirectory }]
+              )
+
+              if (shouldRemove) return null
+
+              return [dirent.name, { isDirectory }]
             }),
           )
+
           return result.filter((item) => item !== null)
         } catch {
           return []

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

@@ -82,3 +82,218 @@ withFixture('dependencies', (c) => {
     })
   })
 })
+
+withFixture('v4/dependencies', (c) => {
+  async function completion({
+    lang,
+    text,
+    position,
+    context = {
+      triggerKind: 1,
+    },
+    settings,
+  }) {
+    let textDocument = await c.openDocument({ text, lang, settings })
+
+    return c.sendRequest('textDocument/completion', {
+      textDocument,
+      position,
+      context,
+    })
+  }
+
+  test.concurrent('@config', async ({ expect }) => {
+    let result = await completion({
+      text: '@config "',
+      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('@config directory', async ({ expect }) => {
+    let result = await completion({
+      text: '@config "./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 } },
+          },
+        },
+      ],
+    })
+  })
+
+  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 } },
+          },
+        },
+      ],
+    })
+  })
+
+  test.concurrent('@source', async ({ expect }) => {
+    let result = await completion({
+      text: '@source "',
+      lang: 'css',
+      position: {
+        line: 0,
+        character: 9,
+      },
+    })
+
+    expect(result).toEqual({
+      isIncomplete: false,
+      items: [
+        {
+          label: 'index.html',
+          kind: 17,
+          data: expect.anything(),
+          textEdit: {
+            newText: 'index.html',
+            range: { start: { line: 0, character: 9 }, end: { line: 0, character: 9 } },
+          },
+        },
+        {
+          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('@source directory', async ({ expect }) => {
+    let result = await completion({
+      text: '@source "./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/completions/completions.test.js

@@ -477,6 +477,36 @@ withFixture('v4/basic', (c) => {
     expect(result.items.filter((item) => item.label.startsWith('--')).length).toBe(23)
   })
 
+  test.concurrent('@slot is suggeted inside @variant', async ({ expect }) => {
+    let result = await completion({
+      lang: 'css',
+      text: '@',
+      position: { line: 0, character: 1 },
+    })
+
+    // Make sure `@slot` is NOT suggested by default
+    expect(result.items.length).toBe(10)
+    expect(result.items).not.toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ kind: 14, label: '@slot', sortText: '-0000000' }),
+      ]),
+    )
+
+    result = await completion({
+      lang: 'css',
+      text: '@variant foo {\n@',
+      position: { line: 1, character: 1 },
+    })
+
+    // Make sure `@slot` is suggested
+    expect(result.items.length).toBe(11)
+    expect(result.items).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ kind: 14, label: '@slot', sortText: '-0000000' }),
+      ]),
+    )
+  })
+
   test.concurrent('resolve', async ({ expect }) => {
     let result = await completion({
       text: '<div class="">',

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

@@ -40,3 +40,94 @@ withFixture('basic', (c) => {
     ],
   })
 })
+
+withFixture('v4/basic', (c) => {
+  async function testDocumentLinks(name, { text, lang, expected }) {
+    test.concurrent(name, async ({ expect }) => {
+      let textDocument = await c.openDocument({ text, lang })
+      let res = await c.sendRequest('textDocument/documentLink', {
+        textDocument,
+      })
+
+      expect(res).toEqual(expected)
+    })
+  }
+
+  testDocumentLinks('config: file exists', {
+    text: '@config "tailwind.config.js";',
+    lang: 'css',
+    expected: [
+      {
+        target: `file://${path
+          .resolve('./tests/fixtures/v4/basic/tailwind.config.js')
+          .replace(/@/g, '%40')}`,
+        range: { start: { line: 0, character: 8 }, end: { line: 0, character: 28 } },
+      },
+    ],
+  })
+
+  testDocumentLinks('config: file does not exist', {
+    text: '@config "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 } },
+      },
+    ],
+  })
+
+  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 } },
+      },
+    ],
+  })
+
+  testDocumentLinks('source: file exists', {
+    text: '@source "index.html";',
+    lang: 'css',
+    expected: [
+      {
+        target: `file://${path
+          .resolve('./tests/fixtures/v4/basic/index.html')
+          .replace(/@/g, '%40')}`,
+        range: { start: { line: 0, character: 8 }, end: { line: 0, character: 20 } },
+      },
+    ],
+  })
+
+  testDocumentLinks('source: file does not exist', {
+    text: '@source "does-not-exist.html";',
+    lang: 'css',
+    expected: [
+      {
+        target: `file://${path
+          .resolve('./tests/fixtures/v4/basic/does-not-exist.html')
+          .replace(/@/g, '%40')}`,
+        range: { start: { line: 0, character: 8 }, end: { line: 0, character: 29 } },
+      },
+    ],
+  })
+})

packages/tailwindcss-language-server/tests/fixtures/v4/dependencies/app.css

@@ -0,0 +1 @@
+@import 'tailwindcss';

packages/tailwindcss-language-server/tests/fixtures/v4/dependencies/index.html

@@ -0,0 +1 @@
+<div class="underline">foo</div>