add color previews
parent
682d12f44d
commit
00ac36a980
|
@ -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",
|
||||
|
|
|
@ -35,6 +35,7 @@
|
|||
"vscode": "^1.1.6"
|
||||
},
|
||||
"dependencies": {
|
||||
"color": "^3.0.0",
|
||||
"dlv": "^1.1.1",
|
||||
"tailwind-class-names": "^0.5.0"
|
||||
},
|
||||
|
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue