add documentation link to hovers

Author: bradlc

package-lock.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@ctrl/tinycolor": "^3.1.4",
     "@types/moo": "^0.5.3",
+    "abort-controller": "^3.0.0",
     "css.escape": "^1.5.1",
     "detect-indent": "^6.0.0",
     "dlv": "^1.1.3",

packages/tailwindcss-language-service/package-lock.json

@@ -7,6 +7,7 @@ import { findClassNameAtPosition } from './util/find'
 import { validateApply } from './util/validateApply'
 import { getClassNameParts } from './util/getClassNameAtPosition'
 import { getDocumentSettings } from './util/getDocumentSettings'
+import { getDocsForClassName } from './util/docs'
 
 export async function doHover(
   state: State,
@@ -103,10 +104,19 @@ async function provideClassNameHover(
 
   if (!css) return null
 
+  const docs = await getDocsForClassName(parts[parts.length - 1], 200)
+
   return {
     contents: {
-      language: 'css',
-      value: css,
+      kind: 'markdown',
+      value: [
+        '```css',
+        css,
+        '```',
+        ...(docs
+          ? ['', '---', '', `[Tailwind CSS Documentation](${docs.url})`]
+          : []),
+      ].join('\n'),
     },
     range: className.range,
   }

packages/tailwindcss-language-service/package.json

@@ -1,5 +1,11 @@
 import fetch from 'isomorphic-unfetch'
 import Cache from 'tmp-cache'
+import AbortController from 'abort-controller'
+
+interface Doc {
+  title: string
+  url: string
+}
 
 const cache = new Cache(30)
 
@@ -52,3 +58,57 @@ export async function searchDocs(
       : {}),
   }))
 }
+
+const classNameCache = {}
+
+export async function getDocsForClassName(
+  className: string,
+  timeoutMs?: number
+): Promise<Doc | undefined> {
+  if (classNameCache[className]) return classNameCache[className]
+
+  let hit
+  const controller = new AbortController()
+  const timeout = timeoutMs
+    ? setTimeout(() => controller.abort(), timeoutMs)
+    : undefined
+
+  try {
+    const hits = await searchDocs(
+      className,
+      {
+        hitsPerPage: 20,
+        attributesToRetrieve: [
+          'hierarchy.lvl1',
+          'hierarchy.lvl4',
+          'type',
+          'url',
+        ],
+        attributesToSnippet: [],
+        facetFilters: 'version:v2',
+        distinct: 1,
+      },
+      { signal: controller.signal }
+    )
+
+    hit = hits.find((hit) => {
+      return (
+        hit.type === 'lvl4' &&
+        hit.url.endsWith('#class-reference') &&
+        hit.hierarchy.lvl4 === className
+      )
+    })
+  } finally {
+    clearTimeout(timeout)
+  }
+
+  if (hit) {
+    classNameCache[className] = {
+      title: hit.hierarchy.lvl1,
+      url: hit.url.replace(/\/?#class-reference$/, ''),
+    }
+    return classNameCache[className]
+  }
+
+  return undefined
+}