fix: renderTokenColorPreview for semanticTokens

add a guard on the condition name to check it exists

chore: use noUncheckedIndexedAccess

feat: semantic tokens color preview on completion details
also remove completion cache
feat: {shorthand} is for {propName} completion details

Author: astahmer

packages/language-server/src/features/color-hints.ts

@@ -36,8 +36,11 @@ export function registerColorHints(extension: PandaExtension) {
         // Add 1 color hint for each condition
         if (match.token.extensions.conditions) {
           if (settings['color-hints.semantic-tokens.enabled']) {
-            Object.values(match.token.extensions.conditions).forEach((value) => {
+            Object.entries(match.token.extensions.conditions).forEach(([cond, value]) => {
+              if (!ctx.conditions.get(cond) && cond !== 'base') return
               const [tokenRef] = ctx.tokens.getReferences(value)
+              if (!tokenRef) return
+
               const color = color2kToVsCodeColor(tokenRef.value)
               if (!color) return
 

packages/language-server/src/features/completion.ts

@@ -3,7 +3,8 @@ import type { PandaExtension } from '../index'
 import { onError } from '../tokens/error'
 
 export function registerCompletion(extension: PandaExtension) {
-  const { connection, documents, documentReady, getClosestCompletionList, getPandaSettings } = extension
+  const { connection, documents, documentReady, getClosestCompletionList, getCompletionDetails, getPandaSettings } =
+    extension
 
   // This handler provides the initial list of the completion items.
   connection.onCompletion(
@@ -29,5 +30,8 @@ export function registerCompletion(extension: PandaExtension) {
   )
 
   // This handler resolves additional information for the item selected in the completion list.
-  connection.onCompletionResolve((item) => item)
+  connection.onCompletionResolve(async (item) => {
+    await getCompletionDetails(item)
+    return item
+  })
 }

packages/language-server/src/setup-builder.ts

@@ -75,7 +75,7 @@ export function setupBuilder(
     )
     console.log('🐼 Workspaces builders ready !')
 
-    if (configPathList.length === 1) {
+    if (configPathList.length === 1 && configPathList[0]) {
       return builderResolver.isContextSynchronizing(configPathList[0])
     }
   }

packages/language-server/src/tokens/expand-token-fn.ts

@@ -7,7 +7,8 @@ const matchToken = (str: string, callback: (tokenPath: string, match: RegExpExec
   let match: RegExpExecArray | null
 
   while ((match = tokenRegex.exec(str)) != null) {
-    match[1]
+    // eslint-disable-next-line no-extra-semi
+    ;(match[1] ?? '')
       .split(',')
       .map((s) => s.trim())
       .filter(Boolean)

packages/language-server/src/tokens/is-color.ts

@@ -190,10 +190,10 @@ export const isColor = (str: string) => {
   if (result) {
     const flavor = result[1]
     const alpha = result[2]
-    const rh = result[3]
-    const gs = result[4]
-    const bl = result[5]
-    const a = result[6]
+    const rh = result[3] ?? ''
+    const gs = result[4] ?? ''
+    const bl = result[5] ?? ''
+    const a = result[6] ?? ''
 
     // alpha test
     if ((alpha === 'a' && !a) || (a && alpha === '')) {

packages/language-server/src/tokens/metadata.ts

@@ -0,0 +1,43 @@
+import { parseToRgba } from 'color2k'
+// import type { PandaVSCodeSettings } from '@pandacss/extension-shared'
+
+// taken from https://github.com/nderscore/tamagui-typescript-plugin/blob/eb4dbd4ea9a60cbfff2ffd9ae8992ec2e54c0b02/src/metadata.ts
+
+const squirclePath = `M 0,12 C 0,0 0,0 12,0 24,0 24,0 24,12 24,24 24,24 12,24 0, 24 0,24 0,12`
+
+const svgCheckerboard = `<defs>
+<pattern id="pattern-checker" x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse">
+<rect x="0" y="0" width="4" height="4" fill="#fff" />
+<rect x="4" y="0" width="4" height="4" fill="#000" />
+<rect x="0" y="4" width="4" height="4" fill="#000" />
+<rect x="4" y="4" width="4" height="4" fill="#fff" />
+</pattern>
+</defs>
+<path d="${squirclePath}" fill="url(#pattern-checker)" />`
+
+export const makeColorTile = (value: string, size: number = 18) => {
+  try {
+    const [_r, _g, _b, alpha] = parseToRgba(value)
+    const hasAlphaTransparency = alpha !== 1
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="${size}" height="${size}">${
+      hasAlphaTransparency ? svgCheckerboard : ''
+    }<path d="${squirclePath}" fill="${value}" /></svg>`
+    const image = `![Image](data:image/svg+xml;base64,${btoa(svg)})`
+    return image
+  } catch {
+    return ''
+  }
+}
+
+export const makeTable = (rows: Record<string, string>[]) => {
+  const header = rows[0]!
+  const keys = Object.keys(header)
+  const renderRow = (row: Record<string, string>) => {
+    return `| ${keys.map((key) => row[key]).join(' | ')} |`
+  }
+  const renderSplitter = () => {
+    return `| ${keys.map(() => '---').join(' | ')} |`
+  }
+
+  return `${renderRow(header)}\n${renderSplitter()}\n${rows.slice(1).map(renderRow).join('\n')}`
+}

packages/language-server/src/tokens/render-token-color-preview.ts

@@ -6,13 +6,16 @@ import { svgToMarkdownLink } from './utils'
 import { Roboto } from './render-font-size-preview'
 
 // https://og-playground.vercel.app/?share=5ZTNTsMwDMdfJbLELdI2xHYIgwMfb4DEJZe2cdtAmlRJSqmqvjtNw8ZEGUzihMglsRP_9bMtp4fMCAQGWyFfuCbE-U7hVd-HMyElyqL0jHBYLZdnHGh0t1L4cuYV0tUq6YI_V_i69wfjTlrMvDQ63GZGNZXmEK6HgevrcNgBfEY4rhuVGVm920GKkEnsUG4uGANvEifdR3RYldSPu9TWB5l9U4o5Rlhpkj0X1jRa3BplbIgqLOKY8_5RpCVk8RvgL6BOy-Yk5FQ1eJR4uxiB_0XnOlTKtH-rdRbFj52L-yXXQMHUYTgdsB6m4QZ2vt5QiJDANhcUBKZNASxPlEMKWJkn-dDV4e_w7WSNMrnR_r5KUQDztsGBgk_S8UU5ldBYJWB4Aw
+// TODO use raw svg ? or precompile and just replace the color
 export const renderTokenColorPreview = async (ctx: PandaContext, token: Token) => {
   const colors = [] as [tokenName: string, value: string][]
 
   // Only bother displaying a preview for multiple colors
   if (token.extensions.conditions) {
     Object.entries(token.extensions.conditions).forEach(([conditionName, value]) => {
+      if (!ctx.conditions.get(conditionName) && conditionName !== 'base') return
       const [tokenRef] = ctx.tokens.getReferences(value)
+      if (!tokenRef) return
 
       colors.push([conditionName, tokenRef.value])
     })

packages/language-server/src/tokens/setup-tokens-helpers.ts

@@ -11,6 +11,7 @@ import {
 } from '@pandacss/types'
 import { CallExpression, Identifier, JsxOpeningElement, JsxSelfClosingElement, Node, SourceFile, ts } from 'ts-morph'
 
+import { type PandaVSCodeSettings } from '@pandacss/extension-shared'
 import {
   BoxNodeArray,
   BoxNodeLiteral,
@@ -28,15 +29,17 @@ import {
   type Unboxed,
 } from '@pandacss/extractor'
 import { type PandaContext } from '@pandacss/node'
-import { walkObject } from '@pandacss/shared'
 import { type ParserResult } from '@pandacss/parser'
+import { walkObject } from '@pandacss/shared'
 import { type Token } from '@pandacss/token-dictionary'
 import { Bool } from 'lil-fp'
-import { type PandaVSCodeSettings } from '@pandacss/extension-shared'
 import { match } from 'ts-pattern'
 import { color2kToVsCodeColor } from './color2k-to-vscode-color'
 import { expandTokenFn, extractTokenPaths } from './expand-token-fn'
 import { isColor } from './is-color'
+import { makeColorTile, makeTable } from './metadata'
+import { getSortText } from './sort-text'
+import { traverse } from './traverse'
 import { getMarkdownCss, isObjectLike, nodeRangeToVsCodeRange, printTokenValue } from './utils'
 
 type ClosestMatch = {
@@ -48,12 +51,14 @@ type ClosestTokenMatch = ClosestMatch & {
   kind: 'token'
   token: Token
   propValue: PrimitiveType
+  shorthand: string
 }
 
 type ClosestConditionMatch = ClosestMatch & {
   kind: 'condition'
   condition: RawCondition
   propValue: Unboxed['raw']
+  shorthand: never
 }
 type ClosestToken = ClosestTokenMatch | ClosestConditionMatch
 
@@ -165,14 +170,14 @@ export function setupTokensHelpers(setup: PandaExtensionSetup) {
           const propNode = box.isArray(boxNode)
             ? boxNode.value.find((node) => box.isMap(node) && getNestedBoxProp(node, paths))
             : getNestedBoxProp(boxNode, paths)
-          if (!box.isLiteral(propNode)) return
+          if (!box.isLiteral(propNode) || !prop) return
 
           const propName = ctx.utility.resolveShorthand(prop)
           const token = getTokenFromPropValue(ctx, propName, value)
           if (!token) return
 
           const range = nodeRangeToVsCodeRange(propNode.getRange())
-          onToken?.({ kind: 'token', token, range, propName, propValue: value, propNode })
+          onToken?.({ kind: 'token', token, range, propName, propValue: value, propNode, shorthand: prop })
         })
       })
     }
@@ -296,7 +301,7 @@ export function setupTokensHelpers(setup: PandaExtensionSetup) {
   const findClosestToken = <Return>(
     node: Node,
     stack: Node[],
-    onFoundToken: (args: Pick<ClosestToken, 'propName' | 'propNode'>) => Return,
+    onFoundToken: (args: Pick<ClosestToken, 'propName' | 'propNode' | 'shorthand'>) => Return,
   ) => {
     const ctx = setup.getContext()
     if (!ctx) return
@@ -317,7 +322,7 @@ export function setupTokensHelpers(setup: PandaExtensionSetup) {
 
           const propName = ctx.utility.resolveShorthand(name)
 
-          return onFoundToken({ propName, propNode })
+          return onFoundToken({ propName, propNode, shorthand: name })
         },
       )
       .when(
@@ -333,7 +338,7 @@ export function setupTokensHelpers(setup: PandaExtensionSetup) {
 
           const propName = ctx.utility.resolveShorthand(name)
 
-          return onFoundToken({ propName, propNode: attrBox })
+          return onFoundToken({ propName, propNode: attrBox, shorthand: name })
         },
       )
       .otherwise(() => {
@@ -411,10 +416,71 @@ export function setupTokensHelpers(setup: PandaExtensionSetup) {
     const settings = await setup.getPandaSettings()
     const { node, stack } = match
 
-    return findClosestToken(node, stack, ({ propName, propNode }) => {
-      if (!box.isLiteral(propNode)) return undefined
-      return getCompletionFor(ctx, propName, propNode, settings)
-    })
+    try {
+      return await findClosestToken(node, stack, ({ propName, propNode, shorthand }) => {
+        if (!box.isLiteral(propNode)) return undefined
+        return getCompletionFor({ ctx, propName, propNode, settings, shorthand })
+      })
+    } catch (err) {
+      console.error(err)
+      console.trace()
+      return
+    }
+  }
+
+  const getCompletionDetails = async (item: CompletionItem) => {
+    const ctx = setup.getContext()
+    if (!ctx) return
+
+    const settings = await setup.getPandaSettings()
+    const { propName, token, shorthand } = (item.data ?? {}) as { propName: string; token: Token; shorthand: string }
+    const markdownCss = getMarkdownCss(ctx, { [propName]: token.value }, settings)
+
+    const markdown = [markdownCss.withCss]
+    if (shorthand !== propName) {
+      markdown.push(`\`${shorthand}\` is shorthand for \`${propName}\``)
+    }
+
+    const conditions = token.extensions.conditions ?? { base: token.value }
+    if (conditions) {
+      const separator = '[___]'
+      const table = [{ color: ' ', theme: 'Condition', value: 'Value' }]
+
+      const tab = '&nbsp;&nbsp;&nbsp;&nbsp;'
+      traverse(
+        conditions,
+        ({ key: cond, value, depth }) => {
+          if (!ctx.conditions.get(cond) && cond !== 'base') return
+
+          const indent = depth > 0 ? tab.repeat(depth) + '├ ' : ''
+
+          if (typeof value === 'object') {
+            table.push({
+              color: '',
+              theme: `${indent}**${cond}**`,
+              value: '─────',
+            })
+            return
+          }
+
+          const [tokenRef] = ctx.tokens.getReferences(value)
+          const color = tokenRef?.value ?? value
+          if (!color) return
+
+          table.push({
+            color: makeColorTile(color),
+            theme: `${indent}**${cond}**`,
+            value: `\`${color}\``,
+          })
+        },
+        { separator },
+      )
+
+      markdown.push(makeTable(table))
+      markdown.push(`\n${tab}`)
+    }
+
+    item.documentation = { kind: 'markdown', value: markdown.join('\n') }
   }
 
   return {
@@ -425,6 +491,7 @@ export function setupTokensHelpers(setup: PandaExtensionSetup) {
     getClosestToken,
     getClosestInstance,
     getClosestCompletionList,
+    getCompletionDetails,
   }
 }
 
@@ -516,15 +583,19 @@ const getTokenFromPropValue = (ctx: PandaContext, prop: string, value: string):
   return token
 }
 
-const completionCache = new Map<string, CompletionItem[]>()
-const itemCache = new Map<string, CompletionItem>()
-
-const getCompletionFor = (
-  ctx: PandaContext,
-  propName: string,
-  propNode: BoxNodeLiteral,
-  settings: PandaVSCodeSettings,
-) => {
+const getCompletionFor = ({
+  ctx,
+  propName,
+  shorthand,
+  propNode,
+  settings,
+}: {
+  ctx: PandaContext
+  propName: string
+  shorthand?: string
+  propNode: BoxNodeLiteral
+  settings: PandaVSCodeSettings
+}) => {
   const propValue = propNode.value
 
   let str = String(propValue)
@@ -552,10 +623,6 @@ const getCompletionFor = (
     category = split[0]
   }
 
-  const cachePath = propName + '.' + str
-  const cachedList = completionCache.get(cachePath)
-  if (cachedList) return cachedList
-
   // token(colors.red.300) -> category = "colors"
   // color="red.300" -> no category, need to find it
   if (!category) {
@@ -574,21 +641,15 @@ const getCompletionFor = (
   values.forEach((token, name) => {
     if (str && !name.includes(str)) return
 
-    const tokenPath = token.name
-    const cachedItem = itemCache.get(tokenPath)
-    if (cachedItem) {
-      items.push(cachedItem)
-      return
-    }
-
     const isColor = token.extensions.category === 'colors'
+
     const completionItem = {
+      data: { propName, token, shorthand },
       label: name,
       kind: isColor ? CompletionItemKind.Color : CompletionItemKind.EnumMember,
-      documentation: { kind: 'markdown', value: getMarkdownCss(ctx, { [propName]: token.value }, settings).withCss },
       labelDetails: { description: printTokenValue(token, settings), detail: `   ${token.extensions.varRef}` },
-      sortText: '-' + name,
-      preselect: true,
+      sortText: '-' + getSortText(name),
+      preselect: false,
     } as CompletionItem
 
     if (isColor) {
@@ -597,10 +658,8 @@ const getCompletionFor = (
     }
 
     items.push(completionItem)
-    itemCache.set(tokenPath, completionItem)
   })
 
-  completionCache.set(cachePath, items)
   return items
 }
 
@@ -611,6 +670,6 @@ const getFirstAncestorMatching = <Ancestor extends Node>(
 ) => {
   for (let i = stack.length - 1; i >= 0; i--) {
     const parent = stack[i]
-    if (callback(parent, i)) return parent
+    if (parent && callback(parent, i)) return parent
   }
 }