Add getSuggestionsLikeVariable (#42)

* add getSuggestionsLikeVariable

* doc is already defined

Author: siddharthkp

src/language-server.ts

@@ -14,10 +14,11 @@ import postcss, {type Root as ASTRoot} from 'postcss'
 // import {properties, stories} from '@primer/primitives/dist/js/intellisense'
 import camelCase from 'lodash.camelcase'
 import {isColor} from './utils/is-color'
-import {getSuggestions} from './suggestions'
+import {getSuggestions, getSuggestionsLikeVariable, type SuggestionWithSortText} from './suggestions'
 import {getCssVariable} from './utils/get-css-variable'
 import {getVariableInfo} from './utils/get-variable-info'
 import {getDocumentation} from './documentation'
+import {getCurrentWord} from './utils/get-current-word'
 
 // Create a connection for the server, using Node's IPC as a transport.
 // Also include all preview / proposed LSP features.
@@ -67,12 +68,24 @@ connection.onCompletion((params: TextDocumentPositionParams): CompletionItem[] =
   let property: string = ast.nodes[0].type === 'decl' ? camelCase(ast.nodes[0].prop) : undefined
   if (!property) return []
 
+  const value: string =
+    ast.nodes[0].type === 'decl' ? ast.nodes[0].value.replace(');', '').replace('\n', '').trim() : undefined
+
+  const suggestedVariablesWithSortText: SuggestionWithSortText[] = []
+
+  // if the cursor is at the css variable, get getSuggestionsLikeVariable instead of getSuggestions(property)
+  const offset = doc.offsetAt(params.position)
+  const currentWord = getCurrentWord(doc, offset)
+  if (currentWord.includes('--') && currentWord.length > 2 /* checking it's not just -- */) {
+    const variableSuggestions = getSuggestionsLikeVariable(currentWord.replace('--', ''))
+    suggestedVariablesWithSortText.push(...variableSuggestions)
+  }
+
   // TODO: for shorthands, property might be the second property like borderColor or paddingInline
   // we can be smarter about this
   if (property === 'padding') {
     try {
       // padding: block inline
-      const value = currentLine.split(':')[1].trim()
       const [blockValue] = value.split(' ')
       const blockValuePositionEnd = currentLine.indexOf(blockValue) + blockValue.length
 
@@ -87,7 +100,6 @@ connection.onCompletion((params: TextDocumentPositionParams): CompletionItem[] =
   } else if (property === 'border') {
     try {
       // border: width style color
-      const value = currentLine.split(':')[1].trim()
       const [borderWidth] = value.split(' ')
       const borderWidthPositionEnd = currentLine.indexOf(borderWidth) + borderWidth.length
 
@@ -101,7 +113,7 @@ connection.onCompletion((params: TextDocumentPositionParams): CompletionItem[] =
     }
   }
 
-  const suggestedVariablesWithSortText = getSuggestions(property)
+  suggestedVariablesWithSortText.push(...getSuggestions(property))
 
   const items = suggestedVariablesWithSortText.map(variable => {
     const documentation = getDocumentation(variable.name)
@@ -114,8 +126,8 @@ connection.onCompletion((params: TextDocumentPositionParams): CompletionItem[] =
         typeof variable.value === 'string' && isColor(variable.value)
           ? CompletionItemKind.Color
           : variable.kind === 'functional'
-          ? CompletionItemKind.Field
-          : CompletionItemKind.Constructor,
+            ? CompletionItemKind.Field
+            : CompletionItemKind.Constructor,
       sortText: variable.sortText,
       // this is slightly silly because what about multiple variables in one line
       // like shorthands or fallbacks

src/suggestions.test.ts

@@ -1,9 +1,19 @@
 import {describe, it, expect} from 'vitest'
-import {getSuggestions} from './suggestions'
+import {getSuggestions, getSuggestionsLikeVariable} from './suggestions'
 
 describe('Suggestions', () => {
   it('returns suggestions for paddingBottom', () => {
     const suggestions = getSuggestions('paddingBottom')
     expect(suggestions).toMatchSnapshot()
   })
+
+  it('returns suggestions for variable part: --fgColor', () => {
+    const suggestions = getSuggestionsLikeVariable('--fgColor')
+    expect(suggestions[0].name).toBe('--fgColor-accent')
+  })
+
+  it.todo('returns suggestions for property: outline', () => {
+    const suggestions = getSuggestions('outline')
+    expect(suggestions[0].name).toBe('--focus-outline')
+  })
 })

src/suggestions.ts

@@ -4,7 +4,9 @@ import {propertiesMap, aliases, type Suggestion} from './data'
 // eslint-disable-next-line import/no-namespace
 import type * as CSS from 'csstype'
 
-export const getSuggestions = (property: keyof CSS.Properties) => {
+export type SuggestionWithSortText = Suggestion & {sortText: string}
+
+export const getSuggestions = (property: keyof CSS.Properties): SuggestionWithSortText[] => {
   // TODO: for shorthands, property might be the second property like borderColor or paddingInline
   // we can be smarter about this
   let suggestedVariables: Suggestion[]
@@ -24,6 +26,22 @@ export const getSuggestions = (property: keyof CSS.Properties) => {
 
   if (!suggestedVariables) return []
 
+  const suggestedVariablesWithSortText = sortSuggestions(suggestedVariables)
+  return suggestedVariablesWithSortText
+}
+
+// slower than getSuggestions, use judiciously
+export const getSuggestionsLikeVariable = (variableQuery: string): SuggestionWithSortText[] => {
+  const allVariables = flatten(Object.values(propertiesMap))
+  const suggestedVariables: Suggestion[] = allVariables.filter(variable => variable.name.includes(variableQuery))
+
+  if (!suggestedVariables) return []
+
+  const suggestedVariablesWithSortText = sortSuggestions(suggestedVariables)
+  return suggestedVariablesWithSortText
+}
+
+const sortSuggestions = (suggestedVariables: Suggestion[]): SuggestionWithSortText[] => {
   const functionalVariables = suggestedVariables.filter(variable => variable.kind === 'functional')
   const baseVariables = suggestedVariables.filter(variable => variable.kind === 'base')
 
@@ -35,6 +53,10 @@ export const getSuggestions = (property: keyof CSS.Properties) => {
   // TODO 2: contextual repetition
   // if there are other variables in the same block/document
   // we should take hints from them like hover state or control-small or button-primary
+
+  // TODO 3: for shorthands like outline and font, the shorthand token should come before
+  // the tokens for subproperties
+
   const suggestedVariablesWithSortText = [
     ...functionalVariables.map((variable, index) => {
       // we have to use alphabet instead of numbers to sort because it uses text

src/utils/get-current-word.ts

@@ -1,15 +1,24 @@
 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()
+  const delimiters = ' \t\n\r":{[()]},*>+'
+
+  // Ensure offset is within bounds
+  if (offset < 0 || offset > text.length) {
+    return ''
+  }
+
+  let left = offset - 1
+  let right = offset
 
-  while (left >= 0 && ' \t\n\r":{[()]},*>+'.indexOf(text.charAt(left)) === -1) {
+  // Move left to find start of word
+  while (left >= 0 && delimiters.indexOf(text.charAt(left)) === -1) {
     left--
   }
 
-  while (right <= text.length && ' \t\n\r":{[()]},*>+'.indexOf(text.charAt(right)) === -1) {
+  // Move right to find end of word
+  while (right < text.length && delimiters.indexOf(text.charAt(right)) === -1) {
     right++
   }