add initial definition provider

Author: Brad Cornes

packages/tailwindcss-class-names/src/getUtilityConfigMap.js

@@ -33,19 +33,33 @@ export async function getUtilityConfigMap({ cwd, resolvedConfig, postcss }) {
         postcss,
         config: proxiedConfig,
         addUtilities: (utilities) => {
-          Object.keys(utilities).forEach((util) => {
-            let props = Object.keys(utilities[util])
-            if (
-              props.length === 1 &&
-              /^\.[^\s]+$/.test(util) &&
-              typeof utilities[util][props[0]] === 'string' &&
-              utilities[util][props[0]].substr(0, 5) === '$dep$'
-            ) {
-              classNameConfigMap[util.substr(1)] = utilities[util][
-                props[0]
-              ].substr(5)
+          ;(Array.isArray(utilities) ? utilities : [utilities]).forEach(
+            (utils) => {
+              Object.keys(utils).forEach((util) => {
+                if (!/^\.[^\s]+$/.test(util)) {
+                  return
+                }
+                let props = Object.keys(utils[util])
+                let values = props.map((prop) => utils[util][prop])
+                if (values.some((val) => typeof val !== 'string')) {
+                  return
+                }
+                let deps = values
+                  .filter((val) => val.substr(0, 5) === '$dep$')
+                  // unique
+                  .filter((val, index, self) => self.indexOf(val) === index)
+                  .map((dep) => dep.substr(5))
+                if (deps.length === 1) {
+                  let className = util.substr(1)
+                  let match = className.match(/[^\\]::?/)
+                  if (match !== null) {
+                    className = className.substr(0, match.index + 1)
+                  }
+                  classNameConfigMap[className] = deps[0]
+                }
+              })
             }
-          })
+          )
         },
       })
     })

packages/tailwindcss-language-server/src/providers/definitionProvider.ts

@@ -0,0 +1,50 @@
+import { State, DocumentClassName } from '../util/state'
+import {
+  TextDocumentPositionParams,
+  DefinitionLink,
+} from 'vscode-languageserver'
+import { isHtmlContext } from '../util/html'
+import { isJsContext } from '../util/js'
+import {
+  getClassNameAtPosition,
+  getClassNameParts,
+} from '../util/getClassNameAtPosition'
+import getConfigLocation from '../util/getConfigLocation'
+
+export function provideDefinition(
+  state: State,
+  { textDocument, position }: TextDocumentPositionParams
+): Promise<DefinitionLink[]> {
+  let doc = state.editor.documents.get(textDocument.uri)
+
+  if (!isHtmlContext(doc, position) && !isJsContext(doc, position)) return null
+
+  let hovered = getClassNameAtPosition(doc, position)
+  if (!hovered) return null
+
+  return classNameToDefinition(state, hovered)
+}
+
+async function classNameToDefinition(
+  state: State,
+  { className, range }: DocumentClassName
+): Promise<DefinitionLink[]> {
+  const parts = getClassNameParts(state, className)
+  if (!parts) return null
+
+  const configKey = state.utilityConfigMap[parts[parts.length - 1]]
+  if (!configKey) return null
+
+  const location = await getConfigLocation(state, configKey.split('.'))
+  if (!location) return null
+
+  return [
+    {
+      originSelectionRange: range,
+      targetUri: location.file,
+      // TODO: figure out why this doesn't work properly
+      targetRange: location.range,
+      targetSelectionRange: location.range
+    },
+  ]
+}

packages/tailwindcss-language-server/src/server.ts

@@ -16,6 +16,7 @@ import {
   Hover,
   TextDocumentPositionParams,
   DidChangeConfigurationNotification,
+  DefinitionLink,
 } from 'vscode-languageserver'
 import getTailwindState from 'tailwindcss-class-names'
 import { State, Settings, EditorState } from './util/state'
@@ -27,6 +28,7 @@ import { provideHover } from './providers/hoverProvider'
 import { URI } from 'vscode-uri'
 import { getDocumentSettings } from './util/getDocumentSettings'
 import getConfigLocation from './util/getConfigLocation'
+import { provideDefinition } from './providers/definitionProvider'
 
 let state: State = { enabled: false }
 let connection = createConnection(ProposedFeatures.all)
@@ -125,6 +127,7 @@ connection.onInitialize(
           ],
         },
         hoverProvider: true,
+        definitionProvider: true,
       },
     }
   }
@@ -188,4 +191,11 @@ connection.onHover(
   }
 )
 
+connection.onDefinition(
+  (params: TextDocumentPositionParams): Promise<DefinitionLink[]> => {
+    if (!state.enabled) return null
+    return provideDefinition(state, params)
+  }
+)
+
 connection.listen()

packages/tailwindcss-language-server/src/util/state.ts

@@ -36,6 +36,7 @@ export type State = null | {
   variants?: string[]
   classNames?: ClassNames
   dependencies?: string[]
+  utilityConfigMap?: Record<string, string>
   editor?: EditorState
   error?: Error
 }