add color previews

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 @@
             "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 @@
             "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",
@@ -1305,6 +1323,11 @@
             "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",
             "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
@@ -2483,6 +2506,14 @@
             "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",
             "resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz",

package.json

@@ -35,6 +35,7 @@
     "vscode": "^1.1.6"
   },
   "dependencies": {
+    "color": "^3.0.0",
     "dlv": "^1.1.1",
     "tailwind-class-names": "^0.5.0"
   },

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 @@ function createItems(classNames, separator, config, parent = '') {
         } 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 @@ function createConfigItems(config) {
       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 stringifyArray(arr: Array<any>): string {
 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
+  }
+}