Add color format options (rgb, hex)

Formats are displayed in completions and as comments in hovered css.
This helps with comparing code to designs.

Author: flostellbrink

packages/tailwindcss-language-server/src/server.ts

@@ -279,6 +279,7 @@ async function getConfiguration(uri?: string) {
           recommendedVariantOrder: 'warning',
         },
         showPixelEquivalents: true,
+        colorFormat: 'rgb',
         includeLanguages: {},
         files: { exclude: ['**/.git/**', '**/node_modules/**', '**/.hg/**', '**/.svn/**'] },
         experimental: {

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

@@ -11,7 +11,7 @@ import type {
 import type { TextDocument } from 'vscode-languageserver-textdocument'
 import dlv from 'dlv'
 import removeMeta from './util/removeMeta'
-import { getColor, getColorFromValue } from './util/color'
+import { formatColor, getColor, getColorFromValue } from './util/color'
 import { isHtmlContext } from './util/html'
 import { isCssContext } from './util/css'
 import { findLast, matchClassAttributes } from './util/find'
@@ -30,7 +30,6 @@ import { validateApply } from './util/validateApply'
 import { flagEnabled } from './util/flagEnabled'
 import * as jit from './util/jit'
 import { getVariantsFromClassName } from './util/getVariantsFromClassName'
-import * as culori from 'culori'
 import Regex from 'becke-ch--regex--s0-0-v1--base--pl--lib'
 import {
   addPixelEquivalentsToMediaQuery,
@@ -42,14 +41,16 @@ let isUtil = (className) =>
     ? className.__info.some((x) => x.__source === 'utilities')
     : className.__info.__source === 'utilities'
 
-export function completionsFromClassList(
+export async function completionsFromClassList(
   state: State,
+  document: TextDocument,
   classList: string,
   classListRange: Range,
   rootFontSize: number,
   filter?: (item: CompletionItem) => boolean,
   context?: CompletionContext
-): CompletionList {
+): Promise<CompletionList> {
+  const settings = (await state.editor.getConfiguration(document.uri)).tailwindCSS
   let classNames = classList.split(/[\s+]/)
   const partialClassName = classNames[classNames.length - 1]
   let sep = state.separator
@@ -109,7 +110,7 @@ export function completionsFromClassList(
               if (color !== null) {
                 kind = 16
                 if (typeof color !== 'string' && (color.alpha ?? 1) !== 0) {
-                  documentation = culori.formatRgb(color)
+                  documentation = formatColor(color, settings)
                 }
               }
 
@@ -260,7 +261,7 @@ export function completionsFromClassList(
               let documentation: string | undefined
 
               if (color && typeof color !== 'string') {
-                documentation = culori.formatRgb(color)
+                documentation = formatColor(color, settings)
               }
 
               items.push({
@@ -307,7 +308,7 @@ export function completionsFromClassList(
                 if (color !== null) {
                   kind = 16
                   if (typeof color !== 'string' && (color.alpha ?? 1) !== 0) {
-                    documentation = culori.formatRgb(color)
+                    documentation = formatColor(color, settings)
                   }
                 }
 
@@ -393,7 +394,7 @@ export function completionsFromClassList(
               if (color !== null) {
                 kind = 16
                 if (typeof color !== 'string' && (color.alpha ?? 1) !== 0) {
-                  documentation = culori.formatRgb(color)
+                  documentation = formatColor(color, settings)
                 }
               }
 
@@ -466,8 +467,9 @@ async function provideClassAttributeCompletions(
         }
       }
 
-      return completionsFromClassList(
+      return await completionsFromClassList(
         state,
+        document,
         classList,
         {
           start: {
@@ -541,8 +543,9 @@ async function provideCustomClassNameCompletions(
             classList = containerMatch[1].substr(0, cursor - matchStart)
           }
 
-          return completionsFromClassList(
+          return await completionsFromClassList(
             state,
+            document,
             classList,
             {
               start: {
@@ -583,8 +586,9 @@ async function provideAtApplyCompletions(
 
   const classList = match.groups.classList
 
-  return completionsFromClassList(
+  return await completionsFromClassList(
     state,
+    document,
     classList,
     {
       start: {
@@ -631,11 +635,11 @@ async function provideClassNameCompletions(
   return null
 }
 
-function provideCssHelperCompletions(
+async function provideCssHelperCompletions(
   state: State,
   document: TextDocument,
   position: Position
-): CompletionList {
+): Promise<CompletionList> {
   if (!isCssContext(state, document, position)) {
     return null
   }
@@ -666,6 +670,7 @@ function provideCssHelperCompletions(
     return null
   }
 
+  const settings = (await state.editor.getConfiguration(document.uri)).tailwindCSS
   let base = match.groups.helper === 'config' ? state.config : dlv(state.config, 'theme', {})
   let parts = path.split(/([\[\].]+)/)
   let keys = parts.filter((_, i) => i % 2 === 0)
@@ -744,7 +749,7 @@ function provideCssHelperCompletions(
             // VS Code bug causes some values to not display in some cases
             detail: detail === '0' || detail === 'transparent' ? `${detail} ` : detail,
             ...(color && typeof color !== 'string' && (color.alpha ?? 1) !== 0
-              ? { documentation: culori.formatRgb(color) }
+              ? { documentation: formatColor(color, settings) }
               : {}),
             ...(insertClosingBrace ? { textEditText: `${item}]` } : {}),
             additionalTextEdits: replaceDot
@@ -1328,8 +1333,9 @@ async function provideEmmetCompletions(
   const parts = emmetItems.items[0].label.split('.')
   if (parts.length < 2) return null
 
-  return completionsFromClassList(
+  return await completionsFromClassList(
     state,
+    document,
     parts[parts.length - 1],
     {
       start: {
@@ -1352,7 +1358,7 @@ export async function doComplete(
 
   const result =
     (await provideClassNameCompletions(state, document, position, context)) ||
-    provideCssHelperCompletions(state, document, position) ||
+    (await provideCssHelperCompletions(state, document, position)) ||
     provideCssDirectiveCompletions(state, document, position) ||
     provideScreenDirectiveCompletions(state, document, position) ||
     provideVariantsDirectiveCompletions(state, document, position) ||

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

@@ -1,5 +1,5 @@
 import dlv from 'dlv'
-import { State } from './state'
+import { State, TailwindCssSettings } from './state'
 import removeMeta from './removeMeta'
 import { ensureArray, dedupe, flatten } from './array'
 import type { Color } from 'vscode-languageserver'
@@ -192,3 +192,14 @@ export function culoriColorToVscodeColor(color: culori.Color): Color {
   let rgb = toRgb(color)
   return { red: rgb.r, green: rgb.g, blue: rgb.b, alpha: rgb.alpha ?? 1 }
 }
+
+export function formatColor(color: culori.Color, settings: TailwindCssSettings): string {
+  switch (settings.colorFormat) {
+    case 'hex':
+      const hasAlpha = color.alpha !== undefined && color.alpha !== 1;
+      return hasAlpha ? culori.formatHex8(color) : culori.formatHex(color)
+    case 'rgb':
+    default:
+      return culori.formatRgb(color)
+  }
+}

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

@@ -0,0 +1,84 @@
+import type { Plugin } from 'postcss'
+import parseValue from 'postcss-value-parser'
+import postcss from 'postcss'
+import { TailwindCssSettings } from './state'
+import { formatColor, getColorFromValue } from './color'
+
+type Comment = { index: number; value: string }
+
+export function addColorEquivalentsToCss(css: string, settings: TailwindCssSettings): string {
+  if (!css.includes('rgb')) {
+    return css
+  }
+
+  let comments: Comment[] = []
+
+  try {
+    postcss([postcssPlugin({ comments, settings })]).process(css, { from: undefined }).css
+  } catch {
+    return css
+  }
+
+  return applyComments(css, comments)
+}
+
+function applyComments(str: string, comments: Comment[]): string {
+  let offset = 0
+
+  for (let comment of comments) {
+    let index = comment.index + offset
+    let commentStr = `/* ${comment.value} */`
+    str = str.slice(0, index) + commentStr + str.slice(index)
+    offset += commentStr.length
+  }
+
+  return str
+}
+
+function postcssPlugin({
+  comments,
+  settings,
+}: {
+  comments: Comment[]
+  settings: TailwindCssSettings
+}): Plugin {
+  return {
+    postcssPlugin: 'plugin',
+    Declaration(decl) {
+      if (!decl.value.includes('rgb')) {
+        return
+      }
+
+      parseValue(decl.value).walk((node) => {
+        if (node.type !== 'function') {
+          return true
+        }
+
+        if (node.value !== 'rgb') {
+          return false
+        }
+
+        const values = node.nodes.filter((n) => n.type === 'word').map((n) => n.value)
+        if (values.length < 3) {
+          return false
+        }
+
+        const color = getColorFromValue(`rgb(${values.join(', ')})`);
+        if (!color || typeof color === 'string') {
+          return false
+        }
+
+        comments.push({
+          index:
+            decl.source.start.offset +
+            `${decl.prop}${decl.raws.between}`.length +
+            node.sourceEndIndex,
+          value: formatColor(color, settings),
+        })
+
+        return false
+      })
+    },
+  }
+}
+postcssPlugin.postcss = true

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

@@ -1,6 +1,7 @@
 import { State } from './state'
 import type { Container, Document, Root, Rule, Node, AtRule } from 'postcss'
 import { addPixelEquivalentsToCss, addPixelEquivalentsToValue } from './pixelEquivalents'
+import { addColorEquivalentsToCss } from './colorEquivalent';
 
 export function bigSign(bigIntValue) {
   // @ts-ignore
@@ -46,6 +47,9 @@ export async function stringifyRoot(state: State, root: Root, uri?: string): Pro
   if (settings.tailwindCSS.showPixelEquivalents) {
     css = addPixelEquivalentsToCss(css, settings.tailwindCSS.rootFontSize)
   }
+  if (settings.tailwindCSS.colorFormat !== 'rgb') {
+    css = addColorEquivalentsToCss(css, settings.tailwindCSS)
+  }
 
   return css
     .replace(/([^;{}\s])(\n\s*})/g, (_match, before, after) => `${before};${after}`)

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

@@ -49,6 +49,7 @@ export type TailwindCssSettings = {
   codeActions: boolean
   validate: boolean
   showPixelEquivalents: boolean
+  colorFormat: 'rgb' | 'hex'
   rootFontSize: number
   colorDecorators: boolean
   lint: {

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

@@ -6,6 +6,7 @@ import stringifyObject from 'stringify-object'
 import isObject from './isObject'
 import { Settings } from './state'
 import { addPixelEquivalentsToCss } from './pixelEquivalents'
+import { addColorEquivalentsToCss } from './colorEquivalent'
 
 export function stringifyConfigValue(x: any): string {
   if (isObject(x)) return `${Object.keys(x).length} values`
@@ -58,6 +59,9 @@ export function stringifyCss(className: string, obj: any, settings: Settings): s
   if (settings.tailwindCSS.showPixelEquivalents) {
     return addPixelEquivalentsToCss(css, settings.tailwindCSS.rootFontSize)
   }
+  if (settings.tailwindCSS.colorFormat !== 'rgb') {
+    return addColorEquivalentsToCss(css, settings.tailwindCSS)
+  }
 
   return css
 }

packages/vscode-tailwindcss/README.md

@@ -90,6 +90,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.colorFormat`
+
+The format to use for color values in completions and hovers. **Default: `rgb`**
+
 ### `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

@@ -295,6 +295,15 @@
           "default": true,
           "markdownDescription": "Show `px` equivalents for `rem` CSS values."
         },
+        "tailwindCSS.colorFormat": {
+          "type": "string",
+          "enum": [
+            "rgb",
+            "hex"
+          ],
+          "default": "rgb",
+          "markdownDescription": "The format to use for color values in completions and hovers."
+        },
         "tailwindCSS.rootFontSize": {
           "type": "number",
           "default": 16,