+ * ^
+ * ```
+ *
+ * We know the following scopes are active:
+ * ```
+ * `context` [0, 36]
+ * `class.attr` [12, 34]
+ * `class.list` [12, 34]
+ * `class.name` [12, 23]
+ * ```
+ *
+ * The path to the inner-most active scope is returned:
+ * - 0: `context` [0, 36]
+ * - 1: `class.attr` [12, 34]
+ * - 2: `class.list` [12, 34]
+ * - 3: `class.name` [12, 23]
+ */
+ public at(pos: number): ScopePath {
+ let path: ScopePath = []
+
+ let nodes = this.roots
+
+ next: while (true) {
+ let low = 0
+ let high = nodes.length - 1
+
+ while (low <= high) {
+ let mid = (low + high) >> 1
+ let node = nodes[mid]
+
+ let span = node.source.scope
+ if (pos < span[0]) {
+ high = mid - 1
+ } else if (pos > span[1]) {
+ low = mid + 1
+ } else {
+ // Record the scope and move to the next level
+ path.push(node)
+ nodes = node.children
+ continue next
+ }
+ }
+
+ break
+ }
+
+ return Array.from(path)
+ }
+
+ /**
+ * Gets the inner-most scope of a specific kind active at a position
+ */
+ public closestAt
(kind: K, pos: number): Scope | null {
+ let path = this.at(pos)
+
+ for (let i = path.length - 1; i >= 0; i--) {
+ let scope = path[i]
+ if (scope.kind === kind) return scope as Scope
+ }
+
+ return null
+ }
+
+ /**
+ * A list of all active scopes
+ */
+ public all(): AnyScope[] {
+ return this.roots
+ }
+
+ /**
+ * Return an ordered list of all scopes applied to the text
+ */
+ public description(text?: string): string {
+ let indent = ' '
+
+ let str = ''
+ str += '\n'
+
+ walkScope(this.roots, {
+ enter(scope, { depth }) {
+ let span = scope.source.scope
+
+ str += indent.repeat(depth)
+ str += '['
+ str += span[0]
+ str += ', '
+ str += span[1]
+ str += '] '
+ str += scope.kind
+
+ if (text) {
+ str += ' "'
+
+ let length = span[1] - span[0]
+
+ if (length > 20) {
+ str += text.slice(span[0], span[0] + 20).replaceAll('\n', '\\n')
+ str += '...'
+ } else {
+ str += text.slice(span[0], span[1]).replaceAll('\n', '\\n')
+ }
+
+ str += '"'
+ }
+
+ str += '\n'
+ },
+ })
+
+ str += '\n'
+
+ return str
+ }
+}
diff --git a/packages/tailwindcss-language-service/src/scopes/walk.ts b/packages/tailwindcss-language-service/src/scopes/walk.ts
new file mode 100644
index 00000000..755e542a
--- /dev/null
+++ b/packages/tailwindcss-language-service/src/scopes/walk.ts
@@ -0,0 +1,204 @@
+import type { AnyScope } from './scope'
+
+/**
+ * The path from the root up to and including the active scope
+ */
+export type ScopePath = AnyScope[]
+
+export interface ScopeUtils {
+ path: ScopePath
+ depth: number
+}
+
+export interface ScopeVisitorFn {
+ (scope: AnyScope, utils: ScopeUtils): T
+}
+
+export interface ScopeVisitor {
+ enter?: ScopeVisitorFn
+ exit?: ScopeVisitorFn
+}
+
+export function walkScope(
+ node: AnyScope | Iterable,
+ visit: ScopeVisitor,
+ path: ScopePath = [],
+): void {
+ let roots = Array.isArray(node) ? node : [node]
+
+ for (let node of roots) {
+ let utils: ScopeUtils = {
+ path,
+ depth: path.length,
+ }
+
+ path.push(node)
+ visit.enter?.(node, utils)
+ utils.depth += 1
+ for (let child of node.children) {
+ walkScope(child, visit, path)
+ }
+ utils.depth -= 1
+ visit.exit?.(node, utils)
+ path.pop()
+ }
+}
+
+export function optimizeScopes(nodes: AnyScope[]) {
+ nestSiblings(nodes)
+ eliminateScopes(nodes)
+}
+
+/**
+ * Eliminate unncessary scopes from the tree
+ *
+ * TODO: The parsing should become smarter and this function should be removed
+ */
+export function eliminateScopes(nodes: AnyScope[]): AnyScope[] {
+ walkScope(nodes, {
+ enter(scope, { path }) {
+ if (scope.kind !== 'css.fn') return
+
+ let parent = path[path.length - 2]
+
+ if (!parent) return
+ if (parent.kind !== 'css.at-rule.import') return
+
+ parent.children.splice(parent.children.indexOf(scope), 1, ...scope.children)
+ },
+ })
+
+ return nodes
+}
+
+/**
+ * Convert siblings nodes into children of previous nodes if they are contained within them
+ */
+export function nestSiblings(nodes: AnyScope[]) {
+ nodes.sort((a, z) => {
+ return a.source.scope[0] - z.source.scope[0] || z.source.scope[1] - a.source.scope[1]
+ })
+
+ walkScope(nodes, {
+ enter(scope) {
+ // Sort the children to guarantee parents appear before children
+ scope.children.sort((a, z) => {
+ return a.source.scope[0] - z.source.scope[0] || z.source.scope[1] - a.source.scope[1]
+ })
+
+ let children = scope.children
+ if (children.length <= 1) return
+
+ for (let i = children.length - 1; i > 0; i--) {
+ let current = children[i]
+
+ // Find the closest containing parent
+ for (let j = i - 1; j >= 0; j--) {
+ let potential = children[j]
+
+ if (
+ current.source.scope[0] >= potential.source.scope[0] &&
+ current.source.scope[1] <= potential.source.scope[1]
+ ) {
+ // Remove the current node
+ children.splice(i, 1)
+
+ // and insert it as the child of the containing node
+ potential.children.push(current)
+
+ // Stop after finding the first containing parent
+ break
+ }
+ }
+ }
+ },
+ })
+}
+
+/**
+ * Convert a list of scopes to a string representation
+ */
+export function printScopes(nodes: AnyScope[], text?: string) {
+ let indent = ' '
+
+ let str = ''
+ str += '\n'
+
+ function printText(span: [number, number]) {
+ str += '"'
+
+ let length = span[1] - span[0]
+
+ if (length > 20) {
+ str += text!.slice(span[0], span[0] + 20).replaceAll('\n', '\\n')
+ str += '...'
+ } else {
+ str += text!.slice(span[0], span[1]).replaceAll('\n', '\\n')
+ }
+
+ str += '"'
+ }
+
+ walkScope(nodes, {
+ enter(scope, { depth }) {
+ let span = scope.source.scope
+
+ str += indent.repeat(depth)
+ str += scope.kind
+
+ str += ' ['
+ str += span[0]
+ str += '-'
+ str += span[1]
+ str += ']:'
+
+ if (text) {
+ str += ' '
+ printText(span)
+ }
+
+ str += '\n'
+
+ for (let [name, span] of Object.entries(scope.source)) {
+ if (name === 'scope') continue
+
+ str += indent.repeat(depth + 1)
+ str += '- '
+ str += name
+ str += ' '
+
+ if (span === null) {
+ str += '(none)'
+ str += '\n'
+ continue
+ }
+
+ str += '['
+ str += span[0]
+ str += '-'
+ str += span[1]
+ str += ']:'
+
+ if (text) {
+ str += ' '
+ printText(span)
+ }
+
+ str += '\n'
+ }
+
+ let meta: Record = 'meta' in scope ? scope.meta : {}
+
+ for (let [name, value] of Object.entries(meta)) {
+ str += indent.repeat(depth + 1)
+ str += '- '
+ str += name
+ str += ': '
+ str += value
+ str += '\n'
+ }
+ },
+ })
+
+ return str
+}
From 6161358d0c0e5f9ecc15d1c9a028c475395dee2f Mon Sep 17 00:00:00 2001
From: Jordan Pittman
Date: Wed, 5 Mar 2025 19:46:36 -0500
Subject: [PATCH 04/19] virtual doc scopes
---
.../src/documents/document.ts | 66 +++++++++++++++----
1 file changed, 54 insertions(+), 12 deletions(-)
diff --git a/packages/tailwindcss-language-service/src/documents/document.ts b/packages/tailwindcss-language-service/src/documents/document.ts
index e82efc04..79336c36 100644
--- a/packages/tailwindcss-language-service/src/documents/document.ts
+++ b/packages/tailwindcss-language-service/src/documents/document.ts
@@ -1,8 +1,10 @@
import type { Position, TextDocument } from 'vscode-languageserver-textdocument'
-import type { State } from '../util/state'
+import type { Span, State } from '../util/state'
+import { ScopeTree } from '../scopes/tree'
+import { ScopePath, walkScope } from '../scopes/walk'
+import { ScopeContext } from '../scopes/scope'
import { LanguageBoundary } from '../util/getLanguageBoundaries'
import { isWithinRange } from '../util/isWithinRange'
-import { getTextWithoutComments } from '../util/doc'
export type DocumentContext = 'html' | 'css' | 'js' | 'other' | (string & {})
@@ -29,34 +31,57 @@ export class VirtualDocument {
*/
private boundaries: LanguageBoundary[]
+ /**
+ * A description of this document's "interesting" parts
+ *
+ * This is used to determine how the document is structured and what parts
+ * are relevant to the current operation.
+ *
+ * For example, we can use this to get all class lists in a document, to
+ * determine if the cursor is in a class name, or what part of a document is
+ * considered "CSS" inside HTML or Vue documents.
+ */
+ private scopes: ScopeTree
+
constructor(
state: () => State,
storage: TextDocument,
boundaries: LanguageBoundary[],
+ scopes: ScopeTree,
) {
this.state = state
this.storage = storage
this.boundaries = boundaries
+ this.scopes = scopes
}
/**
* The current content of the document
*/
public get contents() {
+ let spans: Span[] = []
+
+ walkScope(this.scopes.all(), {
+ enter(node) {
+ if (node.kind !== 'comment') return
+ spans.push(node.source.scope)
+ },
+ })
+
+ // TODO: Drop comment removal once all features only query scopes
+ let text = this.storage.getText()
+
// Replace all comment nodes with whitespace
let tmp = ''
-
- let type = this.boundaries[0].type
- if (type === 'html') {
- tmp = getTextWithoutComments(this.storage, 'html')
- } else if (type === 'css') {
- tmp = getTextWithoutComments(this.storage, 'css')
- } else if (type === 'js') {
- tmp = getTextWithoutComments(this.storage, 'js')
- } else if (type === 'jsx') {
- tmp = getTextWithoutComments(this.storage, 'jsx')
+ let last = 0
+ for (let [start, end] of spans) {
+ tmp += text.slice(last, start)
+ tmp += text.slice(start, end).replace(/./gs, (char) => (char === '\n' ? '\n' : ' '))
+ last = end
}
+ tmp += text.slice(last)
+
return tmp
}
@@ -72,4 +97,21 @@ export class VirtualDocument {
return null
}
+
+ /**
+ * Find the inner-most scope containing a given cursor position.
+ */
+ public scopeAt(cursor: Position): ScopePath {
+ return this.scopes.at(this.storage.offsetAt(cursor))
+ }
+
+ /**
+ * Find the inner-most scope containing a given cursor position.
+ */
+ public contextAt(cursor: Position): ScopeContext {
+ let scope = this.scopes.closestAt('context', this.storage.offsetAt(cursor))
+ if (!scope) throw new Error('Unreachable')
+
+ return scope
+ }
}
From 83640ae4eaca17e4c0df92c408cbb853ae6f509f Mon Sep 17 00:00:00 2001
From: Jordan Pittman
Date: Mon, 10 Feb 2025 20:44:20 -0500
Subject: [PATCH 05/19] Collect `Scope`s about class attrs, lists, and names
---
.../src/scopes/analyze.ts | 46 ++++++++++++-
.../src/scopes/scope.ts | 69 +++++++++++++++++++
2 files changed, 114 insertions(+), 1 deletion(-)
diff --git a/packages/tailwindcss-language-service/src/scopes/analyze.ts b/packages/tailwindcss-language-service/src/scopes/analyze.ts
index 540eedb2..cf940b9e 100644
--- a/packages/tailwindcss-language-service/src/scopes/analyze.ts
+++ b/packages/tailwindcss-language-service/src/scopes/analyze.ts
@@ -1,10 +1,13 @@
import type { TextDocument } from 'vscode-languageserver-textdocument'
-import type { Span, State } from '../util/state'
+import type { DocumentClassList, Span, State } from '../util/state'
import type {
ScopeContext,
+ ScopeClassList,
+ ScopeClassName,
} from './scope'
import { ScopeTree } from './tree'
import { getDocumentLanguages, LanguageBoundary } from '../util/getLanguageBoundaries'
+import { findClassListsInRange, getClassNamesInClassList } from '../util/find'
import { optimizeScopes } from './walk'
import { isSemicolonlessCssLanguage } from '../util/languages'
@@ -65,3 +68,44 @@ export async function* analyzeBoundaries(
yield root
}
}
+
+/**
+ * Find all class lists and classes within the given block of text
+ */
+async function* analyzeClassLists(
+ state: State,
+ doc: TextDocument,
+ boundary: LanguageBoundary,
+): AsyncIterable {
+ let classLists: DocumentClassList[] = []
+
+ if (boundary.type === 'html') {
+ classLists = await findClassListsInRange(state, doc, boundary.range, 'html')
+ } else if (boundary.type === 'js') {
+ classLists = await findClassListsInRange(state, doc, boundary.range, 'jsx')
+ } else if (boundary.type === 'jsx') {
+ classLists = await findClassListsInRange(state, doc, boundary.range, 'jsx')
+ } else if (boundary.type === 'css') {
+ classLists = await findClassListsInRange(state, doc, boundary.range, 'css')
+ }
+
+ for (let classList of classLists) {
+ let listScope: ScopeClassList = {
+ kind: 'class.list',
+ children: [],
+ source: { scope: classList.span },
+ }
+
+ let classNames = getClassNamesInClassList(classList, state.blocklist)
+
+ for (let className of classNames) {
+ listScope.children.push({
+ kind: 'class.name',
+ children: [],
+ source: { scope: className.span },
+ })
+ }
+
+ yield listScope
+ }
+}
diff --git a/packages/tailwindcss-language-service/src/scopes/scope.ts b/packages/tailwindcss-language-service/src/scopes/scope.ts
index 4f662baf..09246b89 100644
--- a/packages/tailwindcss-language-service/src/scopes/scope.ts
+++ b/packages/tailwindcss-language-service/src/scopes/scope.ts
@@ -75,10 +75,79 @@ export interface ScopeContext {
}
}
+/**
+ * Text that represents a class attribute
+ *
+ * This generally contains a single class list but may contain multiple if the
+ * attribute is being interpolated
+ *
+ * ```
+ *
+ * ^^^^^^^^^^^^^^^^^^^^^^
+ *
+ * ^^^^^^^^^^^^^^^^^^^^^^^^
+ *
+ * ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+ * ```
+ */
+export interface ScopeClassAttribute {
+ kind: 'class.attr'
+ children: AnyScope[]
+
+ meta: {
+ static: boolean
+ }
+
+ source: {
+ scope: Span
+ }
+}
+
+/**
+ * Text that may contain one or more classes in a space-separated list
+ *
+ * ```
+ *
+ * ^^^^^^^^^^^^^^^^^^^^^^
+ * @apply bg-blue-500 text-white;
+ * ^^^^^^^^^^^^^^^^^^^^^^
+ * ```
+ */
+export interface ScopeClassList {
+ kind: 'class.list'
+ children: AnyScope[]
+
+ source: {
+ scope: Span
+ }
+}
+
+/**
+ * Text that represents a single class
+ *
+ * ```
+ *
+ * ^^^^^^^^^^^ ^^^^^^^^^^
+ * @apply bg-blue-500 text-white;
+ * ^^^^^^^^^^^ ^^^^^^^^^^
+ * ```
+ */
+export interface ScopeClassName {
+ kind: 'class.name'
+ children: AnyScope[]
+
+ source: {
+ scope: Span
+ }
+}
+
export type ScopeKind = keyof ScopeMap
export type Scope
= ScopeMap[K]
export type AnyScope = ScopeMap[ScopeKind]
type ScopeMap = {
context: ScopeContext
+ 'class.attr': ScopeClassAttribute
+ 'class.list': ScopeClassList
+ 'class.name': ScopeClassName
}
From 81a3b5f5b6a3cc223cb2137e2da24944d0b747cf Mon Sep 17 00:00:00 2001
From: Jordan Pittman
Date: Fri, 28 Feb 2025 18:34:53 -0500
Subject: [PATCH 06/19] Add class list parser
---
.../src/scopes/classes/scan.ts | 22 +++++++++++++++++++
1 file changed, 22 insertions(+)
create mode 100644 packages/tailwindcss-language-service/src/scopes/classes/scan.ts
diff --git a/packages/tailwindcss-language-service/src/scopes/classes/scan.ts b/packages/tailwindcss-language-service/src/scopes/classes/scan.ts
new file mode 100644
index 00000000..0a6cfb46
--- /dev/null
+++ b/packages/tailwindcss-language-service/src/scopes/classes/scan.ts
@@ -0,0 +1,22 @@
+import { ScopeClassList } from '../scope'
+
+export function scanClassList(input: string, scope: ScopeClassList) {
+ let classList = input.slice(scope.source.scope[0], scope.source.scope[1])
+ let parts = classList.split(/(\s+)/)
+
+ let index = scope.source.scope[0]
+
+ for (let i = 0; i < parts.length; i++) {
+ let length = parts[i].length
+
+ if (i % 2 === 0) {
+ scope.children.push({
+ kind: 'class.name',
+ source: { scope: [index, index + length] },
+ children: [],
+ })
+ }
+
+ index += length
+ }
+}
From 645a7e6707ed17d02802d6a32bfcbd8c38e9b07d Mon Sep 17 00:00:00 2001
From: Jordan Pittman
Date: Fri, 28 Feb 2025 18:34:54 -0500
Subject: [PATCH 07/19] Add HTML document parser
This reads an HTML document and produces a `ScopeContext` with all HTML-like features analyzed
---
.../src/scopes/html/scan.test.ts | 189 +++++++++++++++
.../src/scopes/html/scan.ts | 149 ++++++++++++
.../src/scopes/html/stream.test.ts | 227 ++++++++++++++++++
.../src/scopes/html/stream.ts | 220 +++++++++++++++++
4 files changed, 785 insertions(+)
create mode 100644 packages/tailwindcss-language-service/src/scopes/html/scan.test.ts
create mode 100644 packages/tailwindcss-language-service/src/scopes/html/scan.ts
create mode 100644 packages/tailwindcss-language-service/src/scopes/html/stream.test.ts
create mode 100644 packages/tailwindcss-language-service/src/scopes/html/stream.ts
diff --git a/packages/tailwindcss-language-service/src/scopes/html/scan.test.ts b/packages/tailwindcss-language-service/src/scopes/html/scan.test.ts
new file mode 100644
index 00000000..641f54d3
--- /dev/null
+++ b/packages/tailwindcss-language-service/src/scopes/html/scan.test.ts
@@ -0,0 +1,189 @@
+import dedent from 'dedent'
+import { test } from 'vitest'
+import { scanHtml } from './scan'
+
+test('parses HTML', async ({ expect }) => {
+ let input = dedent`
+
+
+
+ `
+
+ let scope = scanHtml({
+ input,
+ offset: 0,
+ classAttributes: [],
+ })
+
+ expect(scope).toEqual({
+ kind: 'context',
+ source: {
+ scope: [0, 84],
+ },
+ meta: {
+ lang: 'html',
+ syntax: 'html',
+ },
+ children: [
+ {
+ kind: 'context',
+ source: {
+ scope: [32, 68],
+ },
+ meta: {
+ lang: 'js',
+ syntax: 'js',
+ },
+ children: [],
+ },
+ ],
+ })
+})
+
+test('Identifies HTML comments', async ({ expect }) => {
+ let input = dedent`
+
+
+
+ `
+
+ let scope = scanHtml({
+ input,
+ offset: 0,
+ classAttributes: [],
+ })
+
+ expect(scope).toEqual({
+ children: [
+ {
+ kind: 'comment',
+ source: { scope: [24, 52] },
+ children: [],
+ },
+ ],
+ kind: 'context',
+ meta: {
+ lang: 'html',
+ syntax: 'html',
+ },
+ source: {
+ scope: [0, 59],
+ },
+ })
+})
+
+test('Identifies class attributes', async ({ expect }) => {
+ let input = dedent`
+
+
+
+
+
+
+
+ `
+
+ let scope = scanHtml({
+ input,
+ offset: 0,
+ classAttributes: ['class', 'className'],
+ })
+
+ expect(scope).toEqual({
+ kind: 'context',
+ source: {
+ scope: [0, 275],
+ },
+ meta: {
+ lang: 'html',
+ syntax: 'html',
+ },
+ children: [
+ {
+ kind: 'class.attr',
+ meta: { static: true },
+ source: { scope: [12, 16] },
+ children: [],
+ },
+ {
+ kind: 'class.attr',
+ meta: { static: false },
+ source: { scope: [35, 41] },
+ children: [],
+ },
+ {
+ kind: 'class.attr',
+ meta: { static: false },
+ source: { scope: [68, 74] },
+ children: [],
+ },
+ {
+ kind: 'class.attr',
+ meta: { static: false },
+ source: { scope: [102, 108] },
+ children: [],
+ },
+ {
+ kind: 'class.attr',
+ meta: { static: true },
+ source: { scope: [137, 143] },
+ children: [],
+ },
+ {
+ kind: 'class.attr',
+ meta: { static: false },
+ source: { scope: [176, 256] },
+ children: [],
+ },
+ ],
+ })
+})
+
+test('quotes ignore element detection', async ({ expect }) => {
+ let input = dedent`
+
+
+
+ `
+
+ let scope = scanHtml({
+ input,
+ offset: 0,
+ classAttributes: ['class', 'className'],
+ })
+
+ expect(scope).toEqual({
+ kind: 'context',
+ source: {
+ scope: [0, 67],
+ },
+ meta: {
+ lang: 'html',
+ syntax: 'html',
+ },
+ children: [
+ {
+ kind: 'class.attr',
+ meta: { static: true },
+ source: { scope: [12, 16] },
+ children: [],
+ },
+ {
+ kind: 'class.attr',
+ meta: { static: true },
+ source: { scope: [34, 51] },
+ children: [],
+ },
+ ],
+ })
+})
diff --git a/packages/tailwindcss-language-service/src/scopes/html/scan.ts b/packages/tailwindcss-language-service/src/scopes/html/scan.ts
new file mode 100644
index 00000000..d410b294
--- /dev/null
+++ b/packages/tailwindcss-language-service/src/scopes/html/scan.ts
@@ -0,0 +1,149 @@
+import { ScopeClassAttribute, ScopeComment, ScopeContext } from '../scope'
+import { createHtmlStream, StreamOptions } from './stream'
+
+function newContext(start: number): ScopeContext {
+ return {
+ kind: 'context',
+ source: {
+ scope: [start, start],
+ },
+ meta: {
+ syntax: 'html',
+ lang: 'html',
+ },
+ children: [],
+ }
+}
+
+function newComment(start: number): ScopeComment {
+ return {
+ kind: 'comment',
+ source: {
+ scope: [start, start],
+ },
+ children: [],
+ }
+}
+
+function newClassAttr(start: number, end: number): ScopeClassAttribute {
+ return {
+ kind: 'class.attr',
+ meta: {
+ static: true,
+ },
+ source: {
+ scope: [start, end],
+ },
+ children: [],
+ }
+}
+
+const enum State {
+ Idle,
+ InComment,
+ WaitForTagOpen,
+ WaitForTagClose,
+}
+
+interface ScanOptions extends StreamOptions {
+ /** A list of attributes which will get `class.attr` scopes */
+ classAttributes: string[]
+}
+
+export function scanHtml({ input, offset, classAttributes }: ScanOptions): ScopeContext {
+ // Compile a regex to match class attributes in the form of:
+ // - class
+ // - [class]
+ // - :class
+ // - :[class]
+ let patternAttrs = classAttributes.flatMap((x) => [x, `\\[${x}\\]`]).flatMap((x) => [x, `:${x}`])
+ let isClassAttr = new RegExp(`^(${patternAttrs.join('|')})$`, 'i')
+
+ let root = newContext(0)
+ root.source.scope[1] = input.length
+
+ let state = State.Idle
+ let context: ScopeContext = newContext(0)
+ let comment: ScopeComment = newComment(0)
+ let currentTag = ''
+ let currentAttr = ''
+
+ for (let event of createHtmlStream({ input, offset })) {
+ // Element attributes
+ if (event.kind === 'attr-name') {
+ currentAttr = input.slice(event.span[0], event.span[1])
+ }
+
+ // Attribute values
+ else if (event.kind === 'attr-value' || event.kind === 'attr-expr') {
+ let value = input.slice(event.span[0], event.span[1])
+
+ if (currentAttr === 'lang' || currentAttr === 'type') {
+ context.meta.lang = value
+ continue
+ }
+
+ if (classAttributes.length && isClassAttr.test(currentAttr)) {
+ let scope = newClassAttr(event.span[0], event.span[1])
+ if (event.kind === 'attr-expr') {
+ scope.meta.static = false
+ } else if (currentAttr[0] === ':') {
+ scope.meta.static = false
+ } else if (currentAttr[0] === '[' && currentAttr[currentAttr.length - 1] === ']') {
+ scope.meta.static = false
+ }
+
+ root.children.push(scope)
+ }
+ }
+
+ // Comments
+ else if (event.kind === 'comment-start') {
+ comment = newComment(event.span[0])
+ state = State.InComment
+ } else if (event.kind === 'comment-end') {
+ if (state === State.InComment) {
+ comment.source.scope[1] = event.span[1]
+ root.children.push(comment)
+ state = State.Idle
+ }
+ }
+
+ // Elements
+ else if (event.kind === 'element-start') {
+ let tag = input.slice(event.span[0], event.span[1])
+ if (tag === ' ({
+ ...event,
+ slice: input.slice(...event.span),
+ }))
+}
+
+test('parses HTML', async ({ expect }) => {
+ let input = dedent`
+
+
+
+ `
+
+ expect(extract(input)).toEqual([
+ {
+ kind: 'element-start',
+ span: [0, 4],
+ slice: '',
+ },
+ {
+ kind: 'element-start',
+ span: [24, 29],
+ slice: '',
+ },
+ {
+ kind: 'element-start',
+ span: [30, 36],
+ slice: '',
+ },
+ {
+ kind: 'element-start',
+ span: [38, 43],
+ slice: '',
+ },
+ ])
+})
+
+test('Identifies HTML comments', async ({ expect }) => {
+ let input = dedent`
+
+
+
+ `
+
+ expect(extract(input)).toEqual([
+ {
+ kind: 'element-start',
+ span: [0, 4],
+ slice: '',
+ },
+ {
+ kind: 'comment-start',
+ span: [24, 28],
+ slice: '',
+ },
+ {
+ kind: 'element-start',
+ span: [53, 58],
+ slice: '',
+ },
+ ])
+})
+
+test('lots of attributes', async ({ expect }) => {
+ let input = dedent`
+
+
+
+
+
+ `
+
+ expect(extract(input)).toMatchInlineSnapshot([
+ {
+ kind: 'element-start',
+ slice: '',
+ span: [17, 18],
+ },
+ {
+ kind: 'element-start',
+ slice: '',
+ span: [42, 43],
+ },
+ {
+ kind: 'element-start',
+ slice: '',
+ span: [75, 76],
+ },
+ {
+ kind: 'element-start',
+ slice: '',
+ span: [109, 110],
+ },
+ {
+ kind: 'element-start',
+ slice: '',
+ span: [123, 124],
+ },
+ ])
+})
diff --git a/packages/tailwindcss-language-service/src/scopes/html/stream.ts b/packages/tailwindcss-language-service/src/scopes/html/stream.ts
new file mode 100644
index 00000000..db4c9f01
--- /dev/null
+++ b/packages/tailwindcss-language-service/src/scopes/html/stream.ts
@@ -0,0 +1,220 @@
+import { Span } from '../../util/state'
+
+const QUOTE_SINGLE = "'".charCodeAt(0)
+const QUOTE_DOUBLE = '"'.charCodeAt(0)
+const QUOTE_TICK = '`'.charCodeAt(0)
+const CURLY_OPEN = '{'.charCodeAt(0)
+const CURLY_CLOSE = '}'.charCodeAt(0)
+const TAG_END = '>'.charCodeAt(0)
+const TAG_START = '<'.charCodeAt(0)
+const EXCLAIMATION = '!'.charCodeAt(0)
+const EQUALS = '='.charCodeAt(0)
+
+const WS_SPACE = ' '.charCodeAt(0)
+const WS_TAB = '\t'.charCodeAt(0)
+const WS_NEWLINE = '\n'.charCodeAt(0)
+const WS_RETURN = '\r'.charCodeAt(0)
+const WS_FEED = '\x0C'.charCodeAt(0)
+
+/// Represents a piece of information about a tag in an HTML document
+export type Event =
+ /// The start of a comment
+ ///
+ /// ^^^^
+ | { kind: 'comment-start'; span: Span }
+
+ /// The end of a comment
+ ///
+ /// ^^^
+ | { kind: 'comment-end'; span: Span }
+
+ /// The start of a tag
+ ///
+ /// ^^^^^^^^
+ | { kind: 'element-start'; span: Span }
+
+ /// The end of an element definition
+ ///
+ /// ^
+ | { kind: 'element-end'; span: Span }
+
+ /// An attribute name
+ ///
+