add color previews

master
Brad Cornes 2018-05-07 23:47:53 +01:00
parent 682d12f44d
commit 00ac36a980
3 changed files with 69 additions and 1 deletions

33
package-lock.json generated
View File

@ -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",

View File

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

View File

@ -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
}
}