Add HTML document parser

This reads an HTML document and produces a `ScopeContext` with all HTML-like features analyzed

Author: thecrypticace

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`
+    <div class="example">
+      <script>
+        console.log('Hello, world!')
+      </script>
+    </div>
+  `
+
+  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`
+    <div class="example">
+      <!--
+        <span></span>
+      -->
+    </div>
+  `
+
+  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`
+    <div class="flex">
+      <span :class="flex-1"></span>
+      <span [class]="flex-2"></span>
+      <span :[class]="flex-3"></span>
+      <span className="flex-4"></span>
+      <span
+        className={clsx(
+          'flex-5',
+          { 'flex-6': true },
+          { 'flex-7': false },
+        )}
+      ></span>
+    </div>
+  `
+
+  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`
+    <div class="flex">
+      <span class="<script></script>"></span>
+    </div>
+  `
+
+  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: [],
+      },
+    ],
+  })
+})

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 === '<script') {
+        currentTag = tag
+        context = newContext(event.span[0])
+        context.meta.lang = 'js'
+        context.meta.syntax = 'js'
+        state = State.WaitForTagOpen
+      } else if (tag === '<style') {
+        currentTag = tag
+        context = newContext(event.span[0])
+        context.meta.lang = 'css'
+        context.meta.syntax = 'css'
+        state = State.WaitForTagOpen
+      } else if (tag === '</script') {
+        if (currentTag !== '<script') continue
+        context.source.scope[1] = event.span[0]
+        root.children.push(context)
+        context = root
+        state = State.Idle
+      } else if (tag === '</style') {
+        if (currentTag !== '<style') continue
+        context.source.scope[1] = event.span[0]
+        root.children.push(context)
+        context = root
+        state = State.Idle
+      }
+    } else if (event.kind === 'element-end') {
+      if (state === State.WaitForTagOpen) {
+        context.source.scope[0] = event.span[1]
+        state = State.Idle
+      }
+    }
+  }
+
+  return root
+}