Collect Scopes about at-rules

Author: thecrypticace

packages/tailwindcss-language-service/src/scopes/analyze.ts

@@ -2,6 +2,7 @@ import type { TextDocument } from 'vscode-languageserver-textdocument'
 import type { DocumentClassList, Span, State } from '../util/state'
 import type {
   ScopeContext,
+  ScopeAtRule,
   ScopeClassList,
   ScopeClassName,
 } from './scope'
@@ -109,3 +110,108 @@ async function* analyzeClassLists(
     yield listScope
   }
 }
+
+const AT_RULE = /(?<name>@[a-z-]+)\s*(?<params>[^;{]*)(?:[;{]|$)/dg
+
+interface AtRuleDescriptor {
+  name: Span
+  params: Span
+  body: Span | null
+}
+
+/**
+ * Find all class lists and classes within the given block of text
+ */
+function* analyzeAtRules(boundary: LanguageBoundary, slice: string): Iterable<ScopeAtRule> {
+  if (boundary.type !== 'css') return
+
+  let rules: AtRuleDescriptor[] = []
+
+  // Look for at-rules like `@apply` and `@screen`
+  // These _may not be complete_ but that's okay
+  // We just want to know that they're there and where they are
+  for (let match of slice.matchAll(AT_RULE)) {
+    rules.push({
+      name: match.indices!.groups!.name,
+      params: match.indices!.groups!.params,
+      body: null,
+    })
+  }
+
+  for (let rule of rules) {
+    // Scan forward from each at-rule to find the body
+    // This is a bit naive but it's good enough for now
+    let depth = 0
+    for (let i = rule.params[1]; i < slice.length; ++i) {
+      if (depth === 0 && slice[i] === ';') {
+        break
+      }
+
+      //
+      else if (slice[i] === '{') {
+        depth += 1
+
+        if (depth === 1) {
+          rule.body = [i, i]
+        }
+      }
+
+      //
+      else if (slice[i] === '}') {
+        depth -= 1
+
+        if (depth === 0) {
+          rule.body![1] = i
+          break
+        }
+      }
+    }
+
+    for (let scope of analyzeAtRule(boundary, slice, rule)) {
+      yield scope
+    }
+  }
+}
+
+function* analyzeAtRule(
+  boundary: LanguageBoundary,
+  slice: string,
+  desc: AtRuleDescriptor,
+): Iterable<ScopeAtRule> {
+  let name = slice.slice(desc.name[0], desc.name[1])
+  let params = slice.slice(desc.params[0], desc.params[1]).trim()
+  let parts = segment(params, ' ')
+
+  // Offset spans so they're document-relative
+  let offset = boundary.span[0]
+  let overallSpan: Span = [desc.name[0], desc.body ? desc.body[1] : desc.params[1]]
+  let nameSpan: Span = [desc.name[0], desc.name[1]]
+  let paramsSpan: Span = [desc.params[0], desc.params[1]]
+  let bodySpan: Span | null = desc.body ? [desc.body[0], desc.body[1]] : null
+
+  overallSpan[0] += offset
+  overallSpan[1] += offset
+  nameSpan[0] += offset
+  nameSpan[1] += offset
+  paramsSpan[0] += offset
+  paramsSpan[1] += offset
+
+  if (bodySpan) {
+    bodySpan[0] += offset
+    bodySpan[1] += offset
+  }
+
+  let scope: ScopeAtRule = {
+    kind: 'css.at-rule',
+    children: [],
+
+    source: {
+      scope: overallSpan,
+      name: nameSpan,
+      params: paramsSpan,
+      body: bodySpan,
+    },
+  }
+
+  yield scope
+}

packages/tailwindcss-language-service/src/scopes/scope.ts

@@ -167,6 +167,40 @@ export interface ScopeClassName {
   }
 }
 
+/**
+ * Represents an at-rule in CSS
+ *
+ * ```
+ * @media (min-width: 600px) { ... }
+ * ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+ * @apply bg-blue-500 text-white;
+ * ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+ * ```
+ */
+export interface ScopeAtRule {
+  kind: 'css.at-rule'
+  children: AnyScope[]
+
+  source: {
+    scope: Span
+
+    // Marks the name of an at-rule
+    // @media (min-width: 600px) { ... }
+    // ^^^^^^
+    name: Span
+
+    // Marks the parameters of an at-rule
+    // @media (min-width: 600px) { ... }
+    //        ^^^^^^^^^^^^^^^^^^
+    params: Span
+
+    // Marks the body of an at-rule
+    // @media (min-width: 600px) { ... }
+    //                            ^^^^^
+    body: Span | null
+  }
+}
+
 export type ScopeKind = keyof ScopeMap
 export type Scope<K extends ScopeKind> = ScopeMap[K]
 export type AnyScope = ScopeMap[ScopeKind]
@@ -177,4 +211,5 @@ type ScopeMap = {
   'class.attr': ScopeClassAttribute
   'class.list': ScopeClassList
   'class.name': ScopeClassName
+  'css.at-rule': ScopeAtRule
 }