update css helper hovers

Author: bradlc

packages/tailwindcss-language-service/package.json

@@ -27,6 +27,7 @@
     "postcss-selector-parser": "6.0.2",
     "semver": "7.3.2",
     "sift-string": "0.0.2",
+    "stringify-object": "3.3.0",
     "vscode-emmet-helper-bundled": "0.0.1",
     "vscode-languageclient": "7.0.0",
     "vscode-languageserver": "7.0.0",

packages/tailwindcss-language-service/src/diagnostics/getInvalidConfigPathDiagnostics.ts

@@ -20,7 +20,7 @@ function pathToString(path: string | string[]): string {
   }, '')
 }
 
-function validateConfigPath(
+export function validateConfigPath(
   state: State,
   path: string | string[],
   base: string[] = []

packages/tailwindcss-language-service/src/hoverProvider.ts

@@ -7,6 +7,7 @@ import { findClassNameAtPosition } from './util/find'
 import { validateApply } from './util/validateApply'
 import { getClassNameParts } from './util/getClassNameAtPosition'
 import * as jit from './util/jit'
+import { validateConfigPath } from './diagnostics/getInvalidConfigPathDiagnostics'
 
 export async function doHover(
   state: State,
@@ -50,12 +51,14 @@ function provideCssHelperHover(state: State, document: TextDocument, position: P
     key = ['theme', ...key]
   }
 
-  const value = stringifyConfigValue(dlv(state.config, key))
+  const value = validateConfigPath(state, key).isValid
+    ? stringifyConfigValue(dlv(state.config, key))
+    : null
 
   if (value === null) return null
 
   return {
-    contents: { kind: 'plaintext', value },
+    contents: { kind: 'markdown', value: ['```plaintext', value, '```'].join('\n') },
     range: {
       start: { line: position.line, character: startChar },
       end: {

packages/tailwindcss-language-service/src/util/stringify.ts

@@ -3,17 +3,22 @@ const dlv = require('dlv')
 import escapeClassName from 'css.escape'
 import { ensureArray } from './array'
 import { remToPx } from './remToPx'
+import stringifyObject from 'stringify-object'
+import isObject from './isObject'
 
 export function stringifyConfigValue(x: any): string {
-  if (typeof x === 'string') return x
-  if (typeof x === 'number') return x.toString()
-  if (Array.isArray(x)) {
-    return x
-      .filter((y) => typeof y === 'string')
-      .filter(Boolean)
-      .join(', ')
-  }
-  return null
+  if (isObject(x)) return `${Object.keys(x).length} values`
+  if (typeof x === 'function') return 'ƒ'
+  return stringifyObject(x, {
+    inlineCharacterLimit: Infinity,
+    singleQuotes: false,
+    transform: (obj, prop, originalResult) => {
+      if (typeof obj[prop] === 'function') {
+        return 'ƒ'
+      }
+      return originalResult
+    },
+  })
 }
 
 export function stringifyCss(