add experimental showPixelValues setting

master
Brad Cornes 2020-12-01 19:05:58 +00:00
parent 340336ed99
commit 615fd7f630
7 changed files with 50 additions and 12 deletions

View File

@ -162,6 +162,9 @@
"tailwindCSS.experimental.classRegex": {
"type": "array",
"scope": "language-overridable"
},
"tailwindCSS.experimental.showPixelValues": {
"type": "boolean"
}
}
}

View File

@ -48,6 +48,7 @@ const defaultSettings: Settings = {
includeLanguages: {},
experimental: {
classRegex: [],
showPixelValues: false,
},
validate: true,
lint: {

View File

@ -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
}

View File

@ -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

View File

@ -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
}

View File

@ -43,6 +43,7 @@ export type Settings = {
}
experimental: {
classRegex: string[]
showPixelValues: boolean
}
}

View File

@ -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}`
}, '')