replace experimental.showPixelValues setting with showPixelEquivalents and enable by default (#200)

Author: bradlc

packages/tailwindcss-intellisense/package.json

@@ -163,8 +163,15 @@
           "type": "array",
           "scope": "language-overridable"
         },
-        "tailwindCSS.experimental.showPixelValues": {
-          "type": "boolean"
+        "tailwindCSS.showPixelEquivalents": {
+          "type": "boolean",
+          "default": true,
+          "markdownDescription": "Show `px` equivalents for `rem` CSS values."
+        },
+        "tailwindCSS.rootFontSize": {
+          "type": "number",
+          "default": 16,
+          "markdownDescription": "Root font size in pixels. Used to convert `rem` CSS values to their `px` equivalents. See `#tailwindCSS.showPixelEquivalents#`."
         }
       }
     }

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

@@ -48,8 +48,9 @@ const defaultSettings: Settings = {
   includeLanguages: {},
   experimental: {
     classRegex: [],
-    showPixelValues: false,
   },
+  showPixelEquivalents: true,
+  rootFontSize: 16,
   validate: true,
   lint: {
     cssConflict: 'warning',

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

@@ -900,8 +900,9 @@ export async function resolveCompletionItem(
     if (!item.documentation) {
       const settings = await getDocumentSettings(state)
       const css = stringifyCss(item.data.join(':'), className, {
-        tabSize: dlv(settings, 'tabSize'),
-        showPixelValues: dlv(settings, 'experimental.showPixelValues'),
+        tabSize: dlv(settings, 'tabSize', 2),
+        showPixelEquivalents: dlv(settings, 'showPixelEquivalents', true),
+        rootFontSize: dlv(settings, 'rootFontSize', 16),
       })
       if (css) {
         item.documentation = {
@@ -932,7 +933,10 @@ function isContextItem(state: State, keys: string[]): boolean {
 
 function stringifyDecls(
   obj: any,
-  { showPixelValues = false }: Partial<{ showPixelValues: boolean }> = {}
+  {
+    showPixelEquivalents = false,
+    rootFontSize = 16,
+  }: Partial<{ showPixelEquivalents: boolean; rootFontSize: number }> = {}
 ): string {
   let props = Object.keys(obj)
   let nonCustomProps = props.filter((prop) => !prop.startsWith('--'))
@@ -945,7 +949,9 @@ function stringifyDecls(
     .map((prop) =>
       ensureArray(obj[prop])
         .map((value) => {
-          const px = showPixelValues ? remToPx(value) : undefined
+          const px = showPixelEquivalents
+            ? remToPx(value, rootFontSize)
+            : undefined
           return `${prop}: ${value}${px ? ` /*${px}*/` : ''};`
         })
         .join(' ')
@@ -960,7 +966,8 @@ async function getCssDetail(state: State, className: any): Promise<string> {
   if (className.__rule === true) {
     const settings = await getDocumentSettings(state)
     return stringifyDecls(removeMeta(className), {
-      showPixelValues: dlv(settings, 'experimental.showPixelValues', false),
+      showPixelEquivalents: dlv(settings, 'showPixelEquivalents', true),
+      rootFontSize: dlv(settings, 'rootFontSize', 16),
     })
   }
   return null

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

@@ -96,8 +96,9 @@ async function provideClassNameHover(
     className.className,
     dlv(state.classNames.classNames, [...parts, '__info']),
     {
-      tabSize: dlv(settings, 'tabSize'),
-      showPixelValues: dlv(settings, 'experimental.showPixelValues'),
+      tabSize: dlv(settings, 'tabSize', 2),
+      showPixelEquivalents: dlv(settings, 'showPixelEquivalents', true),
+      rootFontSize: dlv(settings, 'rootFontSize', 16),
     }
   )
 

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

@@ -2,7 +2,11 @@ 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
+  if (/^-?[0-9.]+rem$/.test(value)) {
+    let number = parseFloat(value.substr(0, value.length - 3))
+    if (!isNaN(number)) {
+      return `${number * rootSize}px`
+    }
+  }
+  return undefined
 }

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

@@ -33,6 +33,8 @@ export type Settings = {
   emmetCompletions: boolean
   includeLanguages: Record<string, string>
   validate: boolean
+  showPixelEquivalents: boolean
+  rootFontSize: number
   lint: {
     cssConflict: DiagnosticSeveritySetting
     invalidApply: DiagnosticSeveritySetting
@@ -43,7 +45,6 @@ export type Settings = {
   }
   experimental: {
     classRegex: string[]
-    showPixelValues: boolean
   }
 }
 

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

@@ -21,14 +21,25 @@ export function stringifyCss(
   obj: any,
   {
     tabSize = 2,
-    showPixelValues = false,
-  }: Partial<{ tabSize: number; showPixelValues: boolean }> = {}
+    showPixelEquivalents = false,
+    rootFontSize = 16,
+  }: Partial<{
+    tabSize: number
+    showPixelEquivalents: boolean
+    rootFontSize: number
+  }> = {}
 ): string {
   if (obj.__rule !== true && !Array.isArray(obj)) return null
 
   if (Array.isArray(obj)) {
     const rules = obj
-      .map((x) => stringifyCss(className, x, { tabSize, showPixelValues }))
+      .map((x) =>
+        stringifyCss(className, x, {
+          tabSize,
+          showPixelEquivalents,
+          rootFontSize,
+        })
+      )
       .filter(Boolean)
     if (rules.length === 0) return null
     return rules.join('\n\n')
@@ -49,7 +60,7 @@ export function stringifyCss(
   const decls = props.reduce((acc, curr, i) => {
     const propStr = ensureArray(obj[curr])
       .map((val) => {
-        const px = showPixelValues ? remToPx(val) : undefined
+        const px = showPixelEquivalents ? remToPx(val, rootFontSize) : undefined
         return `${indentStr + indent}${curr}: ${val}${px ? ` /*${px}*/` : ''};`
       })
       .join('\n')