add experimental showPixelValues setting
parent
340336ed99
commit
615fd7f630
|
@ -162,6 +162,9 @@
|
|||
"tailwindCSS.experimental.classRegex": {
|
||||
"type": "array",
|
||||
"scope": "language-overridable"
|
||||
},
|
||||
"tailwindCSS.experimental.showPixelValues": {
|
||||
"type": "boolean"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -48,6 +48,7 @@ const defaultSettings: Settings = {
|
|||
includeLanguages: {},
|
||||
experimental: {
|
||||
classRegex: [],
|
||||
showPixelValues: false,
|
||||
},
|
||||
validate: true,
|
||||
lint: {
|
||||
|
|
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
}
|
|
@ -43,6 +43,7 @@ export type Settings = {
|
|||
}
|
||||
experimental: {
|
||||
classRegex: string[]
|
||||
showPixelValues: boolean
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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}`
|
||||
}, '')
|
||||
|
|
Loading…
Reference in New Issue