wip

Author: bradlc

package-lock.json

@@ -150,6 +150,15 @@ function first<T>(...options: Array<() => T>): T {
   }
 }
 
+function firstOptional<T>(...options: Array<() => T>): T | undefined {
+  for (let i = 0; i < options.length; i++) {
+    let option = options[i]
+    try {
+      return option()
+    } catch (_) {}
+  }
+}
+
 interface ProjectService {
   state: State
   tryInit: () => Promise<void>
@@ -528,8 +537,8 @@ async function createProjectService(
       }
 
       if (semver.gte(tailwindcssVersion, '1.99.0')) {
-        applyComplexClasses = __non_webpack_require__(
-          resolveFrom(tailwindDir, './lib/lib/substituteClassApplyAtRules')
+        applyComplexClasses = firstOptional(() =>
+          __non_webpack_require__(resolveFrom(tailwindDir, './lib/lib/substituteClassApplyAtRules'))
         )
       } else if (semver.gte(tailwindcssVersion, '1.7.0')) {
         applyComplexClasses = __non_webpack_require__(
@@ -551,6 +560,13 @@ async function createProjectService(
 
       try {
         let createContext = first(
+          () => {
+            let createContextFn = __non_webpack_require__(
+              resolveFrom(configDir, 'tailwindcss/lib/lib/setupContextUtils')
+            ).createContext
+            assert.strictEqual(typeof createContextFn, 'function')
+            return (state) => createContextFn(state.config)
+          },
           () => {
             let createContextFn = __non_webpack_require__(
               resolveFrom(configDir, 'tailwindcss/lib/jit/lib/setupContextUtils')
@@ -582,17 +598,30 @@ async function createProjectService(
 
         jitModules = {
           generateRules: {
-            module: __non_webpack_require__(
-              resolveFrom(configDir, 'tailwindcss/lib/jit/lib/generateRules')
-            ).generateRules,
+            module: first(
+              () =>
+                __non_webpack_require__(resolveFrom(configDir, 'tailwindcss/lib/lib/generateRules'))
+                  .generateRules,
+              () =>
+                __non_webpack_require__(
+                  resolveFrom(configDir, 'tailwindcss/lib/jit/lib/generateRules')
+                ).generateRules
+            ),
           },
           createContext: {
             module: createContext,
           },
           expandApplyAtRules: {
-            module: __non_webpack_require__(
-              resolveFrom(configDir, 'tailwindcss/lib/jit/lib/expandApplyAtRules')
-            ).default,
+            module: first(
+              () =>
+                __non_webpack_require__(
+                  resolveFrom(configDir, 'tailwindcss/lib/lib/expandApplyAtRules')
+                ).default,
+              () =>
+                __non_webpack_require__(
+                  resolveFrom(configDir, 'tailwindcss/lib/jit/lib/expandApplyAtRules')
+                ).default
+            ),
           },
         }
       } catch (_) {
@@ -753,7 +782,8 @@ async function createProjectService(
       }
       delete exports.mode
 
-      if (state.modules.jit && mode === 'jit') {
+      // TODO
+      if (false || (state.modules.jit && mode === 'jit')) {
         state.jit = true
         exports.variants = []
 

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

@@ -17,6 +17,7 @@
     "@ctrl/tinycolor": "3.1.4",
     "@types/moo": "0.5.3",
     "css.escape": "1.5.1",
+    "culori": "0.20.1",
     "detect-indent": "6.0.0",
     "dlv": "1.1.3",
     "dset": "2.0.1",

packages/tailwindcss-language-service/package.json

@@ -33,6 +33,7 @@ import { createMultiRegexp } from './util/createMultiRegexp'
 import * as jit from './util/jit'
 import { TinyColor } from '@ctrl/tinycolor'
 import { getVariantsFromClassName } from './util/getVariantsFromClassName'
+import * as culori from 'culori'
 
 let isUtil = (className) =>
   Array.isArray(className.__info)
@@ -169,6 +170,57 @@ export function completionsFromClassList(
       )
     }
 
+    if (state.jitContext.completions) {
+      return {
+        isIncomplete: false,
+        items: items.concat(
+          state.jitContext.completions().map((item, index) => {
+            let color =
+              Array.isArray(item) && typeof item[1].color === 'string' ? item[1].color.trim() : null
+
+            let kind: CompletionItemKind = color ? 16 : 21
+
+            if (color) {
+              let parsedColor = culori.parse(color)
+              if (parsedColor) {
+                if (color.startsWith('#')) {
+                  color =
+                    parsedColor.alpha === 1 || parsedColor.alpha === undefined
+                      ? color.length === 5
+                        ? color.slice(0, -1)
+                        : color.length === 9
+                        ? color.slice(0, -2)
+                        : color
+                      : culori.formatRgb(parsedColor)
+                } else if (parsedColor.mode === 'hsl') {
+                  color = culori.formatHsl(parsedColor)
+                } else if (parsedColor.mode === 'rgb') {
+                  color = culori.formatRgb(parsedColor)
+                }
+              } else {
+                color = null
+              }
+            }
+
+            let className = typeof item === 'string' ? item : item[0]
+            let documentation = color
+
+            return {
+              label: className,
+              kind,
+              documentation,
+              sortText: naturalExpand(index),
+              data: [...existingVariants, important ? `!${className}` : className],
+              textEdit: {
+                newText: className,
+                range: replacementRange,
+              },
+            } as CompletionItem
+          })
+        ),
+      }
+    }
+
     return {
       isIncomplete: false,
       items: items