Collect offset-based range information

Author: thecrypticace

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

@@ -33,21 +33,24 @@ export function findLast(re: RegExp, str: string): RegExpMatchArray {
 }
 
 export function getClassNamesInClassList(
-  { classList, range, important }: DocumentClassList,
+  { classList, span, range, important }: DocumentClassList,
   blocklist: State['blocklist'],
 ): DocumentClassName[] {
   const parts = classList.split(/(\s+)/)
   const names: DocumentClassName[] = []
   let index = 0
   for (let i = 0; i < parts.length; i++) {
     if (i % 2 === 0 && !blocklist.includes(parts[i])) {
+      const classNameSpan = [index, index + parts[i].length]
       const start = indexToPosition(classList, index)
       const end = indexToPosition(classList, index + parts[i].length)
       names.push({
         className: parts[i],
+        span: [span[0] + classNameSpan[0], span[0] + classNameSpan[1]],
         classList: {
           classList,
           range,
+          span,
           important,
         },
         relativeRange: {
@@ -107,11 +110,19 @@ export function findClassListsInCssRange(
   const matches = findAll(regex, text)
   const globalStart: Position = range ? range.start : { line: 0, character: 0 }
 
+  const rangeStartOffset = doc.offsetAt(globalStart)
+
   return matches.map((match) => {
-    const start = indexToPosition(text, match.index + match[1].length)
-    const end = indexToPosition(text, match.index + match[1].length + match.groups.classList.length)
+    let span = [
+      match.index + match[1].length,
+      match.index + match[1].length + match.groups.classList.length,
+    ] as [number, number]
+
+    const start = indexToPosition(text, span[0])
+    const end = indexToPosition(text, span[1])
     return {
       classList: match.groups.classList,
+      span: [rangeStartOffset + span[0], rangeStartOffset + span[1]],
       important: Boolean(match.groups.important),
       range: {
         start: {
@@ -143,6 +154,7 @@ async function findCustomClassLists(
     for (let match of customClassesIn({ text, filters: regexes })) {
       result.push({
         classList: match.classList,
+        span: match.range,
         range: {
           start: doc.positionAt(match.range[0]),
           end: doc.positionAt(match.range[1]),
@@ -179,6 +191,8 @@ export async function findClassListsInHtmlRange(
 
   const result: DocumentClassList[] = []
 
+  const rangeStartOffset = doc.offsetAt(range?.start || { line: 0, character: 0 })
+
   matches.forEach((match) => {
     const subtext = text.substr(match.index + match[0].length - 1)
 
@@ -234,17 +248,17 @@ export async function findClassListsInHtmlRange(
           const after = value.match(/\s*$/)
           const afterOffset = after === null ? 0 : -after[0].length
 
-          const start = indexToPosition(
-            text,
+          let span = [
             match.index + match[0].length - 1 + offset + beforeOffset,
-          )
-          const end = indexToPosition(
-            text,
             match.index + match[0].length - 1 + offset + value.length + afterOffset,
-          )
+          ]
+
+          const start = indexToPosition(text, span[0])
+          const end = indexToPosition(text, span[1])
 
           return {
             classList: value.substr(beforeOffset, value.length + afterOffset),
+            span: [rangeStartOffset + span[0], rangeStartOffset + span[1]] as [number, number],
             range: {
               start: {
                 line: (range?.start.line || 0) + start.line,
@@ -356,6 +370,8 @@ export function findHelperFunctionsInRange(
     text,
   )
 
+  let rangeStartOffset = range?.start ? doc.offsetAt(range.start) : 0
+
   // Eliminate matches that are on an `@import`
   matches = matches.filter((match) => {
     // Scan backwards to see if we're in an `@import` statement
@@ -422,6 +438,16 @@ export function findHelperFunctionsInRange(
           range,
         ),
       },
+      spans: {
+        full: [
+          rangeStartOffset + startIndex,
+          rangeStartOffset + startIndex + match.groups.path.length,
+        ],
+        path: [
+          rangeStartOffset + startIndex + quotesBefore.length,
+          rangeStartOffset + startIndex + quotesBefore.length + path.length,
+        ],
+      },
     }
   })
 }

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

@@ -4,14 +4,15 @@ import { isVueDoc, isHtmlDoc, isSvelteDoc } from './html'
 import type { State } from './state'
 import { indexToPosition } from './find'
 import { isJsDoc } from './js'
-import moo from 'moo'
+import moo, { Rules } from 'moo'
 import Cache from 'tmp-cache'
 import { getTextWithoutComments } from './doc'
 import { isCssLanguage } from './css'
 
 export type LanguageBoundary = {
   type: 'html' | 'js' | 'jsx' | 'css' | (string & {})
   range: Range
+  span: [number, number]
   lang?: string
 }
 
@@ -29,9 +30,11 @@ let jsxScriptTypes = [
   'text/babel',
 ]
 
+type States = { [x: string]: Rules }
+
 let text = { text: { match: /[^]/, lineBreaks: true } }
 
-let states = {
+let states: States = {
   main: {
     cssBlockStart: { match: /<style(?=[>\s])/, push: 'cssBlock' },
     jsBlockStart: { match: '<script', push: 'jsBlock' },
@@ -177,7 +180,11 @@ export function getLanguageBoundaries(
 
   let type = defaultType
   let boundaries: LanguageBoundary[] = [
-    { type: defaultType, range: { start: { line: 0, character: 0 }, end: undefined } },
+    {
+      type: defaultType,
+      range: { start: { line: 0, character: 0 }, end: undefined },
+      span: [0, undefined],
+    },
   ]
   let offset = 0
 
@@ -189,12 +196,24 @@ export function getLanguageBoundaries(
           if (!boundaries[boundaries.length - 1].range.end) {
             boundaries[boundaries.length - 1].range.end = position
           }
+          if (!boundaries[boundaries.length - 1].span[1]) {
+            boundaries[boundaries.length - 1].span[1] = offset
+          }
           type = token.type.replace(/BlockStart$/, '')
-          boundaries.push({ type, range: { start: position, end: undefined } })
+          boundaries.push({
+            type,
+            range: { start: position, end: undefined },
+            span: [offset, undefined],
+          })
         } else if (token.type.endsWith('BlockEnd')) {
           let position = indexToPosition(text, offset)
+          boundaries[boundaries.length - 1].span[1] = offset
           boundaries[boundaries.length - 1].range.end = position
-          boundaries.push({ type: defaultType, range: { start: position, end: undefined } })
+          boundaries.push({
+            type: defaultType,
+            range: { start: position, end: undefined },
+            span: [offset, undefined],
+          })
         } else if (token.type === 'lang') {
           boundaries[boundaries.length - 1].type = token.text
 
@@ -222,6 +241,10 @@ export function getLanguageBoundaries(
     boundaries[boundaries.length - 1].range.end = indexToPosition(text, offset)
   }
 
+  if (!boundaries[boundaries.length - 1].span[1]) {
+    boundaries[boundaries.length - 1].span[1] = offset
+  }
+
   cache.set(cacheKey, boundaries)
 
   for (let boundary of boundaries) {

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

@@ -18,6 +18,13 @@ export type ClassNames = {
   classNames: ClassNamesTree
 }
 
+/**
+ * Indicates a contiguous range of text, inclusive
+ *
+ * Offsets are in UTF-16 code units (indexing into a JS string)
+ */
+export type Span = [start: number, end: number]
+
 export type EditorState = {
   connection: Connection
   folder: string
@@ -146,13 +153,15 @@ export interface State {
 export type DocumentClassList = {
   classList: string
   range: Range
+  span: Span
   important?: boolean
 }
 
 export type DocumentClassName = {
   className: string
   range: Range
   relativeRange: Range
+  span: Span
   classList: DocumentClassList
 }
 
@@ -163,6 +172,10 @@ export type DocumentHelperFunction = {
     full: Range
     path: Range
   }
+  spans: {
+    full: Span
+    path: Span
+  }
 }
 
 export type ClassNameMeta = {