+ * ^
+ * ```
+ *
+ * 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
+}
diff --git a/packages/tailwindcss-language-service/src/util/find.ts b/packages/tailwindcss-language-service/src/util/find.ts
index f38d7a16..9e18aecb 100644
--- a/packages/tailwindcss-language-service/src/util/find.ts
+++ b/packages/tailwindcss-language-service/src/util/find.ts
@@ -33,7 +33,7 @@ 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+)/)
@@ -41,13 +41,16 @@ export function getClassNamesInClassList(
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,
+ ],
+ },
}
})
}
diff --git a/packages/tailwindcss-language-service/src/util/getLanguageBoundaries.ts b/packages/tailwindcss-language-service/src/util/getLanguageBoundaries.ts
index 42a4a495..5ca4fbf9 100644
--- a/packages/tailwindcss-language-service/src/util/getLanguageBoundaries.ts
+++ b/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'
+import { isCssDoc, 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: /\s])/, push: 'cssBlock' },
jsBlockStart: { match: ' {
+ private tree: ScopeTree
+ private cursor: number
+
+ constructor() {
+ this.tree = new ScopeTree([])
+ }
+
+ getParent(element: TreeData): vscode.ProviderResult {
+ if ('name' in element) {
+ if (!element.span) return null
+
+ let path = this.tree.at(element.span[0])
+ let parent = path.at(-1)
+ if (!parent) return null
+
+ return parent
+ }
+
+ let path = this.tree.pathTo(element)
+ let index = path.indexOf(element)
+ if (index === -1) return null
+
+ let parent = path[index - 1]
+ if (!parent) return null
+
+ return parent
+ }
+
+ getTreeItem(scope: TreeData): vscode.TreeItem {
+ if ('name' in scope) {
+ return new SourceItem(scope)
+ }
+
+ let isOpen = scope.source.scope[0] <= this.cursor && this.cursor <= scope.source.scope[1]
+
+ let state =
+ scope.children.length > 0
+ ? isOpen
+ ? vscode.TreeItemCollapsibleState.Expanded
+ : vscode.TreeItemCollapsibleState.Collapsed
+ : vscode.TreeItemCollapsibleState.None
+
+ return new ScopeItem(scope, state)
+ }
+
+ async getChildren(element?: TreeData): Promise {
+ if (!element) {
+ return this.tree.all()
+ }
+
+ if ('name' in element) return []
+
+ let children: TreeData[] = []
+
+ for (let [name, span] of Object.entries(element.source)) {
+ if (name === 'scope') continue
+ children.push({ name, span })
+ }
+
+ children.push(...element.children)
+
+ return children
+ }
+
+ update(options: Partial) {
+ this.tree = options.tree ?? this.tree
+ this.cursor = options.cursor ?? this.cursor
+ this._onDidChangeTreeData.fire()
+ }
+
+ private _onDidChangeTreeData: vscode.EventEmitter =
+ new vscode.EventEmitter()
+ readonly onDidChangeTreeData: vscode.Event =
+ this._onDidChangeTreeData.event
+}
+
+class ScopeItem extends vscode.TreeItem {
+ constructor(scope: AnyScope, state: vscode.TreeItemCollapsibleState) {
+ let label: vscode.TreeItemLabel = {
+ label: `${scope.kind} [${scope.source.scope[0]}-${scope.source.scope[1]}]`,
+ }
+
+ super(label, state)
+ this.iconPath = new vscode.ThemeIcon('code')
+ this.tooltip = new vscode.MarkdownString(
+ `\`\`\`json\n${JSON.stringify({ ...scope, children: undefined }, null, 2)}\n\`\`\``,
+ )
+ }
+}
+
+class SourceItem extends vscode.TreeItem {
+ constructor(source: AnySource) {
+ let label: vscode.TreeItemLabel = {
+ label: `- ${source.name}: `,
+ }
+
+ if (source.span) {
+ label.label += `[${source.span[0]}-${source.span[1]}]`
+ } else {
+ label.label += '(none)'
+ }
+
+ super(label, vscode.TreeItemCollapsibleState.None)
+ this.iconPath = new vscode.ThemeIcon('code')
+ }
+}
+
+interface ScopeProviderOptions {
+ readonly client: Promise | null
+}
+
+export function registerScopeProvider(opts: ScopeProviderOptions): vscode.Disposable {
+ let trees: Map = new Map()
+ let emptyTree = new ScopeTree([])
+ let scopeProvider = new ScopeProvider()
+ let disposables: vscode.Disposable[] = []
+
+ let treeView = vscode.window.createTreeView('scopes', {
+ treeDataProvider: scopeProvider,
+ })
+
+ disposables.push(treeView)
+
+ vscode.workspace.onDidChangeTextDocument(
+ async (event) => {
+ if (event.document !== vscode.window.activeTextEditor.document) return
+ if (!opts.client) return
+
+ let client = await opts.client
+
+ interface ScopesGetResponse {
+ scopes: AnyScope[]
+ }
+
+ let response = await client.sendRequest('@/tailwindCSS/scopes/get', {
+ uri: event.document.uri.toString(),
+ })
+
+ let tree = new ScopeTree(response.scopes)
+ trees.set(event.document.uri.toString(), tree)
+
+ await refresh()
+ },
+ null,
+ disposables,
+ )
+
+ vscode.window.onDidChangeActiveTextEditor(
+ async () => {
+ await refresh()
+ },
+ null,
+ disposables,
+ )
+
+ vscode.window.onDidChangeTextEditorSelection(
+ async (event) => {
+ if (event.textEditor !== vscode.window.activeTextEditor) return
+
+ let editor = event.textEditor
+ let cursor = editor.document.offsetAt(editor.selection.active)
+ let tree = trees.get(editor.document.uri.toString()) ?? emptyTree
+ let scope = tree.at(cursor).at(-1)
+
+ if (scope) {
+ treeView.reveal(scope, {
+ // select: false,
+ // focus: true,
+ expand: true,
+ })
+ }
+ },
+ null,
+ disposables,
+ )
+
+ async function refresh() {
+ if (!opts.client) return
+
+ let editor = vscode.window.activeTextEditor
+ let cursor = editor.document.offsetAt(editor.selection.active)
+
+ scopeProvider.update({
+ tree: trees.get(editor.document.uri.toString()) ?? emptyTree,
+ cursor,
+ })
+ }
+
+ let decoration = vscode.window.createTextEditorDecorationType({
+ backgroundColor: 'rgba(0, 0, 0, 0.1)',
+ })
+
+ disposables.push(decoration)
+
+ function decorationForScope(scope: AnyScope) {
+ let depth = 0
+ for (let tree of trees.values()) {
+ let path = tree.pathTo(scope)
+ if (path.length > 0) {
+ depth = path.length
+ break
+ }
+ }
+
+ return decoration
+ }
+
+ return new vscode.Disposable(() => {
+ disposables.forEach((disposable) => disposable.dispose())
+ })
+}
diff --git a/packages/vscode-tailwindcss/tsconfig.json b/packages/vscode-tailwindcss/tsconfig.json
index 4f3a8ec5..3b30d56e 100755
--- a/packages/vscode-tailwindcss/tsconfig.json
+++ b/packages/vscode-tailwindcss/tsconfig.json
@@ -1,7 +1,7 @@
{
"compilerOptions": {
"module": "commonjs",
- "target": "es6",
+ "target": "ES2022",
"lib": ["ES2022"],
"rootDir": "..",
"sourceMap": true,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f1048aaa..fc228251 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -309,6 +309,9 @@ importers:
'@types/stringify-object':
specifier: ^4.0.5
version: 4.0.5
+ dedent:
+ specifier: ^1.5.3
+ version: 1.5.3
esbuild:
specifier: ^0.25.0
version: 0.25.0
@@ -318,6 +321,9 @@ importers:
minimist:
specifier: ^1.2.8
version: 1.2.8
+ mitata:
+ specifier: ^1.0.34
+ version: 1.0.34
tslib:
specifier: 2.2.0
version: 2.2.0
@@ -1878,6 +1884,9 @@ packages:
resolution: {integrity: sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==}
engines: {node: '>=16 || 14 >=14.17'}
+ mitata@1.0.34:
+ resolution: {integrity: sha512-Mc3zrtNBKIMeHSCQ0XqRLo1vbdIx1wvFV9c8NJAiyho6AjNfMY8bVhbS12bwciUdd1t4rj8099CH3N3NFahaUA==}
+
mkdirp-classic@0.5.3:
resolution: {integrity: sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==}
@@ -4177,6 +4186,8 @@ snapshots:
minipass@7.0.4: {}
+ mitata@1.0.34: {}
+
mkdirp-classic@0.5.3:
optional: true