Show estimated number of classes generated above to @source inline(…)

Author: thecrypticace

packages/tailwindcss-language-server/package.json

@@ -42,6 +42,7 @@
     "@tailwindcss/line-clamp": "0.4.2",
     "@tailwindcss/oxide": "^4.0.0-alpha.19",
     "@tailwindcss/typography": "0.5.7",
+    "@types/braces": "3.0.1",
     "@types/color-name": "^1.1.3",
     "@types/culori": "^2.1.0",
     "@types/debounce": "1.2.0",

packages/tailwindcss-language-server/tests/code-lens/source-inline.test.ts

@@ -0,0 +1,39 @@
+import { expect } from 'vitest'
+import { css, defineTest } from '../../src/testing'
+import { createClient } from '../utils/client'
+
+defineTest({
+  name: 'Code lenses are displayed for @source inline(…)',
+  fs: {
+    'app.css': css`
+      @import 'tailwindcss';
+    `,
+  },
+  prepare: async ({ root }) => ({
+    client: await createClient({ root }),
+  }),
+  handle: async ({ client }) => {
+    let document = await client.open({
+      lang: 'css',
+      text: css`
+        @import 'tailwindcss';
+        @source inline("{,{hover,focus}:}{flex,underline,bg-red-{50,{100..900.100},950}}");
+      `,
+    })
+
+    let lenses = await document.codeLenses()
+
+    expect(lenses).toEqual([
+      {
+        range: {
+          start: { line: 1, character: 15 },
+          end: { line: 1, character: 81 },
+        },
+        command: {
+          title: 'Generates 15 classes',
+          command: '',
+        },
+      },
+    ])
+  },
+})

packages/tailwindcss-language-service/package.json

@@ -40,6 +40,7 @@
     "vscode-languageserver-textdocument": "1.0.11"
   },
   "devDependencies": {
+    "@types/braces": "3.0.1",
     "@types/css.escape": "^1.5.2",
     "@types/line-column": "^1.0.2",
     "@types/node": "^18.19.33",

packages/tailwindcss-language-service/src/codeLensProvider.ts

@@ -1,13 +1,51 @@
-import type { TextDocument } from 'vscode-languageserver-textdocument'
+import type { Range, TextDocument } from 'vscode-languageserver-textdocument'
 import type { State } from './util/state'
 import type { CodeLens } from 'vscode-languageserver'
+import braces from 'braces'
+import { findAll, indexToPosition } from './util/find'
+import { absoluteRange } from './util/absoluteRange'
 
 export async function getCodeLens(state: State, doc: TextDocument): Promise<CodeLens[]> {
   if (!state.enabled) return []
 
   let groups: CodeLens[][] = await Promise.all([
     //
+    sourceInlineCodeLens(state, doc),
   ])
 
   return groups.flat()
 }
+
+const SOURCE_INLINE_PATTERN = /@source(?:\s+not)?\s*inline\((?<glob>'[^']+'|"[^"]+")/dg
+async function sourceInlineCodeLens(state: State, doc: TextDocument): Promise<CodeLens[]> {
+  let text = doc.getText()
+
+  let countFormatter = new Intl.NumberFormat('en', {
+    maximumFractionDigits: 2,
+  })
+
+  let lenses: CodeLens[] = []
+
+  for (let match of findAll(SOURCE_INLINE_PATTERN, text)) {
+    let glob = match.groups.glob.slice(1, -1)
+
+    // Perform brace expansion
+    let expanded = new Set<string>(braces.expand(glob))
+    if (expanded.size < 2) continue
+
+    let slice: Range = absoluteRange({
+      start: indexToPosition(text, match.indices.groups.glob[0]),
+      end: indexToPosition(text, match.indices.groups.glob[1]),
+    })
+
+    lenses.push({
+      range: slice,
+      command: {
+        title: `Generates ${countFormatter.format(expanded.size)} classes`,
+        command: '',
+      },
+    })
+  }
+
+  return lenses
+}