show pixel equivalents in jit mode (fixes #332)

Author: bradlc

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

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<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(' ')
 }