show completion item color swatches for variable-alpha colors

master
Brad Cornes 2020-04-29 23:46:05 +01:00
parent 82dad05540
commit a13290c276
2 changed files with 26 additions and 5 deletions

View File

@ -83,7 +83,7 @@ function completionsFromClassList(
const color = getColor(state, [className]) const color = getColor(state, [className])
if (color) { if (color) {
kind = CompletionItemKind.Color kind = CompletionItemKind.Color
documentation = color documentation = color.documentation
} }
} }

View File

@ -172,14 +172,35 @@ const COLOR_NAMES = {
yellowgreen: '#9acd32', yellowgreen: '#9acd32',
} }
export function getColor(state: State, keys: string[]): string { export function getColor(
state: State,
keys: string[]
): { documentation?: string } {
const item = dlv(state.classNames.classNames, keys) const item = dlv(state.classNames.classNames, keys)
if (!item.__rule) return null if (!item.__rule) return null
const props = Object.keys(removeMeta(item)) const props = Object.keys(removeMeta(item))
if (props.length === 0 || props.length > 1) return null const nonCustomProps = props.filter((prop) => !prop.startsWith('--'))
const prop = props[0] if (nonCustomProps.length !== 1) return null
const prop = nonCustomProps[0]
if (COLOR_PROPS.indexOf(prop) === -1) return null if (COLOR_PROPS.indexOf(prop) === -1) return null
return COLOR_NAMES[item[prop].toLowerCase()] || item[prop]
const namedColor = COLOR_NAMES[item[prop].toLowerCase()]
if (namedColor) {
return { documentation: namedColor }
}
// matches: rgba(<r>, <g>, <b>, var(--bg-opacity))
// TODO: support other formats? e.g. hsla, css level 4
const match = item[prop].match(
/^\s*rgba\(\s*(?<r>[0-9]{1,3})\s*,\s*(?<g>[0-9]{1,3})\s*,\s*(?<b>[0-9]{1,3})\s*,\s*var/
)
if (match) {
return {
documentation: `rgb(${match.groups.r}, ${match.groups.g}, ${match.groups.b})`,
}
}
return {}
} }
export function isColor(str: any): boolean { export function isColor(str: any): boolean {