Add more

Author: thecrypticace

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

@@ -983,7 +983,7 @@ defineTest({
 })
 
 defineTest({
-  name: 'Completions for outline and border utilities have simplified details',
+  name: 'Completions for several utilities have simplified details',
   fs: {
     'app.css': css`
       @import 'tailwindcss';
@@ -993,24 +993,59 @@ defineTest({
   handle: async ({ client }) => {
     let document = await client.open({
       lang: 'html',
-      text: html`<div class="border-0 outline-0"></div>`,
+      text: html`<div class=""></div>`,
     })
 
-    // <div class="border-0 outline-0"></div>
-    //                    ^
-    let completionA = await document.completions({ line: 0, character: 20 })
-
-    // <div class="border-0 outline-0"></div>
-    //                              ^
-    let completionB = await document.completions({ line: 0, character: 30 })
-
-    let border = completionA?.items.find((item) => item.label === 'border-0')
-    let outline = completionB?.items.find((item) => item.label === 'outline-0')
-
-    let borderResolved = await client.conn.sendRequest('completionItem/resolve', border)
-    let outlineResolved = await client.conn.sendRequest('completionItem/resolve', outline)
+    // <div class=""></div>
+    //            ^
+    let list = await document.completions({ line: 0, character: 12 })
+    let items = list?.items ?? []
+
+    let utilities = new Set([
+      'border-0',
+      'outline-0',
+      'leading-0',
+      'duration-1000',
+      'font-bold',
+      'ease-linear',
+      'ease-initial',
+
+      'space-x-0',
+      'space-y-0',
+      'divide-x-0',
+      'divide-y-0',
+
+      'tracking-wide',
+
+      'from-red-500',
+      'via-red-500',
+      'to-red-500',
+    ])
+
+    items = items.filter((item) => utilities.has(item.label))
+
+    items = await Promise.all(
+      items.map((item) => client.conn.sendRequest('completionItem/resolve', item)),
+    )
 
-    expect(borderResolved).toMatchObject({ detail: 'border-width: 0px;' })
-    expect(outlineResolved).toMatchObject({ detail: 'outline-width: 0px;' })
+    let details = items.map((item) => item.detail)
+
+    expect(details).toEqual([
+      'border-width: 0px;',
+      'border-inline-start-width: calc(0px * var(--tw-divide-x-reverse)); border-inline-end-width: calc(0px * calc(1 - var(--tw-divide-x-reverse)));',
+      'border-top-width: calc(0px * var(--tw-divide-y-reverse)); border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));',
+      'transition-duration: 1000ms;',
+      '--tw-ease: initial;',
+      'transition-timing-function: linear;',
+      'font-weight: 700;',
+      '--tw-gradient-from: oklch(63.7% 0.237 25.331);',
+      'line-height: 0rem /* 0px */;',
+      'outline-width: 0px;',
+      'margin-inline-start: calc(0rem /* 0px */ * var(--tw-space-x-reverse)); margin-inline-end: calc(0rem /* 0px */ * calc(1 - var(--tw-space-x-reverse)));',
+      'margin-block-start: calc(0rem /* 0px */ * var(--tw-space-y-reverse)); margin-block-end: calc(0rem /* 0px */ * calc(1 - var(--tw-space-y-reverse)));',
+      '--tw-gradient-to: oklch(63.7% 0.237 25.331);',
+      'letter-spacing: 0.025em;',
+      '--tw-gradient-via: oklch(63.7% 0.237 25.331);',
+    ])
   },
 })