From 7b8ee549de91d6110e638be064471be25b57845a Mon Sep 17 00:00:00 2001
From: Brad Cornes <brad@parall.ax>
Date: Sun, 12 Apr 2020 17:53:22 +0100
Subject: [PATCH] add initial css helper hover

---
 .../src/providers/hoverProvider.ts            | 64 +++++++++++++++++--
 .../src/util/stringify.ts                     |  2 +-
 2 files changed, 60 insertions(+), 6 deletions(-)

diff --git a/packages/tailwindcss-language-server/src/providers/hoverProvider.ts b/packages/tailwindcss-language-server/src/providers/hoverProvider.ts
index 7b4f9fe..5ce7921 100644
--- a/packages/tailwindcss-language-server/src/providers/hoverProvider.ts
+++ b/packages/tailwindcss-language-server/src/providers/hoverProvider.ts
@@ -4,22 +4,73 @@ import {
   getClassNameAtPosition,
   getClassNameParts,
 } from '../util/getClassNameAtPosition'
-import { stringifyCss } from '../util/stringify'
+import { stringifyCss, stringifyConfigValue } from '../util/stringify'
 const dlv = require('dlv')
 import escapeClassName from 'css.escape'
 import { isHtmlContext } from '../util/html'
+import { isCssContext } from '../util/css'
 
 export function provideHover(
   state: State,
   params: TextDocumentPositionParams
 ): Hover {
-  let doc = state.editor.documents.get(params.textDocument.uri)
+  return (
+    provideClassNameHover(state, params) || provideCssHelperHover(state, params)
+  )
+}
 
-  if (isHtmlContext(doc, params.position)) {
-    return provideClassNameHover(state, params)
+function provideCssHelperHover(
+  state: State,
+  { textDocument, position }: TextDocumentPositionParams
+): Hover {
+  let doc = state.editor.documents.get(textDocument.uri)
+
+  if (!isCssContext(doc, position)) return null
+
+  const line = doc.getText({
+    start: { line: position.line, character: 0 },
+    end: { line: position.line + 1, character: 0 },
+  })
+
+  const match = line.match(
+    /(?<helper>theme|config)\((?<quote>['"])(?<key>[^)]+)\k<quote>\)/
+  )
+
+  if (match === null) return null
+
+  const startChar = match.index + 7
+  const endChar = startChar + match.groups.key.length
+
+  if (position.character < startChar || position.character >= endChar) {
+    return null
   }
 
-  return null
+  let key = match.groups.key
+    .split(/(\[[^\]]+\]|\.)/)
+    .filter(Boolean)
+    .filter((x) => x !== '.')
+    .map((x) => x.replace(/^\[([^\]]+)\]$/, '$1'))
+
+  if (key.length === 0) return null
+
+  if (match.groups.helper === 'theme') {
+    key = ['theme', ...key]
+  }
+
+  const value = stringifyConfigValue(dlv(state.config, key))
+
+  if (value === null) return null
+
+  return {
+    contents: { kind: 'plaintext', value },
+    range: {
+      start: { line: position.line, character: startChar },
+      end: {
+        line: position.line,
+        character: endChar,
+      },
+    },
+  }
 }
 
 function provideClassNameHover(
@@ -27,6 +78,9 @@ function provideClassNameHover(
   { textDocument, position }: TextDocumentPositionParams
 ): Hover {
   let doc = state.editor.documents.get(textDocument.uri)
+
+  if (!isHtmlContext(doc, position)) return null
+
   let hovered = getClassNameAtPosition(doc, position)
   if (!hovered) return null
 
diff --git a/packages/tailwindcss-language-server/src/util/stringify.ts b/packages/tailwindcss-language-server/src/util/stringify.ts
index 50b82a1..e8b1b7d 100644
--- a/packages/tailwindcss-language-server/src/util/stringify.ts
+++ b/packages/tailwindcss-language-server/src/util/stringify.ts
@@ -9,7 +9,7 @@ export function stringifyConfigValue(x: any): string {
       .filter(Boolean)
       .join(', ')
   }
-  return ''
+  return null
 }
 
 export function stringifyCss(