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

diff --git a/package-lock.json b/package-lock.json
index a357da2e03dbe4ae90ae5ae0900076a5569c0f60..7065576c19afd8c62a071aeb40e8df65c476a205 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
     "name": "vscode-tailwind",
-    "version": "0.0.1",
+    "version": "0.1.0",
     "lockfileVersion": 1,
     "requires": true,
     "dependencies": {
@@ -293,6 +293,15 @@             "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
             "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
             "dev": true
         },
+        "color": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/color/-/color-3.0.0.tgz",
+            "integrity": "sha512-jCpd5+s0s0t7p3pHQKpnJ0TpQKKdleP71LWcA0aqiljpiuAkOSUFN/dyH8ZwF0hRmFlrIuRhufds1QyEP9EB+w==",
+            "requires": {
+                "color-convert": "1.9.1",
+                "color-string": "1.5.2"
+            }
+        },
         "color-convert": {
             "version": "1.9.1",
             "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.1.tgz",
@@ -306,6 +315,15 @@             "version": "1.1.3",
             "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
             "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
         },
+        "color-string": {
+            "version": "1.5.2",
+            "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.2.tgz",
+            "integrity": "sha1-JuRYFLw8mny9Z1FkikFDRRSnc6k=",
+            "requires": {
+                "color-name": "1.1.3",
+                "simple-swizzle": "0.2.2"
+            }
+        },
         "color-support": {
             "version": "1.1.3",
             "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
@@ -1304,6 +1322,11 @@             "version": "3.2.1",
             "resolved": "https://registry.npmjs.org/is/-/is-3.2.1.tgz",
             "integrity": "sha1-0Kwq1V63sL7JJqUmb2xmKqqD3KU=",
             "dev": true
+        },
+        "is-arrayish": {
+            "version": "0.3.1",
+            "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.1.tgz",
+            "integrity": "sha1-wt/DhquqDD4zxI2z/ocFnmkGXv0="
         },
         "is-buffer": {
             "version": "1.1.6",
@@ -2482,6 +2505,14 @@             "version": "5.5.0",
             "resolved": "https://registry.npmjs.org/semver/-/semver-5.5.0.tgz",
             "integrity": "sha512-4SJ3dm0WAwWy/NVeioZh5AntkdJoWKxHxcmyP622fOkgHa4z3R0TdBJICINyaSDE6uNwVc8gZr+ZinwZAH4xIA==",
             "dev": true
+        },
+        "simple-swizzle": {
+            "version": "0.2.2",
+            "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+            "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
+            "requires": {
+                "is-arrayish": "0.3.1"
+            }
         },
         "sntp": {
             "version": "1.0.9",

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

diff --git a/package.json b/package.json
index f30884942f58131d3a4cca4a5539cce1f1f85dcb..ed1b6ea3c42b5d6e8e4aeec6ef98086f2a7186e6 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@     "typescript": "^2.6.1",
     "vscode": "^1.1.6"
   },
   "dependencies": {
+    "color": "^3.0.0",
     "dlv": "^1.1.1",
     "tailwind-class-names": "^0.5.0"
   },

 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

diff --git a/src/extension.ts b/src/extension.ts
index fdb54246a3cae51222fc97139efdfbfb818422a5..e845ec5ae629398540a36924ddb152b482fcb7b9 100644
--- a/src/extension.ts
+++ b/src/extension.ts
@@ -5,6 +5,7 @@ import { join } from 'path'
 const tailwindClassNames = require('tailwind-class-names')
 // const tailwindClassNames = require('/Users/brad/Code/tailwind-class-names/dist')
 const dlv = require('dlv')
+const Color = require('color')
 
 const CONFIG_GLOB = '{tailwind,tailwind.config,.tailwindrc}.js'
 
@@ -181,6 +182,12 @@           )
         } else {
           item.detail = classNames[key]
         }
+
+        let color = getColorFromDecl(item.detail)
+        if (color) {
+          item.kind = vscode.CompletionItemKind.Color
+          item.documentation = color
+        }
       }
       items[key] = {
         item
@@ -228,6 +235,12 @@       item.filterText = item.insertText = `.${key}`
       item.sortText = naturalExpand(i.toString())
       if (typeof config[key] === 'string' || typeof config[key] === 'number') {
         item.detail = config[key]
+
+        let color = getColorFromValue(item.detail)
+        if (color) {
+          item.kind = vscode.CompletionItemKind.Color
+          item.documentation = color
+        }
       } else if (Array.isArray(config[key])) {
         item.detail = stringifyArray(config[key])
       }
@@ -479,3 +492,26 @@
 function escapeClassName(className) {
   return className.replace(/([^A-Za-z0-9\-])/g, '\\$1')
 }
+
+function getColorFromDecl(cssStr: string) {
+  let matches = cssStr.match(/: ([^;]+);/g)
+  if (matches === null || matches.length > 1) return
+
+  let color = matches[0].slice(2, -1).trim()
+
+  return getColorFromValue(color)
+}
+
+function getColorFromValue(value: string) {
+  if (value === 'transparent') {
+    return 'rgba(0, 0, 0, 0.01)'
+  }
+
+  try {
+    let parsed = Color(value)
+    if (parsed.valpha === 0) return 'rgba(0, 0, 0, 0.01)'
+    return parsed.rgb().string()
+  } catch (err) {
+    return
+  }
+}