Suggest @slot when inside a long form @variant rule

Author: thecrypticace

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-service/src/completionProvider.ts

@@ -1540,6 +1540,23 @@ function provideCssDirectiveCompletions(
         )})`,
       },
     })
+
+    // If we're inside an @variant directive, also add `@slot`
+    if (isInsideAtRule('variant', document, position)) {
+      items.push({
+        label: '@slot',
+        documentation: {
+          kind: 'markdown' as typeof MarkupKind.Markdown,
+          value: `Use the \`@slot\` directive to define where rules go in a custom variant.\n\n[Tailwind CSS Documentation](${docsUrl(
+            state.version,
+            'functions-and-directives/#slot',
+          )})`,
+        },
+
+        // Make sure this appears as the first at-rule
+        sortText: '-0000000',
+      })
+    }
   }
 
   return withDefaults(
@@ -1567,6 +1584,21 @@ function provideCssDirectiveCompletions(
   )
 }
 
+function isInsideAtRule(name: string, document: TextDocument, position: Position) {
+  // 1. Get all text up to the current position
+  let text = document.getText({
+    start: { line: 0, character: 0 },
+    end: position,
+  })
+
+  // 2. Find the last instance of the at-rule
+  let block = text.lastIndexOf(`@${name}`)
+  if (block === -1) return false
+
+  // 4. Count the number of open and close braces following the rule to determine if we're inside it
+  return braceLevel(text.slice(block)) > 0
+}
+
 // Provide completions for directives that take file paths
 async function provideFileDirectiveCompletions(
   state: State,