1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

diff --git a/src/lsp/providers/completionProvider.ts b/src/lsp/providers/completionProvider.ts
index 795127cc7c02bfbf8c198e44378cbd6f7cc9bedb..17fedcb8581c921f0c7045b8a86cc681890c264e 100644
--- a/src/lsp/providers/completionProvider.ts
+++ b/src/lsp/providers/completionProvider.ts
@@ -89,9 +89,11 @@           label += sep
           sortText = '-' + sortText // move to top
         } else {
           const color = getColor(state, [className])
-          if (color) {
+          if (color !== null) {
             kind = CompletionItemKind.Color
-            documentation = color.documentation
+            if (typeof color !== 'string' && color.a !== 0) {
+              documentation = color.toRgbString()
+            }
           }
         }
 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

diff --git a/src/lsp/providers/documentColorProvider.ts b/src/lsp/providers/documentColorProvider.ts
index 688ee746ab6a01dca0217c5515e14e599bb1f235..876f5777baef5960ee9a9bae262af5c1fc07117d 100644
--- a/src/lsp/providers/documentColorProvider.ts
+++ b/src/lsp/providers/documentColorProvider.ts
@@ -27,8 +27,10 @@         classNames.forEach((className) => {
           let parts = getClassNameParts(state, className.className)
           if (!parts) return
           let color = getColor(state, parts)
-          if (!color) return
-          colors.push({ range: className.range, color: color.documentation })
+          if (color === null || typeof color === 'string' || color.a === 0) {
+            return
+          }
+          colors.push({ range: className.range, color: color.toRgbString() })
         })
       })
 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

diff --git a/src/lsp/util/color.ts b/src/lsp/util/color.ts
index 31d56ec33a369f671737f625a3d61c8960ca7d4b..436a94c42d4f6e76d3e558dfd283b5c5b890bdd2 100644
--- a/src/lsp/util/color.ts
+++ b/src/lsp/util/color.ts
@@ -21,10 +21,14 @@   'stroke',
   'text-decoration-color',
 ]
 
+function isKeyword(value: string): boolean {
+  return ['transparent', 'currentcolor'].includes(value.toLowerCase())
+}
+
 export function getColor(
   state: State,
   keys: string[]
-): { documentation?: string } {
+): TinyColor | string | null {
   const item = dlv(state.classNames.classNames, keys)
   if (!item.__rule) return null
   const props = Object.keys(removeMeta(item))
@@ -48,40 +52,36 @@     propsToCheck.map((prop) => ensureArray(item[prop]).map(createColor))
   )
 
   // check that all of the values are valid colors
-  if (colors.some((color) => color !== 'transparent' && !color.isValid)) {
+  if (colors.some((color) => typeof color !== 'string' && !color.isValid)) {
     return null
   }
 
   // check that all of the values are the same color, ignoring alpha
   const colorStrings = dedupe(
     colors.map((color) =>
-      color === 'transparent'
-        ? 'transparent'
-        : `${color.r}-${color.g}-${color.b}`
+      typeof color === 'string' ? color : `${color.r}-${color.g}-${color.b}`
     )
   )
   if (colorStrings.length !== 1) {
     return null
   }
 
-  if (colorStrings[0] === 'transparent') {
-    return {
-      documentation: 'rgba(0, 0, 0, 0.01)',
-    }
+  if (isKeyword(colorStrings[0])) {
+    return colorStrings[0]
   }
 
-  const nonTransparentColors = colors.filter(
-    (color): color is TinyColor => color !== 'transparent'
+  const nonKeywordColors = colors.filter(
+    (color): color is TinyColor => typeof color !== 'string'
   )
 
-  const alphas = dedupe(nonTransparentColors.map((color) => color.a))
+  const alphas = dedupe(nonKeywordColors.map((color) => color.a))
 
-  if (alphas.length === 1 || (alphas.length === 2 && alphas.includes(0))) {
-    return {
-      documentation: nonTransparentColors
-        .find((color) => color.a !== 0)
-        .toRgbString(),
-    }
+  if (alphas.length === 1) {
+    return nonKeywordColors[0]
+  }
+
+  if (alphas.length === 2 && alphas.includes(0)) {
+    return nonKeywordColors.find((color) => color.a !== 0)
   }
 
   return null
@@ -99,9 +99,9 @@   }
   return null
 }
 
-function createColor(str: string): TinyColor | 'transparent' {
-  if (str === 'transparent') {
-    return 'transparent'
+function createColor(str: string): TinyColor | string {
+  if (isKeyword(str)) {
+    return str
   }
 
   // matches: rgba(<r>, <g>, <b>, var(--bg-opacity))