add hover, color decorator, linting support for classRegex setting (#129)

Author: bradlc

packages/tailwindcss-intellisense/src/lsp/providers/documentColorProvider.ts

@@ -10,7 +10,7 @@ export function registerDocumentColorProvider(state: State) {
       let doc = state.editor.documents.get(document)
       if (!doc) return { colors: [] }
 
-      return { colors: getDocumentColors(state, doc) }
+      return { colors: await getDocumentColors(state, doc) }
     }
   )
 }

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

@@ -31,8 +31,8 @@ import {
 } from './util/lexers'
 import { validateApply } from './util/validateApply'
 import { flagEnabled } from './util/flagEnabled'
-import MultiRegexp from 'multi-regexp2'
 import { remToPx } from './util/remToPx'
+import { createMultiRegexp } from './util/createMultiRegexp'
 
 export function completionsFromClassList(
   state: State,
@@ -197,62 +197,6 @@ function provideClassAttributeCompletions(
   return null
 }
 
-function createMultiRegexp(regexString: string) {
-  let insideCharClass = false
-  let captureGroupIndex = -1
-
-  for (let i = 0; i < regexString.length; i++) {
-    if (
-      !insideCharClass &&
-      regexString[i] === '[' &&
-      regexString[i - 1] !== '\\'
-    ) {
-      insideCharClass = true
-    } else if (
-      insideCharClass &&
-      regexString[i] === ']' &&
-      regexString[i - 1] !== '\\'
-    ) {
-      insideCharClass = false
-    } else if (
-      !insideCharClass &&
-      regexString[i] === '(' &&
-      regexString.substr(i + 1, 2) !== '?:'
-    ) {
-      captureGroupIndex = i
-      break
-    }
-  }
-
-  const re = /(?:[^\\]|^)\(\?:/g
-  let match: RegExpExecArray
-  let nonCaptureGroupIndexes: number[] = []
-
-  while ((match = re.exec(regexString)) !== null) {
-    if (match[0].startsWith('(')) {
-      nonCaptureGroupIndexes.push(match.index)
-    } else {
-      nonCaptureGroupIndexes.push(match.index + 1)
-    }
-  }
-
-  const regex = new MultiRegexp(
-    new RegExp(
-      regexString.replace(re, (m) => m.substr(0, m.length - 2)),
-      'g'
-    )
-  )
-
-  let groupIndex =
-    1 + nonCaptureGroupIndexes.filter((i) => i < captureGroupIndex).length
-
-  return {
-    exec: (str: string) => {
-      return regex.execForGroup(str, groupIndex)
-    },
-  }
-}
-
 async function provideCustomClassNameCompletions(
   state: State,
   document: TextDocument,

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

@@ -26,10 +26,10 @@ export async function doValidate(
   return settings.validate
     ? [
         ...(only.includes(DiagnosticKind.CssConflict)
-          ? getCssConflictDiagnostics(state, document, settings)
+          ? await getCssConflictDiagnostics(state, document, settings)
           : []),
         ...(only.includes(DiagnosticKind.InvalidApply)
-          ? getInvalidApplyDiagnostics(state, document, settings)
+          ? await getInvalidApplyDiagnostics(state, document, settings)
           : []),
         ...(only.includes(DiagnosticKind.InvalidScreen)
           ? getInvalidScreenDiagnostics(state, document, settings)

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

@@ -10,16 +10,16 @@ import { getClassNameDecls } from '../util/getClassNameDecls'
 import { getClassNameMeta } from '../util/getClassNameMeta'
 import { equal } from '../util/array'
 
-export function getCssConflictDiagnostics(
+export async function getCssConflictDiagnostics(
   state: State,
   document: TextDocument,
   settings: Settings
-): CssConflictDiagnostic[] {
+): Promise<CssConflictDiagnostic[]> {
   let severity = settings.lint.cssConflict
   if (severity === 'ignore') return []
 
   let diagnostics: CssConflictDiagnostic[] = []
-  const classLists = findClassListsInDocument(state, document)
+  const classLists = await findClassListsInDocument(state, document)
 
   classLists.forEach((classList) => {
     const classNames = getClassNamesInClassList(classList)

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

@@ -4,15 +4,21 @@ import { Settings, State } from '../util/state'
 import type { TextDocument, DiagnosticSeverity } from 'vscode-languageserver'
 import { validateApply } from '../util/validateApply'
 
-export function getInvalidApplyDiagnostics(
+export async function getInvalidApplyDiagnostics(
   state: State,
   document: TextDocument,
   settings: Settings
-): InvalidApplyDiagnostic[] {
+): Promise<InvalidApplyDiagnostic[]> {
   let severity = settings.lint.invalidApply
   if (severity === 'ignore') return []
 
-  const classNames = findClassNamesInRange(document, undefined, 'css')
+  const classNames = await findClassNamesInRange(
+    state,
+    document,
+    undefined,
+    'css',
+    false
+  )
 
   let diagnostics: InvalidApplyDiagnostic[] = classNames.map((className) => {
     let result = validateApply(state, className.className)

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

@@ -10,11 +10,11 @@ import { stringToPath } from './util/stringToPath'
 import type { TextDocument } from 'vscode-languageserver'
 const dlv = require('dlv')
 
-export function getDocumentColors(state: State, document: TextDocument) {
+export async function getDocumentColors(state: State, document: TextDocument) {
   let colors = []
   if (!state.enabled) return colors
 
-  let classLists = findClassListsInDocument(state, document)
+  let classLists = await findClassListsInDocument(state, document)
   classLists.forEach((classList) => {
     let classNames = getClassNamesInClassList(classList)
     classNames.forEach((className) => {

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

@@ -77,7 +77,7 @@ async function provideClassNameHover(
   document: TextDocument,
   position: Position
 ): Promise<Hover> {
-  let className = findClassNameAtPosition(state, document, position)
+  let className = await findClassNameAtPosition(state, document, position)
   if (className === null) return null
 
   const parts = getClassNameParts(state, className.className)

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

@@ -0,0 +1,55 @@
+export function createMultiRegexp(regexString: string) {
+  let insideCharClass = false
+  let captureGroupIndex = -1
+
+  for (let i = 0; i < regexString.length; i++) {
+    if (
+      !insideCharClass &&
+      regexString[i] === '[' &&
+      regexString[i - 1] !== '\\'
+    ) {
+      insideCharClass = true
+    } else if (
+      insideCharClass &&
+      regexString[i] === ']' &&
+      regexString[i - 1] !== '\\'
+    ) {
+      insideCharClass = false
+    } else if (
+      !insideCharClass &&
+      regexString[i] === '(' &&
+      regexString.substr(i + 1, 2) !== '?:'
+    ) {
+      captureGroupIndex = i
+      break
+    }
+  }
+
+  const re = /(?:[^\\]|^)\(\?:/g
+  let match: RegExpExecArray
+  let nonCaptureGroupIndexes: number[] = []
+
+  while ((match = re.exec(regexString)) !== null) {
+    if (match[0].startsWith('(')) {
+      nonCaptureGroupIndexes.push(match.index)
+    } else {
+      nonCaptureGroupIndexes.push(match.index + 1)
+    }
+  }
+
+  const regex = new MultiRegexp(
+    new RegExp(
+      regexString.replace(re, (m) => m.substr(0, m.length - 2)),
+      'g'
+    )
+  )
+
+  let groupIndex =
+    1 + nonCaptureGroupIndexes.filter((i) => i < captureGroupIndex).length
+
+  return {
+    exec: (str: string) => {
+      return regex.execForGroup(str, groupIndex)
+    },
+  }
+}