Add tailwindCSS.classFunctions setting (#1258)

This PR adds `tailwindCSS.classFunctions` option to the settings to add
simple and performant class completions, hover previews, linting etc.
for such cases:

```ts
const classes = cn(
  'pointer-events-auto relative flex bg-red-500',
  'items-center justify-between overflow-hidden',
  'md:min-w-[20rem] md:max-w-[37.5rem] md:py-sm pl-md py-xs pr-xs gap-sm w-full',
  'data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)]',
  Date.now() > 15000 ? 'text-red-200' : 'text-red-700',
  'data-[swipe=move]:transition-none',
)
```

![image](https://github.com/user-attachments/assets/eb5728af-6412-4323-b14c-893472f2e897)

```ts
const variants = cva(
  cn(
    'pointer-events-auto relative flex bg-green-500',
    'md:min-w-[20rem] md:max-w-[37.5rem] md:py-sm pl-md py-xs pr-xs gap-sm w-full',
    'md:h-[calc(100%-2rem)]',
    'bg-red-700',
  ),
  {
    variants: {
      mobile: {
        default: 'bottom-0 left-0',
        fullScreen: `
          inset-0
          md:h-[calc(100%-2rem)]
          rounded-none
          bg-blue-700
        `,
      },
    },
    defaultVariants: {
      mobile: 'default',
    },
  },
)
```

![image](https://github.com/user-attachments/assets/47025c28-50bc-4aa5-874c-06434835141b)

```ts
const tagged = cn`
  pointer-events-auto relative flex bg-red-500
  items-center justify-between overflow-hidden
  md:min-w-[20rem] md:max-w-[37.5rem] md:py-sm pl-md py-xs pr-xs gap-sm w-full
  data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)]
  md:h-[calc(100%-2rem)] text-green-700
  data-[swipe=move]:transition-none
`
```

![image](https://github.com/user-attachments/assets/0d112788-dd4f-48dc-aa01-0407b6c6b119)

---------

Co-authored-by: Laurynas Grigutis <laurynas.grigutis@barbora.lt>
Co-authored-by: Jordan Pittman <jordan@cryptica.me>

Author: 3 people

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

@@ -1,47 +1,16 @@
 import merge from 'deepmerge'
 import { isObject } from './utils'
-import type { Settings } from '@tailwindcss/language-service/src/util/state'
+import {
+  getDefaultTailwindSettings,
+  type Settings,
+} from '@tailwindcss/language-service/src/util/state'
 import type { Connection } from 'vscode-languageserver'
 
 export interface SettingsCache {
   get(uri?: string): Promise<Settings>
   clear(): void
 }
 
-function getDefaultSettings(): Settings {
-  return {
-    editor: { tabSize: 2 },
-    tailwindCSS: {
-      inspectPort: null,
-      emmetCompletions: false,
-      classAttributes: ['class', 'className', 'ngClass', 'class:list'],
-      codeActions: true,
-      hovers: true,
-      suggestions: true,
-      validate: true,
-      colorDecorators: true,
-      rootFontSize: 16,
-      lint: {
-        cssConflict: 'warning',
-        invalidApply: 'error',
-        invalidScreen: 'error',
-        invalidVariant: 'error',
-        invalidConfigPath: 'error',
-        invalidTailwindDirective: 'error',
-        invalidSourceDirective: 'error',
-        recommendedVariantOrder: 'warning',
-      },
-      showPixelEquivalents: true,
-      includeLanguages: {},
-      files: { exclude: ['**/.git/**', '**/node_modules/**', '**/.hg/**', '**/.svn/**'] },
-      experimental: {
-        classRegex: [],
-        configFile: null,
-      },
-    },
-  }
-}
-
 export function createSettingsCache(connection: Connection): SettingsCache {
   const cache: Map<string, Settings> = new Map()
 
@@ -73,7 +42,7 @@ export function createSettingsCache(connection: Connection): SettingsCache {
     tailwindCSS = isObject(tailwindCSS) ? tailwindCSS : {}
 
     return merge<Settings>(
-      getDefaultSettings(),
+      getDefaultTailwindSettings(),
       { editor, tailwindCSS },
       { arrayMerge: (_destinationArray, sourceArray, _options) => sourceArray },
     )

packages/tailwindcss-language-server/tests/utils/client.ts

@@ -44,7 +44,7 @@ import { createConfiguration, Configuration } from './configuration'
 import { clearLanguageBoundariesCache } from '@tailwindcss/language-service/src/util/getLanguageBoundaries'
 import { DefaultMap } from '../../src/util/default-map'
 import { connect, ConnectOptions } from './connection'
-import type { DeepPartial } from './types'
+import type { DeepPartial } from '@tailwindcss/language-service/src/types'
 
 export interface DocumentDescriptor {
   /**

packages/tailwindcss-language-server/tests/utils/configuration.ts

@@ -1,4 +1,7 @@
-import type { Settings } from '@tailwindcss/language-service/src/util/state'
+import {
+  getDefaultTailwindSettings,
+  type Settings,
+} from '@tailwindcss/language-service/src/util/state'
 import { URI } from 'vscode-uri'
 import type { DeepPartial } from './types'
 import { CacheMap } from '../../src/cache-map'
@@ -10,41 +13,7 @@ export interface Configuration {
 }
 
 export function createConfiguration(): Configuration {
-  let defaults: Settings = {
-    editor: {
-      tabSize: 2,
-    },
-    tailwindCSS: {
-      inspectPort: null,
-      emmetCompletions: false,
-      includeLanguages: {},
-      classAttributes: ['class', 'className', 'ngClass', 'class:list'],
-      suggestions: true,
-      hovers: true,
-      codeActions: true,
-      validate: true,
-      showPixelEquivalents: true,
-      rootFontSize: 16,
-      colorDecorators: true,
-      lint: {
-        cssConflict: 'warning',
-        invalidApply: 'error',
-        invalidScreen: 'error',
-        invalidVariant: 'error',
-        invalidConfigPath: 'error',
-        invalidTailwindDirective: 'error',
-        invalidSourceDirective: 'error',
-        recommendedVariantOrder: 'warning',
-      },
-      experimental: {
-        classRegex: [],
-        configFile: {},
-      },
-      files: {
-        exclude: ['**/.git/**', '**/node_modules/**', '**/.hg/**', '**/.svn/**'],
-      },
-    },
-  }
+  let defaults = getDefaultTailwindSettings()
 
   /**
    * Settings per file or directory URI

packages/tailwindcss-language-server/tests/utils/types.ts

@@ -41,9 +41,11 @@
   },
   "devDependencies": {
     "@types/css.escape": "^1.5.2",
+    "@types/dedent": "^0.7.2",
     "@types/line-column": "^1.0.2",
     "@types/node": "^18.19.33",
     "@types/stringify-object": "^4.0.5",
+    "dedent": "^1.5.3",
     "esbuild": "^0.25.0",
     "esbuild-node-externals": "^1.9.0",
     "minimist": "^1.2.8",

packages/tailwindcss-language-service/package.json

@@ -30,7 +30,7 @@ let build = await esbuild.context({
           // Call the tsc command to generate the types
           spawnSync(
             'tsc',
-            ['--emitDeclarationOnly', '--outDir', path.resolve(__dirname, '../dist')],
+            ['-p', path.resolve(__dirname, './tsconfig.build.json'), '--emitDeclarationOnly', '--outDir', path.resolve(__dirname, '../dist')],
             {
               stdio: 'inherit',
             },

packages/tailwindcss-language-service/scripts/build.mjs

@@ -0,0 +1,4 @@
+{
+    "extends": "../tsconfig.json",
+    "exclude": ["../src/**/*.test.ts"]
+}

packages/tailwindcss-language-service/scripts/tsconfig.build.json

@@ -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'
@@ -45,6 +45,8 @@ import type { ThemeEntry } from './util/v4'
 import { segment } from './util/segment'
 import { resolveKnownThemeKeys, resolveKnownThemeNamespaces } from './util/v4/theme-keys'
 import { SEARCH_RANGE } from './util/constants'
+import { getLanguageBoundaries } from './util/getLanguageBoundaries'
+import { isWithinRange } from './util/isWithinRange'
 
 let isUtil = (className) =>
   Array.isArray(className.__info)
@@ -747,6 +749,25 @@ async function provideClassAttributeCompletions(
 
   let matches = matchClassAttributes(str, settings.classAttributes)
 
+  let boundaries = getLanguageBoundaries(state, document)
+
+  for (let boundary of boundaries ?? []) {
+    let isJsContext = boundary.type === 'js' || boundary.type === 'jsx'
+    if (!isJsContext) continue
+    if (!settings.classFunctions?.length) continue
+    if (!isWithinRange(position, boundary.range)) continue
+
+    let str = document.getText(boundary.range)
+    let offset = document.offsetAt(boundary.range.start)
+    let fnMatches = matchClassFunctions(str, settings.classFunctions)
+
+    fnMatches.forEach((match) => {
+      if (match.index) match.index += offset
+    })
+
+    matches.push(...fnMatches)
+  }
+
   if (matches.length === 0) {
     return null
   }

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

@@ -0,0 +1,9 @@
+export type DeepPartial<T> = {
+  [P in keyof T]?: T[P] extends ((...args: any) => any) | ReadonlyArray<any> | Date
+    ? T[P]
+    : T[P] extends (infer U)[]
+      ? U[]
+      : T[P] extends object
+        ? DeepPartial<T[P]>
+        : T[P]
+}