Show primitive value on hover (#25)

* add @types/lodash.flatten, bump @types/node

* add type to generated properties

* format getCurrentWord

* fix off-by-one error in getCurrentWord

* add getCssVariable function

* add getVariableInfo function

* add get-documentation-link util

* render markdown summary on hover

* remove unnecessary variable

* simplified documentation link

Author: joshfarrant

package-lock.json

@@ -38,7 +38,8 @@
   },
   "devDependencies": {
     "@github/prettier-config": "^0.0.6",
-    "@types/node": "^18.7.13",
+    "@types/lodash.flatten": "^4.4.9",
+    "@types/node": "^24.0.0",
     "@types/vscode": "^1.63.0",
     "@typescript-eslint/eslint-plugin": "^5.35.1",
     "@typescript-eslint/parser": "^5.35.1",

package.json

@@ -1,3 +1,3 @@
-export {propertiesMap} from './properties-generated'
+export {propertiesMap, type Property} from './properties-generated'
 export {aliases} from './aliases'
 export {type Suggestion} from './rules'

src/data/index.ts

@@ -30,6 +30,13 @@ fs.writeFileSync(
   filePath,
   `// Generated file, do not edit manually. Run 'npm run precompile' to regenerate.
 
-export const propertiesMap = ${JSON.stringify(propertiesMapFromRules, null, 2)}
+export type Property = {
+  name: string
+  value?: string
+  kind: 'base' | 'functional'
+  type: string
+}
+
+export const propertiesMap: Record<string, Property[]> = ${JSON.stringify(propertiesMapFromRules, null, 2)}
   `,
 )

src/data/precompile.ts

@@ -1,6 +1,13 @@
 // Generated file, do not edit manually. Run 'npm run precompile' to regenerate.
 
-export const propertiesMap = {
+export type Property = {
+  name: string
+  value?: string
+  kind: 'base' | 'functional'
+  type: string
+}
+
+export const propertiesMap: Record<string, Property[]> = {
   "padding": [
     {
       "name": "--base-size-112",

src/data/properties-generated.ts

@@ -16,6 +16,9 @@ import camelCase from 'lodash.camelcase'
 import {getCurrentWord} from './utils/get-current-word'
 import {isColor} from './utils/is-color'
 import {getSuggestions} from './suggestions'
+import {getCssVariable} from './utils/get-css-variable'
+import {getVariableInfo} from './utils/get-variable-info'
+import {getDocumentationLink} from './utils/get-documentation-link'
 
 // Create a connection for the server, using Node's IPC as a transport.
 // Also include all preview / proposed LSP features.
@@ -152,19 +155,40 @@ connection.onHover(params => {
   if (!doc) return null
 
   const offset = doc.offsetAt(params.position)
-  const currentWord = getCurrentWord(doc, offset).slice(1)
-  if (!currentWord) return null
+  const variableName = getCssVariable(doc, offset)
 
-  const currentVariable = null
-  // TODO: replace this with lookup from styleLint output
-  // flatten(Object.values(properties)).find(variable => variable.name === currentWord)
+  if (!variableName) return null
+
+  const variableInfo = getVariableInfo(variableName)
+
+  if (!variableInfo) return null
+
+  let markdown = `**\`${variableInfo.name}\`**\n\n`
+  markdown += `\n---\n\n`
+
+  markdown += `- **Kind:** [${variableInfo.kind}](https://primer.style/product/primitives/token-names/#${variableInfo.kind})\n`
+  markdown += `- **Type:** ${variableInfo.type}\n`
+  markdown += `\n---\n\n`
 
-  if (currentVariable) {
-    // TODO: would be nice to put docs link here as well
-    return {contents: currentVariable.value} as Hover
+  if (variableInfo.themeValues && Object.keys(variableInfo.themeValues).length > 0) {
+    for (const [themeName, value] of Object.entries(variableInfo.themeValues)) {
+      markdown += `- **${themeName}:** \`${value}\`\n`
+    }
+  } else {
+    markdown += `**Value:** \`${variableInfo.value}\`\n\n`
   }
 
-  return null
+  markdown += `\n---\n\n`
+
+  const docLink = getDocumentationLink(variableInfo.type)
+  markdown += `[View documentation](${docLink})\n`
+
+  return {
+    contents: {
+      kind: 'markdown',
+      value: markdown,
+    },
+  } as Hover
 })
 
 connection.onDefinition(params => {

src/language-server.ts

@@ -0,0 +1,16 @@
+import {TextDocument} from 'vscode-languageserver-textdocument'
+import {getCurrentWord} from './get-current-word'
+
+/**
+ * Extracts a CSS variable name from the current cursor position.
+ * @returns The CSS variable name (e.g., '--color-red') or null if not found
+ */
+export function getCssVariable(document: TextDocument, offset: number): `--${string}` | null {
+  const currentWord = getCurrentWord(document, offset)
+
+  const match = currentWord.match(/--[a-zA-Z0-9-]+/)
+
+  if (!match) return null
+
+  return match[0] as `--${string}`
+}

src/utils/get-css-variable.ts

@@ -1,17 +1,17 @@
-import { TextDocument } from 'vscode-languageserver-textdocument';
+import {TextDocument} from 'vscode-languageserver-textdocument'
 
 export function getCurrentWord(document: TextDocument, offset: number): string {
-  let left = offset - 1;
-  let right = offset + 1;
-  const text = document.getText();
+  let left = offset - 1
+  let right = offset + 1
+  const text = document.getText()
 
   while (left >= 0 && ' \t\n\r":{[()]},*>+'.indexOf(text.charAt(left)) === -1) {
-    left--;
+    left--
   }
 
   while (right <= text.length && ' \t\n\r":{[()]},*>+'.indexOf(text.charAt(right)) === -1) {
-    right++;
+    right++
   }
 
-  return text.substring(left, right);
+  return text.substring(left + 1, right)
 }

src/utils/get-current-word.ts

@@ -0,0 +1,10 @@
+const DOC_CONFIG = {
+  color: 'https://primer.style/product/primitives/color/',
+  dimension: 'https://primer.style/product/primitives/size/',
+  typography: 'https://primer.style/product/primitives/typography/',
+}
+
+export const getDocumentationLink = (variableName: string, type: string): string => {
+  const typeKey = type === 'font' ? 'typography' : type
+  return DOC_CONFIG[typeKey] ?? 'https://primer.style/product/primitives/'
+}

src/utils/get-documentation-link.ts

@@ -0,0 +1,50 @@
+import flatten from 'lodash.flatten'
+import {propertiesMap, type Property} from '../data'
+import lightTheme from '@primer/primitives/dist/styleLint/functional/themes/light.json'
+import darkTheme from '@primer/primitives/dist/styleLint/functional/themes/dark.json'
+import darkDimmedTheme from '@primer/primitives/dist/styleLint/functional/themes/dark-dimmed.json'
+import darkHighContrastTheme from '@primer/primitives/dist/styleLint/functional/themes/dark-high-contrast.json'
+import lightHighContrastTheme from '@primer/primitives/dist/styleLint/functional/themes/light-high-contrast.json'
+import {isColor} from './is-color'
+
+const allThemes = {
+  Light: lightTheme,
+  Dark: darkTheme,
+  'Dark Dimmed': darkDimmedTheme,
+  'Dark High Contrast': darkHighContrastTheme,
+  'Light High Contrast': lightHighContrastTheme,
+}
+
+export type VariableInfo = Property & {
+  themeValues?: Record<string, string>
+}
+
+export function getVariableInfo(variableName: `--${string}`): VariableInfo | null {
+  const cleanName = variableName.slice(2)
+
+  const allVariables = flatten(Object.values(propertiesMap))
+  const variable = allVariables.find(v => v.name === variableName)
+
+  if (!variable) return null
+
+  const info: VariableInfo = {...variable}
+
+  if (info.type === 'color' || (info.value && isColor(info.value))) {
+    info.themeValues = {}
+
+    for (const [themeName, themeData] of Object.entries(allThemes)) {
+      const themeVariable = themeData[cleanName]
+      if (themeVariable && themeVariable.$value) {
+        info.themeValues[themeName] = themeVariable.$value
+      }
+    }
+
+    // If the value is just a placeholder (#), use the first theme value as display value
+    if (info.value === '#' && info.themeValues && Object.keys(info.themeValues).length > 0) {
+      const firstThemeValue = Object.values(info.themeValues)[0]
+      info.value = firstThemeValue
+    }
+  }
+
+  return info
+}