Skip to content

Commit 7a02a3a

Browse files
zcqno1zcqno1
committed
feature: add showColorEquivalents
1 parent dce390d commit 7a02a3a

File tree

8 files changed

+57
-9
lines changed

8 files changed

+57
-9
lines changed

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

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import type {
1111
} from 'vscode-languageserver'
1212
const dlv = require('dlv')
1313
import removeMeta from './util/removeMeta'
14-
import { getColor, getColorFromValue } from './util/color'
14+
import { getColor, getColorFromValue, getColorsInString } from './util/color'
1515
import { isHtmlContext } from './util/html'
1616
import { isCssContext } from './util/css'
1717
import { findLast } from './util/find'
@@ -189,7 +189,7 @@ export function completionsFromClassList(
189189
if (color !== null) {
190190
kind = 16
191191
if (typeof color !== 'string' && color.a !== 0) {
192-
documentation = color.toRgbString()
192+
documentation = color.toRgbString() + '\n' + color.toString('hex')
193193
}
194194
}
195195

@@ -270,7 +270,7 @@ export function completionsFromClassList(
270270
if (color !== null) {
271271
kind = 16
272272
if (typeof color !== 'string' && color.a !== 0) {
273-
documentation = color.toRgbString()
273+
documentation = color.toRgbString() + '\n' + color.toString('hex')
274274
}
275275
}
276276

@@ -552,7 +552,7 @@ function provideCssHelperCompletions(
552552
kind: color ? 16 : isObject(obj[item]) ? 9 : 10,
553553
// VS Code bug causes some values to not display in some cases
554554
detail: detail === '0' || detail === 'transparent' ? `${detail} ` : detail,
555-
documentation: color instanceof TinyColor && color.a !== 0 ? color.toRgbString() : null,
555+
documentation: color instanceof TinyColor && color.a !== 0 ? color.toRgbString() + '\n' + color.toString('hex') : null,
556556
textEdit: {
557557
newText: `${replaceDot ? '[' : ''}${item}${insertClosingBrace ? ']' : ''}`,
558558
range: {
@@ -1058,6 +1058,7 @@ export async function resolveCompletionItem(
10581058
const css = stringifyCss(item.data.join(':'), className, {
10591059
tabSize: dlv(settings, 'editor.tabSize', 2),
10601060
showPixelEquivalents: dlv(settings, 'tailwindCSS.showPixelEquivalents', true),
1061+
showColorEquivalents: dlv(settings, 'tailwindCSS.showColorEquivalents', true),
10611062
rootFontSize: dlv(settings, 'tailwindCSS.rootFontSize', 16),
10621063
})
10631064
if (css) {
@@ -1091,8 +1092,9 @@ function stringifyDecls(
10911092
obj: any,
10921093
{
10931094
showPixelEquivalents = false,
1095+
showColorEquivalents = false,
10941096
rootFontSize = 16,
1095-
}: Partial<{ showPixelEquivalents: boolean; rootFontSize: number }> = {}
1097+
}: Partial<{ showPixelEquivalents: boolean; showColorEquivalents: boolean; rootFontSize: number }> = {}
10961098
): string {
10971099
let props = Object.keys(obj)
10981100
let nonCustomProps = props.filter((prop) => !prop.startsWith('--'))
@@ -1106,7 +1108,12 @@ function stringifyDecls(
11061108
ensureArray(obj[prop])
11071109
.map((value) => {
11081110
const px = showPixelEquivalents ? remToPx(value, rootFontSize) : undefined
1109-
return `${prop}: ${value}${px ? `/* ${px} */` : ''};`
1111+
let hex = ''
1112+
const color = showColorEquivalents ? getColorsInString(value)[0] : undefined
1113+
if(color instanceof TinyColor) {
1114+
hex = color.toString() || ''
1115+
}
1116+
return `${prop}: ${value}${px ? `/* ${px} */` : ''}${hex ? `/* ${hex} */` : ''};`
11101117
})
11111118
.join(' ')
11121119
)
@@ -1121,6 +1128,7 @@ async function getCssDetail(state: State, className: any): Promise<string> {
11211128
const settings = await state.editor.getConfiguration()
11221129
return stringifyDecls(removeMeta(className), {
11231130
showPixelEquivalents: dlv(settings, 'tailwindCSS.showPixelEquivalents', true),
1131+
showColorEquivalents: dlv(settings, 'tailwindCSS.showColorEquivalents', true),
11241132
rootFontSize: dlv(settings, 'tailwindCSS.rootFontSize', 16),
11251133
})
11261134
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,7 @@ async function provideClassNameHover(
111111
{
112112
tabSize: dlv(settings, 'editor.tabSize', 2),
113113
showPixelEquivalents: dlv(settings, 'tailwindCSS.showPixelEquivalents', true),
114+
showColorEquivalents: dlv(settings, 'tailwindCSS.showColorEquivalents', true),
114115
rootFontSize: dlv(settings, 'tailwindCSS.rootFontSize', 16),
115116
}
116117
)

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ const colorRegex = new RegExp(
4646
'gi'
4747
)
4848

49-
function getColorsInString(str: string): (TinyColor | KeywordColor)[] {
49+
export function getColorsInString(str: string): (TinyColor | KeywordColor)[] {
5050
if (/(?:box|drop)-shadow/.test(str)) return []
5151

5252
return (

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

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import { State } from './state'
22
import type { Container, Root, Rule } from 'postcss'
33
import dlv from 'dlv'
44
import { remToPx } from './remToPx'
5+
import {getColorsInString} from './color'
6+
import { TinyColor } from '@ctrl/tinycolor'
57

68
export function bigSign(bigIntValue) {
79
// @ts-ignore
@@ -31,6 +33,7 @@ export async function stringifyRoot(state: State, root: Root, uri?: string): Pro
3133
let settings = await state.editor.getConfiguration(uri)
3234
let tabSize = dlv(settings, 'editor.tabSize', 2)
3335
let showPixelEquivalents = dlv(settings, 'tailwindCSS.showPixelEquivalents', true)
36+
let showColorEquivalents = dlv(settings, 'tailwindCSS.showColorEquivalents', true)
3437
let rootFontSize = dlv(settings, 'tailwindCSS.rootFontSize', 16)
3538

3639
let clone = root.clone()
@@ -48,6 +51,15 @@ export async function stringifyRoot(state: State, root: Root, uri?: string): Pro
4851
})
4952
}
5053

54+
if(showColorEquivalents) {
55+
clone.walkDecls((decl) => {
56+
const color = getColorsInString(decl.value)[0]
57+
if(color && color instanceof TinyColor) {
58+
decl.value = `${decl.value}/* ${color.toString()} */`
59+
}
60+
})
61+
}
62+
5163
return clone
5264
.toString()
5365
.replace(/([^;{}\s])(\n\s*})/g, (_match, before, after) => `${before};${after}`)
@@ -64,12 +76,18 @@ export function stringifyRules(state: State, rules: Rule[], tabSize: number = 2)
6476
export async function stringifyDecls(state: State, rule: Rule, uri?: string): Promise<string> {
6577
let settings = await state.editor.getConfiguration(uri)
6678
let showPixelEquivalents = dlv(settings, 'tailwindCSS.showPixelEquivalents', true)
79+
let showColorEquivalents = dlv(settings, 'tailwindCSS.showColorEquivalents', true)
6780
let rootFontSize = dlv(settings, 'tailwindCSS.rootFontSize', 16)
6881

6982
let result = []
7083
rule.walkDecls(({ prop, value }) => {
7184
let px = showPixelEquivalents ? remToPx(value, rootFontSize) : undefined
72-
result.push(`${prop}: ${value}${px ? `/* ${px} */` : ''};`)
85+
let hex = ''
86+
const color = showColorEquivalents ? getColorsInString(value)[0] : undefined
87+
if(color instanceof TinyColor) {
88+
hex = color.toString() || ''
89+
}
90+
result.push(`${prop}: ${value}${px ? `/* ${px} */` : ''}${hex ? `/* ${hex} */` : ''};`)
7391
})
7492
return result.join(' ')
7593
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ export type Settings = {
3939
includeLanguages: Record<string, string>
4040
validate: boolean
4141
showPixelEquivalents: boolean
42+
showColorEquivalents: boolean
4243
rootFontSize: number
4344
colorDecorators: boolean
4445
lint: {

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

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import { ensureArray } from './array'
55
import { remToPx } from './remToPx'
66
import stringifyObject from 'stringify-object'
77
import isObject from './isObject'
8+
import { getColorsInString } from './color'
9+
import { TinyColor } from '@ctrl/tinycolor'
810

911
export function stringifyConfigValue(x: any): string {
1012
if (isObject(x)) return `${Object.keys(x).length} values`
@@ -27,10 +29,12 @@ export function stringifyCss(
2729
{
2830
tabSize = 2,
2931
showPixelEquivalents = false,
32+
showColorEquivalents = false,
3033
rootFontSize = 16,
3134
}: Partial<{
3235
tabSize: number
3336
showPixelEquivalents: boolean
37+
showColorEquivalents: boolean
3438
rootFontSize: number
3539
}> = {}
3640
): string {
@@ -66,7 +70,14 @@ export function stringifyCss(
6670
const propStr = ensureArray(obj[curr])
6771
.map((val) => {
6872
const px = showPixelEquivalents ? remToPx(val, rootFontSize) : undefined
69-
return `${indentStr + indent}${curr}: ${val}${px ? `/* ${px} */` : ''};`
73+
let color = showColorEquivalents ? getColorsInString(val) : undefined
74+
let hex = ''
75+
if(color) {
76+
hex = color.map(c => {
77+
return c instanceof TinyColor ? c.toString() : c
78+
}).join(' ')
79+
}
80+
return `${indentStr + indent}${curr}: ${val}${px ? `/* ${px} */` : ''}${hex ? `/* ${hex} */` : ''};`
7081
})
7182
.join('\n')
7283
return `${acc}${i === 0 ? '' : '\n'}${propStr}`

‎packages/vscode-tailwindcss/README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,10 @@ Controls whether the editor should render inline color decorators for Tailwind C
7676

7777
Show `px` equivalents for `rem` CSS values in completions and hovers. **Default: `true`**
7878

79+
### `tailwindCSS.showColorEquivalents`
80+
81+
Show hex format for color values in completions and hovers. **Default: `true`**
82+
7983
### `tailwindCSS.rootFontSize`
8084

8185
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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -179,6 +179,11 @@
179179
"default": true,
180180
"markdownDescription": "Show `px` equivalents for `rem` CSS values."
181181
},
182+
"tailwindCSS.showColorEquivalents": {
183+
"type": "boolean",
184+
"default": true,
185+
"markdownDescription": "Show hex format for color values."
186+
},
182187
"tailwindCSS.rootFontSize": {
183188
"type": "number",
184189
"default": 16,

0 commit comments

Comments
 (0)