add classAttributes setting

Author: bradlc

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

@@ -14,7 +14,7 @@ import removeMeta from './util/removeMeta'
 import { getColor, getColorFromValue } from './util/color'
 import { isHtmlContext } from './util/html'
 import { isCssContext } from './util/css'
-import { findLast } from './util/find'
+import { findLast, matchClassAttributes } from './util/find'
 import { stringifyConfigValue, stringifyCss } from './util/stringify'
 import { stringifyScreen, Screen } from './util/screens'
 import isObject from './util/isObject'
@@ -327,25 +327,30 @@ export function completionsFromClassList(
   }
 }
 
-function provideClassAttributeCompletions(
+async function provideClassAttributeCompletions(
   state: State,
   document: TextDocument,
   position: Position,
   context?: CompletionContext
-): CompletionList {
+): Promise<CompletionList> {
   let str = document.getText({
     start: document.positionAt(Math.max(0, document.offsetAt(position) - 500)),
     end: position,
   })
 
-  const match = findLast(/(?:\s|:|\()(?:class(?:Name)?|\[ngClass\])\s*=\s*['"`{]/gi, str)
+  let matches = matchClassAttributes(
+    str,
+    (await state.editor.getConfiguration(document.uri)).tailwindCSS.classAttributes
+  )
 
-  if (match === null) {
+  if (matches.length === 0) {
     return null
   }
 
+  let match = matches[matches.length - 1]
+
   const lexer =
-    match[0][0] === ':' || match[0].trim().startsWith('[ngClass]')
+    match[0][0] === ':' || (match[1].startsWith('[') && match[1].endsWith(']'))
       ? getComputedClassAttributeLexer()
       : getClassAttributeLexer()
   lexer.reset(str.substr(match.index + match[0].length - 1))
@@ -490,12 +495,12 @@ function provideAtApplyCompletions(
   )
 }
 
-function provideClassNameCompletions(
+async function provideClassNameCompletions(
   state: State,
   document: TextDocument,
   position: Position,
   context?: CompletionContext
-): CompletionList {
+): Promise<CompletionList> {
   if (isCssContext(state, document, position)) {
     return provideAtApplyCompletions(state, document, position)
   }
@@ -1035,7 +1040,7 @@ export async function doComplete(
   if (state === null) return { items: [], isIncomplete: false }
 
   const result =
-    provideClassNameCompletions(state, document, position, context) ||
+    (await provideClassNameCompletions(state, document, position, context)) ||
     provideCssHelperCompletions(state, document, position) ||
     provideCssDirectiveCompletions(state, document, position) ||
     provideScreenDirectiveCompletions(state, document, position) ||

packages/tailwindcss-language-service/src/util/find.ts

@@ -172,16 +172,31 @@ async function findCustomClassLists(
   return result
 }
 
-export function findClassListsInHtmlRange(doc: TextDocument, range?: Range): DocumentClassList[] {
+export function matchClassAttributes(text: string, attributes: string[]): RegExpMatchArray[] {
+  const attrs = attributes.filter((x) => typeof x === 'string').flatMap((a) => [a, `\\[${a}\\]`])
+  const re = /(?:\s|:|\()(ATTRS)\s*=\s*['"`{]/
+  return findAll(new RegExp(re.source.replace('ATTRS', attrs.join('|')), 'gi'), text)
+}
+
+export async function findClassListsInHtmlRange(
+  state: State,
+  doc: TextDocument,
+  range?: Range
+): Promise<DocumentClassList[]> {
   const text = doc.getText(range)
-  const matches = findAll(/(?:\s|:|\()(?:class(?:Name)?|\[ngClass\])\s*=\s*['"`{]/gi, text)
+
+  const matches = matchClassAttributes(
+    text,
+    (await state.editor.getConfiguration(doc.uri)).tailwindCSS.classAttributes
+  )
+
   const result: DocumentClassList[] = []
 
   matches.forEach((match) => {
     const subtext = text.substr(match.index + match[0].length - 1)
 
     let lexer =
-      match[0][0] === ':' || match[0].trim().startsWith('[ngClass]')
+      match[0][0] === ':' || (match[1].startsWith('[') && match[1].endsWith(']'))
         ? getComputedClassAttributeLexer()
         : getClassAttributeLexer()
     lexer.reset(subtext)
@@ -273,7 +288,7 @@ export async function findClassListsInRange(
   if (mode === 'css') {
     classLists = findClassListsInCssRange(doc, range)
   } else {
-    classLists = findClassListsInHtmlRange(doc, range)
+    classLists = await findClassListsInHtmlRange(state, doc, range)
   }
   return [...classLists, ...(includeCustom ? await findCustomClassLists(state, doc, range) : [])]
 }
@@ -290,7 +305,9 @@ export async function findClassListsInDocument(
   if (!boundaries) return []
 
   return flatten([
-    ...boundaries.html.map((range) => findClassListsInHtmlRange(doc, range)),
+    ...(await Promise.all(
+      boundaries.html.map((range) => findClassListsInHtmlRange(state, doc, range))
+    )),
     ...boundaries.css.map((range) => findClassListsInCssRange(doc, range)),
     await findCustomClassLists(state, doc),
   ])

packages/tailwindcss-language-service/src/util/state.ts

@@ -39,6 +39,7 @@ export type Settings = {
   tailwindCSS: {
     emmetCompletions: boolean
     includeLanguages: Record<string, string>
+    classAttributes: string[]
     validate: boolean
     showPixelEquivalents: boolean
     rootFontSize: number

packages/vscode-tailwindcss/README.md

@@ -66,6 +66,10 @@ This setting allows you to add additional language support. The key of each entr
 
 Enable completions when using [Emmet](https://emmet.io/)-style syntax, for example `div.bg-red-500.uppercase`. **Default: `false`**
 
+### `tailwindCSS.classAttributes`
+
+The HTML attributes for which to provide class completions, hover previews, linting etc. **Default: `class`, `className`, `ngClass`**
+
 ### `tailwindCSS.colorDecorators`
 
 Controls whether the editor should render inline color decorators for Tailwind CSS classes and helper functions. **Default: `true`**

packages/vscode-tailwindcss/package.json

@@ -81,6 +81,18 @@
           "default": {},
           "markdownDescription": "Enable features in languages that are not supported by default. Add a mapping here between the new language and an already supported language.\n E.g.: `{\"plaintext\": \"html\"}`"
         },
+        "tailwindCSS.classAttributes": {
+          "type": "array",
+          "items": {
+            "type": "string"
+          },
+          "default": [
+            "class",
+            "className",
+            "ngClass"
+          ],
+          "markdownDescription": "The HTML attributes for which to provide class completions, hover previews, linting etc."
+        },
         "tailwindCSS.colorDecorators": {
           "type": "boolean",
           "default": true,