feature: add showColorEquivalents

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

@@ -11,7 +11,7 @@ import type {
 } from 'vscode-languageserver'
 const dlv = require('dlv')
 import removeMeta from './util/removeMeta'
-import { getColor, getColorFromValue } from './util/color'
+import { getColor, getColorFromValue, getColorsInString } from './util/color'
 import { isHtmlContext } from './util/html'
 import { isCssContext } from './util/css'
 import { findLast, matchClassAttributes } from './util/find'
@@ -217,7 +217,7 @@ export function completionsFromClassList(
               if (color !== null) {
                 kind = 16
                 if (typeof color !== 'string' && (color.alpha ?? 1) !== 0) {
-                  documentation = culori.formatRgb(color)
+                  documentation = culori.formatRgb(color) + '\n' + culori.formatHex(color)
                 }
               }
 
@@ -298,7 +298,7 @@ export function completionsFromClassList(
             if (color !== null) {
               kind = 16
               if (typeof color !== 'string' && (color.alpha ?? 1) !== 0) {
-                documentation = culori.formatRgb(color)
+                documentation = culori.formatRgb(color) + '\n' + culori.formatHex(color)
               }
             }
 
@@ -587,7 +587,7 @@ function provideCssHelperCompletions(
         detail: detail === '0' || detail === 'transparent' ? `${detail} ` : detail,
         documentation:
           color && typeof color !== 'string' && (color.alpha ?? 1) !== 0
-            ? culori.formatRgb(color)
+            ? culori.formatRgb(color) + '\n' + culori.formatHex(color)
             : null,
         textEdit: {
           newText: `${replaceDot ? '[' : ''}${item}${insertClosingBrace ? ']' : ''}`,
@@ -1104,6 +1104,7 @@ export async function resolveCompletionItem(
       const css = stringifyCss(item.data.join(':'), className, {
         tabSize: dlv(settings, 'editor.tabSize', 2),
         showPixelEquivalents: dlv(settings, 'tailwindCSS.showPixelEquivalents', true),
+        showColorEquivalents: dlv(settings, 'tailwindCSS.showColorEquivalents', true),
         rootFontSize: dlv(settings, 'tailwindCSS.rootFontSize', 16),
       })
       if (css) {
@@ -1137,8 +1138,9 @@ function stringifyDecls(
   obj: any,
   {
     showPixelEquivalents = false,
+    showColorEquivalents = false,
     rootFontSize = 16,
-  }: Partial<{ showPixelEquivalents: boolean; rootFontSize: number }> = {}
+  }: Partial<{ showPixelEquivalents: boolean; showColorEquivalents: boolean; rootFontSize: number }> = {}
 ): string {
   let props = Object.keys(obj)
   let nonCustomProps = props.filter((prop) => !prop.startsWith('--'))
@@ -1152,7 +1154,12 @@ function stringifyDecls(
       ensureArray(obj[prop])
         .map((value) => {
           const px = showPixelEquivalents ? remToPx(value, rootFontSize) : undefined
-          return `${prop}: ${value}${px ? `/* ${px} */` : ''};`
+          let hex = ''
+          const color = showColorEquivalents ? getColorsInString(value)[0] : undefined
+          if(color) {
+            hex = culori.formatHex(color) || ''
+          }
+          return `${prop}: ${value}${px ? `/* ${px} */` : ''}${hex ? `/* ${hex} */` : ''};`
         })
         .join(' ')
     )
@@ -1167,6 +1174,7 @@ async function getCssDetail(state: State, className: any): Promise<string> {
     const settings = await state.editor.getConfiguration()
     return stringifyDecls(removeMeta(className), {
       showPixelEquivalents: dlv(settings, 'tailwindCSS.showPixelEquivalents', true),
+      showColorEquivalents: dlv(settings, 'tailwindCSS.showColorEquivalents', true),
       rootFontSize: dlv(settings, 'tailwindCSS.rootFontSize', 16),
     })
   }

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

@@ -111,6 +111,7 @@ async function provideClassNameHover(
     {
       tabSize: dlv(settings, 'editor.tabSize', 2),
       showPixelEquivalents: dlv(settings, 'tailwindCSS.showPixelEquivalents', true),
+      showColorEquivalents: dlv(settings, 'tailwindCSS.showColorEquivalents', true),
       rootFontSize: dlv(settings, 'tailwindCSS.rootFontSize', 16),
     }
   )

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

@@ -48,7 +48,7 @@ const colorRegex = new RegExp(
   'gi'
 )
 
-function getColorsInString(str: string): (culori.Color | KeywordColor)[] {
+export function getColorsInString(str: string): (culori.Color | KeywordColor)[] {
   if (/(?:box|drop)-shadow/.test(str)) return []
 
   return Array.from(str.matchAll(colorRegex), (match) => {

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

@@ -2,6 +2,8 @@ import { State } from './state'
 import type { Container, Document, Root, Rule } from 'postcss'
 import dlv from 'dlv'
 import { remToPx } from './remToPx'
+import {getColorsInString} from './color'
+import * as culori from 'culori'
 
 export function bigSign(bigIntValue) {
   // @ts-ignore
@@ -31,6 +33,7 @@ export async function stringifyRoot(state: State, root: Root, uri?: string): Pro
   let settings = await state.editor.getConfiguration(uri)
   let tabSize = dlv(settings, 'editor.tabSize', 2)
   let showPixelEquivalents = dlv(settings, 'tailwindCSS.showPixelEquivalents', true)
+  let showColorEquivalents = dlv(settings, 'tailwindCSS.showColorEquivalents', true)
   let rootFontSize = dlv(settings, 'tailwindCSS.rootFontSize', 16)
 
   let clone = root.clone()
@@ -48,6 +51,15 @@ export async function stringifyRoot(state: State, root: Root, uri?: string): Pro
     })
   }
 
+  if(showColorEquivalents) {
+    clone.walkDecls((decl) => {
+      const color = getColorsInString(decl.value)[0]
+      if(color) {
+        decl.value = `${decl.value}/* ${culori.formatHex(color)} */`
+      }
+    })
+  }
+
   return clone
     .toString()
     .replace(/([^;{}\s])(\n\s*})/g, (_match, before, after) => `${before};${after}`)
@@ -64,12 +76,18 @@ export function stringifyRules(state: State, rules: Rule[], tabSize: number = 2)
 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 showColorEquivalents = dlv(settings, 'tailwindCSS.showColorEquivalents', true)
   let rootFontSize = dlv(settings, 'tailwindCSS.rootFontSize', 16)
 
   let result = []
   rule.walkDecls(({ prop, value }) => {
     let px = showPixelEquivalents ? remToPx(value, rootFontSize) : undefined
-    result.push(`${prop}: ${value}${px ? `/* ${px} */` : ''};`)
+    let hex = ''
+    const color = showColorEquivalents ? getColorsInString(value)[0] : undefined
+    if(color) {
+      hex = culori.formatHex(color) || ''
+    }
+    result.push(`${prop}: ${value}${px ? `/* ${px} */` : ''}${hex ? `/* ${hex} */` : ''};`)
   })
   return result.join(' ')
 }

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

@@ -42,6 +42,7 @@ export type Settings = {
     classAttributes: string[]
     validate: boolean
     showPixelEquivalents: boolean
+    showColorEquivalents: boolean
     rootFontSize: number
     colorDecorators: boolean
     lint: {

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

@@ -5,6 +5,8 @@ import { ensureArray } from './array'
 import { remToPx } from './remToPx'
 import stringifyObject from 'stringify-object'
 import isObject from './isObject'
+import { getColorsInString } from './color'
+import * as culori from 'culori'
 
 export function stringifyConfigValue(x: any): string {
   if (isObject(x)) return `${Object.keys(x).length} values`
@@ -27,10 +29,12 @@ export function stringifyCss(
   {
     tabSize = 2,
     showPixelEquivalents = false,
+    showColorEquivalents = false,
     rootFontSize = 16,
   }: Partial<{
     tabSize: number
     showPixelEquivalents: boolean
+    showColorEquivalents: boolean
     rootFontSize: number
   }> = {}
 ): string {
@@ -66,7 +70,14 @@ export function stringifyCss(
     const propStr = ensureArray(obj[curr])
       .map((val) => {
         const px = showPixelEquivalents ? remToPx(val, rootFontSize) : undefined
-        return `${indentStr + indent}${curr}: ${val}${px ? `/* ${px} */` : ''};`
+        let color = showColorEquivalents ? getColorsInString(val) : undefined
+        let hex = ''
+        if(color) {
+          hex = color.map(c => {
+            return c ? culori.formatHex(c) : c
+          }).join(' ')
+        }
+        return `${indentStr + indent}${curr}: ${val}${px ? `/* ${px} */` : ''}${hex ? `/* ${hex} */` : ''};`
       })
       .join('\n')
     return `${acc}${i === 0 ? '' : '\n'}${propStr}`

packages/vscode-tailwindcss/README.md

@@ -80,6 +80,10 @@ Controls whether the editor should render inline color decorators for Tailwind C
 
 Show `px` equivalents for `rem` CSS values in completions and hovers. **Default: `true`**
 
+### `tailwindCSS.showColorEquivalents`
+
+Show hex format for color values in completions and hovers. **Default: `true`**
+
 ### `tailwindCSS.rootFontSize`
 
 Root font size in pixels. Used to convert `rem` CSS values to their `px` equivalents. See [`tailwindCSS.showPixelEquivalents`](#tailwindcssshowpixelequivalents). **Default: `16`**

packages/vscode-tailwindcss/package.json

@@ -229,6 +229,11 @@
           "default": true,
           "markdownDescription": "Show `px` equivalents for `rem` CSS values."
         },
+        "tailwindCSS.showColorEquivalents": {
+          "type": "boolean",
+          "default": true,
+          "markdownDescription": "Show hex format for color values."
+        },
         "tailwindCSS.rootFontSize": {
           "type": "number",
           "default": 16,