From 00ac36a980d6101a21e9a0795d0452a5312fd825 Mon Sep 17 00:00:00 2001 From: Brad Cornes Date: Mon, 7 May 2018 23:47:53 +0100 Subject: [PATCH] add color previews --- package-lock.json | 33 ++++++++++++++++++++++++++++++++- package.json | 1 + src/extension.ts | 36 ++++++++++++++++++++++++++++++++++++ 3 files changed, 69 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index a357da2..7065576 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 @@ "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", diff --git a/package.json b/package.json index f308849..ed1b6ea 100644 --- a/package.json +++ b/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" }, diff --git a/src/extension.ts b/src/extension.ts index fdb5424..e845ec5 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 @@ 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): 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 + } +}