Added "tailwindCSS.experimental.classFunctions" option

Author: Laurynas Grigutis

packages/tailwindcss-language-server/src/config.ts

@@ -37,6 +37,7 @@ function getDefaultSettings(): Settings {
       experimental: {
         classRegex: [],
         configFile: null,
+        classFunctions: []
       },
     },
   }

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

@@ -15,7 +15,7 @@ import removeMeta from './util/removeMeta'
 import { formatColor, getColor, getColorFromValue } from './util/color'
 import { isHtmlContext, isHtmlDoc, isVueDoc } from './util/html'
 import { isCssContext } from './util/css'
-import { findLast, matchClassAttributes } from './util/find'
+import { findLast, matchClassAttributes, matchClassFunctions } from './util/find'
 import { stringifyConfigValue, stringifyCss } from './util/stringify'
 import { stringifyScreen, Screen } from './util/screens'
 import isObject from './util/isObject'
@@ -747,6 +747,10 @@ async function provideClassAttributeCompletions(
 
   let matches = matchClassAttributes(str, settings.classAttributes)
 
+  if (settings.experimental.classFunctions.length > 0) {
+    matches.push(...matchClassFunctions(str, settings.experimental.classFunctions))
+  }
+
   if (matches.length === 0) {
     return null
   }

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

@@ -164,6 +164,12 @@ export function matchClassAttributes(text: string, attributes: string[]): RegExp
   return findAll(new RegExp(re.source.replace('ATTRS', attrs.join('|')), 'gi'), text)
 }
 
+export function matchClassFunctions(text: string, fnNames: string[]): RegExpMatchArray[] {
+  const names = fnNames.filter((x) => typeof x === 'string')
+  const re = /\b(F_NAMES)\(/
+  return findAll(new RegExp(re.source.replace('F_NAMES', names.join('|')), 'gi'), text)
+}
+
 export async function findClassListsInHtmlRange(
   state: State,
   doc: TextDocument,
@@ -172,10 +178,12 @@ export async function findClassListsInHtmlRange(
 ): Promise<DocumentClassList[]> {
   const text = getTextWithoutComments(doc, type, range)
 
-  const matches = matchClassAttributes(
-    text,
-    (await state.editor.getConfiguration(doc.uri)).tailwindCSS.classAttributes,
-  )
+  const settings = (await state.editor.getConfiguration(doc.uri)).tailwindCSS
+  const matches = matchClassAttributes(text, settings.classAttributes)
+
+  if (settings.experimental.classFunctions.length > 0) {
+    matches.push(...matchClassFunctions(text, settings.experimental.classFunctions))
+  }
 
   const result: DocumentClassList[] = []
 

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

@@ -29,6 +29,14 @@ const classAttributeStates: () => { [x: string]: moo.Rules } = () => ({
     rbrace: { match: new RegExp('(?<!\\\\)\\}'), pop: 1 },
     text: { match: new RegExp('[\\s\\S]'), lineBreaks: true },
   },
+  interpParen: {
+    startSingle: { match: new RegExp("(?<!\\\\)'"), push: 'singleClassList' },
+    startDouble: { match: new RegExp('(?<!\\\\)"'), push: 'doubleClassList' },
+    startTick: { match: new RegExp('(?<!\\\\)`'), push: 'tickClassList' },
+    lbrace: { match: new RegExp('(?<!\\\\)\\('), push: 'interpParen' },
+    rbrace: { match: new RegExp('(?<!\\\\)\\)'), pop: 1 },
+    text: { match: new RegExp('[\\s\\S]'), lineBreaks: true },
+  },
   interpSingle: {
     startDouble: { match: new RegExp('(?<!\\\\)"'), push: 'doubleClassList' },
     startTick: { match: new RegExp('(?<!\\\\)`'), push: 'tickClassList' },
@@ -73,6 +81,7 @@ export const getClassAttributeLexer = lazy(() => {
         start2: { match: "'", push: 'singleClassList' },
         start3: { match: '{', push: 'interpBrace' },
         start4: { match: '`', push: 'tickClassList' },
+        start5: { match: '(', push: 'interpParen' },
       },
       ...classAttributeStates(),
     })

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

@@ -66,6 +66,7 @@ export type TailwindCssSettings = {
   experimental: {
     classRegex: string[]
     configFile: string | Record<string, string | string[]> | null
+    classFunctions: string[]
   }
   files: {
     exclude: string[]

packages/vscode-tailwindcss/package.json

@@ -304,6 +304,14 @@
           "default": null,
           "markdownDescription": "Manually specify the Tailwind config file or files that should be read to provide IntelliSense features. Can either be a single string value, or an object where each key is a config file path and each value is a glob or array of globs representing the set of files that the config file applies to."
         },
+        "tailwindCSS.experimental.classFunctions": {
+          "type": "array",
+          "items": {
+            "type": "string"
+          },
+          "default": [],
+          "markdownDescription": "The function names for which to provide class completions, hover previews, linting etc."
+        },
         "tailwindCSS.showPixelEquivalents": {
           "type": "boolean",
           "default": true,