add experimental showPixelValues setting

Author: bradlc

packages/tailwindcss-intellisense/package.json

@@ -162,6 +162,9 @@
         "tailwindCSS.experimental.classRegex": {
           "type": "array",
           "scope": "language-overridable"
+        },
+        "tailwindCSS.experimental.showPixelValues": {
+          "type": "boolean"
         }
       }
     }

packages/tailwindcss-intellisense/src/lsp/server.ts

@@ -48,6 +48,7 @@ const defaultSettings: Settings = {
   includeLanguages: {},
   experimental: {
     classRegex: [],
+    showPixelValues: false,
   },
   validate: true,
   lint: {

packages/tailwindcss-language-service/src/completionProvider.ts

@@ -32,6 +32,7 @@ import {
 import { validateApply } from './util/validateApply'
 import { flagEnabled } from './util/flagEnabled'
 import MultiRegexp from 'multi-regexp2'
+import { remToPx } from './util/remToPx'
 
 export function completionsFromClassList(
   state: State,
@@ -876,10 +877,13 @@ export async function resolveCompletionItem(
       item.data[item.data.length - 1]
     ].join(', ')
   } else {
-    item.detail = getCssDetail(state, className)
+    item.detail = await getCssDetail(state, className)
     if (!item.documentation) {
-      const { tabSize } = await getDocumentSettings(state)
-      const css = stringifyCss(item.data.join(':'), className, tabSize)
+      const settings = await getDocumentSettings(state)
+      const css = stringifyCss(item.data.join(':'), className, {
+        tabSize: dlv(settings, 'tabSize'),
+        showPixelValues: dlv(settings, 'experimental.showPixelValues'),
+      })
       if (css) {
         item.documentation = {
           kind: 'markdown' as typeof MarkupKind.Markdown,
@@ -907,7 +911,10 @@ function isContextItem(state: State, keys: string[]): boolean {
   return isObject(item.__info) && !item.__info.__rule
 }
 
-function stringifyDecls(obj: any): string {
+function stringifyDecls(
+  obj: any,
+  { showPixelValues = false }: Partial<{ showPixelValues: boolean }> = {}
+): string {
   let props = Object.keys(obj)
   let nonCustomProps = props.filter((prop) => !prop.startsWith('--'))
 
@@ -918,18 +925,24 @@ function stringifyDecls(obj: any): string {
   return props
     .map((prop) =>
       ensureArray(obj[prop])
-        .map((value) => `${prop}: ${value};`)
+        .map((value) => {
+          const px = showPixelValues ? remToPx(value) : undefined
+          return `${prop}: ${value}${px ? ` /*${px}*/` : ''};`
+        })
         .join(' ')
     )
     .join(' ')
 }
 
-function getCssDetail(state: State, className: any): string {
+async function getCssDetail(state: State, className: any): Promise<string> {
   if (Array.isArray(className)) {
     return `${className.length} rules`
   }
   if (className.__rule === true) {
-    return stringifyDecls(removeMeta(className))
+    const settings = await getDocumentSettings(state)
+    return stringifyDecls(removeMeta(className), {
+      showPixelValues: dlv(settings, 'experimental.showPixelValues', false),
+    })
   }
   return null
 }

packages/tailwindcss-language-service/src/hoverProvider.ts

@@ -90,12 +90,15 @@ async function provideClassNameHover(
     }
   }
 
-  const { tabSize } = await getDocumentSettings(state, document)
+  const settings = await getDocumentSettings(state, document)
 
   const css = stringifyCss(
     className.className,
     dlv(state.classNames.classNames, [...parts, '__info']),
-    tabSize
+    {
+      tabSize: dlv(settings, 'tabSize'),
+      showPixelValues: dlv(settings, 'experimental.showPixelValues'),
+    }
   )
 
   if (!css) return null

packages/tailwindcss-language-service/src/util/remToPx.ts

@@ -0,0 +1,8 @@
+export function remToPx(
+  value: string,
+  rootSize: number = 16
+): string | undefined {
+  return /^-?[0-9.]+rem$/.test(value)
+    ? `${parseFloat(value.substr(0, value.length - 3)) * rootSize}px`
+    : undefined
+}

packages/tailwindcss-language-service/src/util/state.ts

@@ -43,6 +43,7 @@ export type Settings = {
   }
   experimental: {
     classRegex: string[]
+    showPixelValues: boolean
   }
 }
 

packages/tailwindcss-language-service/src/util/stringify.ts

@@ -2,6 +2,7 @@ import removeMeta from './removeMeta'
 const dlv = require('dlv')
 import escapeClassName from 'css.escape'
 import { ensureArray } from './array'
+import { remToPx } from './remToPx'
 
 export function stringifyConfigValue(x: any): string {
   if (typeof x === 'string') return x
@@ -18,12 +19,17 @@ export function stringifyConfigValue(x: any): string {
 export function stringifyCss(
   className: string,
   obj: any,
-  tabSize: number = 2
+  {
+    tabSize = 2,
+    showPixelValues = false,
+  }: Partial<{ tabSize: number; showPixelValues: boolean }> = {}
 ): string {
   if (obj.__rule !== true && !Array.isArray(obj)) return null
 
   if (Array.isArray(obj)) {
-    const rules = obj.map((x) => stringifyCss(className, x)).filter(Boolean)
+    const rules = obj
+      .map((x) => stringifyCss(className, x, { tabSize, showPixelValues }))
+      .filter(Boolean)
     if (rules.length === 0) return null
     return rules.join('\n\n')
   }
@@ -42,7 +48,10 @@ export function stringifyCss(
   const indentStr = indent.repeat(context.length)
   const decls = props.reduce((acc, curr, i) => {
     const propStr = ensureArray(obj[curr])
-      .map((val) => `${indentStr + indent}${curr}: ${val};`)
+      .map((val) => {
+        const px = showPixelValues ? remToPx(val) : undefined
+        return `${indentStr + indent}${curr}: ${val}${px ? ` /*${px}*/` : ''};`
+      })
       .join('\n')
     return `${acc}${i === 0 ? '' : '\n'}${propStr}`
   }, '')