show pixel equivalents in jit mode (fixes #332)

master
Brad Cornes 2021-05-20 13:24:16 +01:00
parent 0fc7b0aa5a
commit b8dc88d699
2 changed files with 8 additions and 3 deletions

View File

@ -1031,7 +1031,7 @@ export async function resolveCompletionItem(
if (rules.length === 0) return item
if (!item.detail) {
if (rules.length === 1) {
item.detail = jit.stringifyDecls(rules[0])
item.detail = await jit.stringifyDecls(state, rules[0])
} else {
item.detail = `${rules.length} rules`
}

View File

@ -58,10 +58,15 @@ export function stringifyRules(state: State, rules: Rule[], tabSize: number = 2)
.replace(/^(?: )+/gm, (indent: string) => ' '.repeat((indent.length / 4) * tabSize))
}
export function stringifyDecls(rule: Rule): string {
export async function stringifyDecls(state: State, rule: Rule, uri?: string): Promise<string> {
let settings = await state.editor.getConfiguration(uri)
let showPixelEquivalents = dlv(settings, 'tailwindCSS.showPixelEquivalents', true)
let rootFontSize = dlv(settings, 'tailwindCSS.rootFontSize', 16)
let result = []
rule.walkDecls(({ prop, value }) => {
result.push(`${prop}: ${value};`)
let px = showPixelEquivalents ? remToPx(value, rootFontSize) : undefined
result.push(`${prop}: ${value}${px ? `/* ${px} */` : ''};`)
})
return result.join(' ')
}