From b8dc88d69970be97dcd4b3e068ea4d0ffd4457f2 Mon Sep 17 00:00:00 2001 From: Brad Cornes Date: Thu, 20 May 2021 13:24:16 +0100 Subject: [PATCH] show pixel equivalents in jit mode (fixes #332) --- .../src/completionProvider.ts | 2 +- packages/tailwindcss-language-service/src/util/jit.ts | 9 +++++++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/tailwindcss-language-service/src/completionProvider.ts b/packages/tailwindcss-language-service/src/completionProvider.ts index 127d9ca..4ed21b6 100644 --- a/packages/tailwindcss-language-service/src/completionProvider.ts +++ b/packages/tailwindcss-language-service/src/completionProvider.ts @@ -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` } diff --git a/packages/tailwindcss-language-service/src/util/jit.ts b/packages/tailwindcss-language-service/src/util/jit.ts index 482dcf8..7aac917 100644 --- a/packages/tailwindcss-language-service/src/util/jit.ts +++ b/packages/tailwindcss-language-service/src/util/jit.ts @@ -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 { + 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(' ') }